Giter VIP home page Giter VIP logo

Comments (11)

qinfengwu90 avatar qinfengwu90 commented on June 4, 2024 1

It works now! Thank you very much.

from intl-tel-input.

b4ry avatar b4ry commented on June 4, 2024 1

@jackocnr
Hey!
I updated to v21.1.1 and it is working like a charm now. Thanks!

from intl-tel-input.

jackocnr avatar jackocnr commented on June 4, 2024

Thanks for reporting this. Unfortunately, I cannot reproduce the issue - I just created a new Next.js project with npx create-next-app@latest (which uses Next.js v14.1.4) and then did npm install --save intl-tel-input and then imported the plugin with import IntlTelInput from "intl-tel-input/react" and it works fine for me. I do get a linting error saying "Could not find a declaration file for module 'intl-tel-input/react'" (this is a known issue) but the dev build works fine and successfully displays the plugin on the page. (Fixed in v21.0.6)

Some questions for you:

  • What version of Next.js are you using? (and Node version too)
  • Can you share your Next config
  • And your TSconfig as well
  • And any custom Webpack config too if you have one

from intl-tel-input.

jackocnr avatar jackocnr commented on June 4, 2024

In v21.0.6 I've fixed the "Could not find a declaration file" error.

from intl-tel-input.

qinfengwu90 avatar qinfengwu90 commented on June 4, 2024

Thanks for reporting this. Unfortunately, I cannot reproduce the issue - I just created a new Next.js project with npx create-next-app@latest (which uses Next.js v14.1.4) and then did npm install --save intl-tel-input and then imported the plugin with import IntlTelInput from "intl-tel-input/react" and it works fine for me. I do get a linting error saying "Could not find a declaration file for module 'intl-tel-input/react'" (this is a known issue) but the dev build works fine and successfully displays the plugin on the page. (Fixed in v21.0.6)

Some questions for you:

  • What version of Next.js are you using? (and Node version too)
  • Can you share your Next config
  • And your TSconfig as well
  • And any custom Webpack config too if you have one

Thanks for looking into it. Here is the specific info:

  • Next.js v13.2.4
  • Node v21.6.2
  • next.config.js
const withBundleAnalyzer = require("@next/bundle-analyzer")({
  enabled: process.env.ANALYZE === "true",
});

if (
  process.env.LD_LIBRARY_PATH == null ||
  !process.env.LD_LIBRARY_PATH.includes(
    `${process.env.PWD}/node_modules/canvas/build/Release:`
  )
) {
  process.env.LD_LIBRARY_PATH = `${
    process.env.PWD
  }/node_modules/canvas/build/Release:${process.env.LD_LIBRARY_PATH || ""}`;
}

/** @type {import('next').NextConfig} */
const nextConfig = {
  experimental: {
    appDir: false,
  },
  images: {
    domains: [
      "cloudflare-ipfs.com",
      "gcqrvlegvyiunwewkuoz.supabase.co",
      "ordynhmcwwnczgnvuomz.supabase.co",
    ],
  },
  output: "standalone",
  webpack: (config) => {
    config.mode = "production";
    config.module.rules.push({
      test: /\.pdf/,
      type: "asset/resource",
      generator: {
        filename: "static/[hash][ext]",
      },
    });

    return config;
  },
  async redirects() {
    return [
      {
        source: "/onboarding",
        destination: "/onboarding/region-screen",
        permanent: true,
      },
      {
        source: "/profile",
        destination: "/patient-portal/profile",
        permanent: true,
      },
      {
        source: "/update-payment",
        destination: "/patient-portal/profile/update-payment",
        permanent: true,
      },
    ];
  },
};

module.exports = withBundleAnalyzer(nextConfig);
  • tsconfig.json
{
  "compilerOptions": {
    "target": "es2015",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "noImplicitAny": true,
    "noImplicitThis": true,
    "strictNullChecks": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts",
    "src/types",
    "additional.d.ts",
    "global.d.ts",
    "src/pages/_document.tsx"
  ],
  "exclude": ["node_modules"]
}
  • webpack 5.76.0

I just installed the latest version v21.0.6. The error in the first screenshot still persists, but the error in the second screenshot is gone.

When I do npm run dev, I received the following error

Screenshot 2024-04-06 at 07 51 32 
SyntaxError: Cannot use import statement outside a module
    at internalCompileFunction (node:internal/vm:77:18)
    at wrapSafe (node:internal/modules/cjs/loader:1290:20)
    at Module._compile (node:internal/modules/cjs/loader:1342:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1437:10)
    at Module.load (node:internal/modules/cjs/loader:1212:32)
    at Module._load (node:internal/modules/cjs/loader:1028:12)
    at Module.require (node:internal/modules/cjs/loader:1237:19)
    at require (node:internal/modules/helpers:176:18)
    at 8598 (/Users/qinfengwu/WebstormProjects/frontend-next/.next/server/pages/onboarding/complete-profile.js:1346:18)
    at __webpack_require__ (/Users/qinfengwu/WebstormProjects/frontend-next/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///6692:32:79)
    at __webpack_require__.a (/Users/qinfengwu/WebstormProjects/frontend-next/.next/server/webpack-runtime.js:97:13)
    at eval (webpack-internal:///6692:1:21)
    at 6692 (/Users/qinfengwu/WebstormProjects/frontend-next/.next/server/pages/onboarding/complete-profile.js:304:1)
    at __webpack_require__ (/Users/qinfengwu/WebstormProjects/frontend-next/.next/server/webpack-runtime.js:33:42)
    at /Users/qinfengwu/WebstormProjects/frontend-next/.next/server/pages/onboarding/complete-profile.js:317:77
    at __webpack_require__.a (/Users/qinfengwu/WebstormProjects/frontend-next/.next/server/webpack-runtime.js:97:13)
    at 467 (/Users/qinfengwu/WebstormProjects/frontend-next/.next/server/pages/onboarding/complete-profile.js:312:21)
    at __webpack_require__ (/Users/qinfengwu/WebstormProjects/frontend-next/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///8933:10:88)
    at __webpack_require__.a (/Users/qinfengwu/WebstormProjects/frontend-next/.next/server/webpack-runtime.js:97:13)
    at eval (webpack-internal:///8933:1:21)
    at 8933 (/Users/qinfengwu/WebstormProjects/frontend-next/.next/server/pages/onboarding/complete-profile.js:296:1)
    at __webpack_require__ (/Users/qinfengwu/WebstormProjects/frontend-next/.next/server/webpack-runtime.js:33:42)
    at /Users/qinfengwu/WebstormProjects/frontend-next/.next/server/pages/onboarding/complete-profile.js:335:73
    at __webpack_require__.a (/Users/qinfengwu/WebstormProjects/frontend-next/.next/server/webpack-runtime.js:97:13)
    at 4937 (/Users/qinfengwu/WebstormProjects/frontend-next/.next/server/pages/onboarding/complete-profile.js:330:21)
    at __webpack_require__ (/Users/qinfengwu/WebstormProjects/frontend-next/.next/server/webpack-runtime.js:33:42)
    at eval (webpack-internal:///3751:11:92)
    at __webpack_require__.a (/Users/qinfengwu/WebstormProjects/frontend-next/.next/server/webpack-runtime.js:97:13)
    at eval (webpack-internal:///3751:1:21)
    at 3751 (/Users/qinfengwu/WebstormProjects/frontend-next/.next/server/pages/onboarding/complete-profile.js:1054:1)
    at __webpack_require__ (/Users/qinfengwu/WebstormProjects/frontend-next/.next/server/webpack-runtime.js:33:42)
    at __webpack_exec__ (/Users/qinfengwu/WebstormProjects/frontend-next/.next/server/pages/onboarding/complete-profile.js:2492:39)
    at /Users/qinfengwu/WebstormProjects/frontend-next/.next/server/pages/onboarding/complete-profile.js:2493:28
    at Object.<anonymous> (/Users/qinfengwu/WebstormProjects/frontend-next/.next/server/pages/onboarding/complete-profile.js:2496:3)
    at Module._compile (node:internal/modules/cjs/loader:1378:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1437:10)
    at Module.load (node:internal/modules/cjs/loader:1212:32)
    at Module._load (node:internal/modules/cjs/loader:1028:12)
    at Module.require (node:internal/modules/cjs/loader:1237:19)
    at require (node:internal/modules/helpers:176:18)
    at Object.requirePage (/Users/qinfengwu/WebstormProjects/frontend-next/node_modules/next/dist/server/require.js:88:12)
    at /Users/qinfengwu/WebstormProjects/frontend-next/node_modules/next/dist/server/load-components.js:49:73
    at async Object.loadComponentsImpl [as loadComponents] (/Users/qinfengwu/WebstormProjects/frontend-next/node_modules/next/dist/server/load-components.js:49:26)
    at async DevServer.findPageComponentsImpl (/Users/qinfengwu/WebstormProjects/frontend-next/node_modules/next/dist/server/next-server.js:600:36) {
  page: '/onboarding/complete-profile'
}

from intl-tel-input.

jackocnr avatar jackocnr commented on June 4, 2024

also installed "@types/intl-tel-input": "^18.1.4" and imported "intl-tel-input/build/js/types.d.ts"

You shouldn't need either of these any more - can you try removing them both and see if that changes anything?

from intl-tel-input.

b4ry avatar b4ry commented on June 4, 2024

Getting the same issues in a react 18x app.
Installed the package via npm install intl-tel-input --save.
Cannot import intl-tel-input/react, but intl-tel-input works fine.
I did not install any types.

image image

Most likely it is caused by the v21.0.8. I downgraded to x.x.6 and it seems to be working.

from intl-tel-input.

jackocnr avatar jackocnr commented on June 4, 2024

Thanks for reporting @b4ry. Are you also using Typescript? Which version? And can you share your tsconfig?

And @qinfengwu90 which version of Typescript are you using?

from intl-tel-input.

qinfengwu90 avatar qinfengwu90 commented on June 4, 2024

also installed "@types/intl-tel-input": "^18.1.4" and imported "intl-tel-input/build/js/types.d.ts"

You shouldn't need either of these any more - can you try removing them both and see if that changes anything?

I removed those and it didn't change anything.

The Typescript version is 4.9.5

from intl-tel-input.

jackocnr avatar jackocnr commented on June 4, 2024

@qinfengwu90 @b4ry can you please try updating to v21.1.1 (and make sure you Cmd+Shift+p => reload window) and see if that fixes your issue.

from intl-tel-input.

jackocnr avatar jackocnr commented on June 4, 2024

I'll close this issue for now, but @b4ry do let me know if you're still having problems.

from intl-tel-input.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.