Open jugglingcats opened 2 years ago
I had the same problem and solved it by this patch:
-import AceEditor from 'react-ace';
+import ace from 'react-ace';
+const AceEditor = ace.default;
Same issue. Fix worked for me, although I used the following as I felt it looked cleaner for me 👍
import AceEditor from 'react-ace';
...
<AceEditor.default ... />
Problem
There seems to be a problem when using Create React App 5 (incl Webpack 5) and trying to import a component from another project that wraps ReactAce, when the component project is an ESM module.
I don't know if the underlying issue is with react-ace or somewhere else in the ecosystem(!), but we don't see this problem with any other imports, and our real project has quite a few (antd, threejs, d3, and so on).
Sample code to reproduce your issue
A full repro project is here: https://github.com/jugglingcats/react-ace-cra-transitive.
The project has a sub-module
react-ace-module
with just a simpleindex.js
as follows:The module uses ESM
exports
in itspackage.json
:This module is imported into the main CRA app.
To reproduce the error run
npm install
andnpm start
. In the browser console you can see the error:If you flip the comment in
react-ace-module/index.js
to useReactAce.default
you can get it to work, but this isn't necessary (and won't work) in other front-end frameworks such as Vite or NRWL NX.