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