SyntaxError: "Cannot use import statement outside a module" for CRA, Jest and react-force-graph

[danielbakas]

Describe the bug

When trying to import ForceGraph3D from react-force-graph by vasturiano in a create-react-app project, the tests fail with a SyntaxError: "Cannot use import statement outside a module". The error points to the first line of react-force-graph.mjs file.

Did you try recovering your dependencies?

Yes, I tried recovering my dependencies but the issue still persists.

Which terms did you search for in User Guide?

I searched for terms like "Jest encountered an unexpected token", "Cannot use import statement outside a module", "react-force-graph test fails".

Environment

Environment Info:

  current version of create-react-app: 5.0.1
  running from /Users/danielbakas/.npm/_npx/c67e74de0542c87c/node_modules/create-react-app

  System:
    OS: macOS 14.0
    CPU: (8) arm64 Apple M1 Pro
  Binaries:
    Node: 20.3.1 - /opt/homebrew/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 9.6.7 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 114.0.5735.198
    Safari: 17.0
  npmPackages:
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    react-scripts: ^5.0.1 => 5.0.1 

Steps to reproduce

1. Create a new app using create-react-app.
2. Install react-force-graph package using npm install react-force-graph.
3. In your App component, import ForceGraph3D from react-force-graph.
4. Run the tests with npm test.

Expected behavior

Tests run successfully without any import errors.

Actual behavior

Tests fail with SyntaxError: "Cannot use import statement outside a module". The error points to the first line of react-force-graph.mjs file.

[HoangVNH]

Hi @danielbakas, I also encountered with the error "Cannot use import statement outside a module" but in my case it's due to axios. Here is my resolution, I hope it can help you: https://stackoverflow.com/questions/75523632/cannot-use-import-statement-outside-a-module-with-axios-in-react/76458512#76458512