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 react-scripts@3.3.1. 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 react-scripts@3.3.1. 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$',
     ],