Problem using an ESM module that itself uses react-ace

[jugglingcats]

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 simple index.js as follows:

import * as React from "react"
import ReactAce from "react-ace";

export const MyReactAce=() => {
    // switch the two lines below to get the app working!

    return React.createElement(ReactAce, {}, null)
    // return React.createElement(ReactAce.default, {}, null)
}

The module uses ESM exports in its package.json:

  "type": "module",
  "exports": {
    ".": {
      "import": "./index.js"
    }
  }

This module is imported into the main CRA app.

To reproduce the error run npm install and npm start. In the browser console you can see the error:

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of `MyReactAce`.
    at createFiberFromTypeAndProps (react-dom.development.js:28389:1)
    at createFiberFromElement (react-dom.development.js:28415:1)
    at reconcileSingleElement (react-dom.development.js:15620:1)
    at reconcileChildFibers (react-dom.development.js:15678:1)
    at reconcileChildren (react-dom.development.js:19971:1)
    at updateFunctionComponent (react-dom.development.js:20419:1)
    at beginWork (react-dom.development.js:22430:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:4161:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:4210:1)
    at invokeGuardedCallback (react-dom.development.js:4274:1)

If you flip the comment in react-ace-module/index.js to use ReactAce.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.

[magjac]

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;

[Designer023]

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 ... />