Import errors when installed in Next JS project

[blackge]

Hi,

I've just installed this to my Next JS typescript project to test it out. Following the basic instructions in the React-Chat folder I'm getting an import error on multiple components on the react import:

import * as Xe from "react";
^^^^^^

SyntaxError: Cannot use import statement outside a module

I'm using

• node version 18.16.0
• Typescript v5.1.3
• React v18.2.0

My library is configured to use "node" module resolution. Here is the ts.config:

{
  "compilerOptions": {
    "baseUrl": ".",
    "target": "esnext",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true
  },
  "exclude": [
    "node_modules"
  ],
  "include": [
    "next-env.d.ts",
    "module.d.ts",
    "**/*.ts",
    "**/*.tsx"
  ]
}

[blackge]

For anyone else with this issue, I was able to fix it using the Next JS dynamic import after creating my voiceflow component.

const Voiceflow = dynamic(() => import('components/voiceflow/Voiceflow'), { ssr: false })

[mepc36]

@blackge Do you mind please posting more of the context of that ^^^ code snippet? Still having trouble figuring this out, thanks. It's saying that the component is not defined...

edit: for example, I'd love to see your file at components/voiceflow/Voiceflow.

[mepc36]

Oh and did you have to transpile the @voiceflow/react-chat package? P.S. I'm also using a javascript React app, not a typescript one.

[blackge]

Hi @mepc36 I didn't have to transpile, just change the way it was imported to use the NextJS dynamic import function. The issue was a specific NextJS which can be quite fussy about imports.

[mepc36]

@blackge Could I see your Voiceflow component please? Still stuck on this, I'd really appreciate it! Even redacted would be great 👍 thanks

[mepc36]

Upgrading to Next.js v13 mostly fixed this.

[blackge]

Great to hear. We are running 13 ourselves so that makes sense.Sent from my iPhoneOn 26 Sep 2023, at 19:11, Martin Connor ***@***.***> wrote: Upgrading to Next.js v13 mostly fixed this. —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you were mentioned.Message ID: ***@***.***>