voiceflow/react-chat

Import errors when installed in Next JS project

Closed this issue · 7 comments

blackge commented

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 commented

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 commented

@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 commented

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 commented

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 commented

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

mepc36 commented

Upgrading to Next.js v13 mostly fixed this.

blackge commented