SyntaxError: Cannot use import statement outside a module

[zelth]

any ideas on this? I've followed

import { JsonEditor as Editor } from 'jsoneditor-react';
import 'jsoneditor-react/es/editor.min.css';
later in render method:

    <Editor
        value={yourJson}
        onChange={this.handleChange}
    />

[vankop]

Thanks for creating issue, could you please provide a minimal reproducible repo?

[zelth]

I followed the instructions above with a react app

and this is the error
SyntaxError: Cannot use import statement outside a module

[ialsowalkdogs]

I had this issue while running Jest tests with my React project setup with [email protected]. Adding identity-obj-proxy as devDependency and adding the following to my Jest config resolved the issue for me:

"jest": {
    "transformIgnorePatterns": [
      "node_modules/(?!(jsoneditor-react/))"
    ],
    "moduleNameMapper": {
      "\\.css$": "identity-obj-proxy"
    }
  },

[kory-stiger]

I had this issue while running Jest tests with my React project setup with [email protected]. Adding identity-obj-proxy as devDependency and adding the following to my Jest config resolved the issue for me:

"jest": {
    "transformIgnorePatterns": [
      "node_modules/(?!(jsoneditor-react/))"
    ],
    "moduleNameMapper": {
      "\\.css$": "identity-obj-proxy"
    }
  },

Worked for me!

A couple notes:

• I didn't need the moduleNameMapper part
• I had to put it in my package.json
• I also had to add the jsoneditor package as well like this "node_modules/(?!(jsoneditor-react|jsoneditor)/)"
• This post helped me understand why I needed it: https://stackoverflow.com/a/55803188/13154904

[Barik85]

I tried this

"jest": {
    "transformIgnorePatterns": [
      "node_modules/(?!(jsoneditor-react/))"
    ],
    "moduleNameMapper": {
      "\\.css$": "identity-obj-proxy"
    }
  },

But no result.
When running test i got "SyntaxError: Cannot use import statement outside a module".
I'am using creat-react-app + typescript
Any other desicions?

[bruderda]

See also issue #34

[sonaliraut-29]

My project had craco so below settings worked for me

configure(webpackConfig) {
   return cracoBabelLoader.overrideWebpackConfig({
     webpackConfig,
     pluginOptions: {
       includes: [
         __dirname + '/node_modules/yocto-queue',
         // new settings
         __dirname + '/node_modules/jsoneditor-react',
         __dirname + '/node_modules/jsoneditor',
       ],
     },
   })
 },
  transformIgnorePatterns: [
       //new settings
       '/node_modules/(?!p-limit|yocto-queue|react-photoswipe-gallery|photoswipe|jsoneditor-react|jsoneditor).+\\.js$',
  ],