Unpolyfilled ES6 version of component fails to build with React-Create-App

1. What version of RJEA are you using (react-json-editor-ajrm version)? *REQUIRED 2.5.5
2. What operating system and processor architecture are you using? *REQUIRED Macbook Pro with Visual Studio Code
3. What did you do? *REQUIRED Used the editor in my React page, which ran perfectly with “npm run dev”, but gives me error when “npm run build”.
4. What did you expect to see? *REQUIRED Not an error
5. What did you see instead? *REQUIRED An error:

" Creating an optimized production build… Failed to compile.

Failed to minify the code from this file:

    ./node_modules/react-json-editor-ajrm/es/index.js:12

Read more here: http://bit.ly/2tRViJ9

npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! operation-react-app@0.1.0 build: react-scripts build npm ERR! Exit status 1 npm ERR! npm ERR! Failed at the operation-react-app@0.1.0 build script. npm ERR! This is probably not a problem with npm. There is likely additional logging output above. "

What did I do wrong?

[valenticanadell]

I tried to import react-json-editor-ajrm/index as you said, seems to compile. Thank you very much!!

[PatrickSachs]

If you look at the package.json of the react-json-editor-ajrm in your node_modules folder, you will see that it has an entry called module pointing to /es/index.js.

The module field is used to link to an ES6 version of the code. This is to be used by tools like webpack which can actually work with non commonjs modules. Tools that do not support it(like create-react-app) should ignore it. But since nothing is perfect it looks like react-scripts 1 has a bug that causes them to use this field regardless.

The fix would either be:

• Update to react-scripts 2 (just released!)
• Import react-json-editor-ajrm/index explictly

I understand that this is an inconvenience, but I don’t think we should change a correct setting in the package.json to work with a tools that interprets it incorrectly.