ReactDOM does not provide an export named 'flushSync'

[Kyzegs]

Bug report

Current Behavior

Radix Primitives does not work because of ReactDOM.

Expected behavior

Radix Primitives would work as intended.

Reproducible example

I don't have reproducible example. Here's all the information I do have:

Uncaught (in promise) SyntaxError: The requested module '/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/index.js?v=a5515e19' does not provide an export named 'flushSync' (at index.module.js?v=a5515e19:3:9)

import $4q5Fq$babelruntimehelpersesmextends from "/node_modules/.pnpm/@[email protected]/node_modules/@babel/runtime/helpers/esm/extends.js?v=a5515e19";
import __vite__cjsImport1_react from "/node_modules/.vite/deps/react.js?v=36d90183"; const $4q5Fq$forwardRef = __vite__cjsImport1_react["forwardRef"]; const $4q5Fq$useEffect = __vite__cjsImport1_react["useEffect"]; const $4q5Fq$createElement = __vite__cjsImport1_react["createElement"];
import {flushSync as $4q5Fq$flushSync} from "/node_modules/.pnpm/[email protected][email protected]/node_modules/react-dom/index.js?v=a5515e19";
import {Slot as $4q5Fq$Slot} from "/node_modules/.pnpm/@[email protected][email protected]/node_modules/@radix-ui/react-slot/dist/index.module.js?v=a5515e19";





const $8927f6f2acc4f386$var$NODES = [
    'a',
    'button',
    'div',
    'h2',
    'h3',
    'img',
    'label',
    'li',
    'nav',
    'ol',
    'p',
    'span',
    'svg',
    'ul'
]; // Temporary while we await merge of this fix:
// https://github.com/DefinitelyTyped/DefinitelyTyped/pull/55396
// prettier-ignore
/* -------------------------------------------------------------------------------------------------
 * Primitive
 * -----------------------------------------------------------------------------------------------*/ const $8927f6f2acc4f386$export$250ffa63cdc0d034 = $8927f6f2acc4f386$var$NODES.reduce((primitive, node)=>{
    const Node = /*#__PURE__*/ $4q5Fq$forwardRef((props, forwardedRef)=>{
        const { asChild: asChild , ...primitiveProps } = props;
        const Comp = asChild ? $4q5Fq$Slot : node;
        $4q5Fq$useEffect(()=>{
            window[Symbol.for('radix-ui')] = true;
        }, []);
        return /*#__PURE__*/ $4q5Fq$createElement(Comp, $4q5Fq$babelruntimehelpersesmextends({}, primitiveProps, {
            ref: forwardedRef
        }));
    });
    Node.displayName = `Primitive.${node}`;
    return {
        ...primitive,
        [node]: Node
    };
}, {});
/* -------------------------------------------------------------------------------------------------
 * Utils
 * -----------------------------------------------------------------------------------------------*/ /**
 * Flush custom event dispatch
 * https://github.com/radix-ui/primitives/pull/1378
 *
 * React batches *all* event handlers since version 18, this introduces certain considerations when using custom event types.
 *
 * Internally, React prioritises events in the following order:
 *  - discrete
 *  - continuous
 *  - default
 *
 * https://github.com/facebook/react/blob/a8a4742f1c54493df00da648a3f9d26e3db9c8b5/packages/react-dom/src/events/ReactDOMEventListener.js#L294-L350
 *
 * `discrete` is an  important distinction as updates within these events are applied immediately.
 * React however, is not able to infer the priority of custom event types due to how they are detected internally.
 * Because of this, it's possible for updates from custom events to be unexpectedly batched when
 * dispatched by another `discrete` event.
 *
 * In order to ensure that updates from custom events are applied predictably, we need to manually flush the batch.
 * This utility should be used when dispatching a custom event from within another `discrete` event, this utility
 * is not nessesary when dispatching known event types, or if dispatching a custom type inside a non-discrete event.
 * For example:
 *
 * dispatching a known click 👎
 * target.dispatchEvent(new Event(‘click’))
 *
 * dispatching a custom type within a non-discrete event 👎
 * onScroll={(event) => event.target.dispatchEvent(new CustomEvent(‘customType’))}
 *
 * dispatching a custom type within a `discrete` event 👍
 * onPointerDown={(event) => dispatchDiscreteCustomEvent(event.target, new CustomEvent(‘customType’))}
 *
 * Note: though React classifies `focus`, `focusin` and `focusout` events as `discrete`, it's  not recommended to use
 * this utility with them. This is because it's possible for those handlers to be called implicitly during render
 * e.g. when focus is within a component as it is unmounted, or when managing focus on mount.
 */ function $8927f6f2acc4f386$export$6d1a0317bde7de7f(target, event) {
    if (target) $4q5Fq$flushSync(()=>target.dispatchEvent(event)
    );
}
/* -----------------------------------------------------------------------------------------------*/ const $8927f6f2acc4f386$export$be92b6f5f03c0fe9 = $8927f6f2acc4f386$export$250ffa63cdc0d034;




export {$8927f6f2acc4f386$export$250ffa63cdc0d034 as Primitive, $8927f6f2acc4f386$export$be92b6f5f03c0fe9 as Root, $8927f6f2acc4f386$export$6d1a0317bde7de7f as dispatchDiscreteCustomEvent};
                                        

//# sourceMappingURL=data:application/json;base64,eyJtYXBwaW5ncyI6Ijs7Ozs7QTs7OztBQ0lBLE1BQU1NLDJCQUFLLEdBQUc7SUFDWixHQURZO0lBRVosUUFGWTtJQUdaLEtBSFk7SUFJWixJQUpZO0lBS1osSUFMWTtJQU1aLEtBTlk7SUFPWixPQVBZO0lBUVosSUFSWTtJQVNaLEtBVFk7SUFVWixJQVZZO0lBV1osR0FYWTtJQVlaLE1BWlk7SUFhWixLQWJZO0lBY1osSUFkWTtDQUFkLEEsRUFpQkEsOENBakJBO0FBa0JBLGdFQUFBO0FBQ0Esa0JBQUE7QUFjQTs7b0dBRUEsQ0FFQSxNQUFNTix5Q0FBUyxHQUFHTSwyQkFBSyxDQUFDQyxNQUFOLENBQWEsQ0FBQ0MsU0FBRCxFQUFZQyxJQUFaLEdBQXFCO0lBQ2xELE1BQU1DLElBQUksR0FBQSxhQUFHUCxDQUFBQSxpQkFBQSxDQUFpQixDQUFDUyxLQUFELEVBQTRDQyxZQUE1QyxHQUFrRTtRQUM5RixNQUFNLEUsU0FBRUMsT0FBRixDQUFBLEVBQVcsR0FBR0MsY0FBSCxFQUFYLEdBQWlDSCxLQUF2QyxBQUFNO1FBQ04sTUFBTUksSUFBUyxHQUFHRixPQUFPLEdBQUdULFdBQUgsR0FBVUksSUFBbkMsQUFBQTtRQUVBTixnQkFBQSxDQUFnQixJQUFNO1lBQ25CZSxNQUFELENBQWdCQyxNQUFNLENBQUNDLEdBQVAsQ0FBVyxVQUFYLENBQWhCLENBQUEsR0FBMEMsSUFBMUMsQ0FBQ0Y7U0FESCxFQUVHLEVBRkgsQ0FFQyxDQUFBO1FBRUQsT0FBQSxhQUFPLENBQUEsb0JBQUEsQ0FBQyxJQUFELEVBQUEsb0NBQUEsQ0FBQSxFQUFBLEVBQVVILGNBQVYsRUFBUDtZQUFpQyxHQUFHLEVBQUVGLFlBQUw7U0FBMUIsQ0FBQSxDQUFQLENBQU87S0FSSSxDQUFiLEFBU0M7SUFFREgsSUFBSSxDQUFDVyxXQUFMLEdBQW9CLENBQUEsVUFBQSxFQUFZWixJQUFLLENBQUEsQ0FBckMsQ0FBQUM7SUFFQSxPQUFPO1FBQUUsR0FBR0YsU0FBTDtRQUFnQixDQUFDQyxJQUFELENBQUEsRUFBUUMsSUFBUjtLQUF2QixDQUFPO0NBZFMsRUFlZixFQWZlLENBQWxCLEFBZUM7QUFFRDs7b0dBRUEsQ0FFQTs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7R0FtQ0EsQ0FFQSxTQUFTUix5Q0FBVCxDQUE0RG9CLE1BQTVELEVBQWlGQyxLQUFqRixFQUEyRjtJQUN6RixJQUFJRCxNQUFKLEVBQVlsQixnQkFBQSxDQUFtQixJQUFNa0IsTUFBTSxDQUFDRyxhQUFQLENBQXFCRixLQUFyQixDQUF6QjtJQUFBLENBQVosQ0FBQTtDQUNEO0FBRUQsb0dBQUEsQ0FFQSxNQUFNdEIseUNBQUksR0FBR0QseUNBQWIsQUFBQTs7QUR6R0EiLCJzb3VyY2VzIjpbInBhY2thZ2VzL3JlYWN0L3ByaW1pdGl2ZS9zcmMvaW5kZXgudHMiLCJwYWNrYWdlcy9yZWFjdC9wcmltaXRpdmUvc3JjL1ByaW1pdGl2ZS50c3giXSwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IHtcbiAgUHJpbWl0aXZlLFxuICAvL1xuICBSb290LFxuICAvL1xuICBkaXNwYXRjaERpc2NyZXRlQ3VzdG9tRXZlbnQsXG59IGZyb20gJy4vUHJpbWl0aXZlJztcbmV4cG9ydCB0eXBlIHsgQ29tcG9uZW50UHJvcHNXaXRob3V0UmVmLCBQcmltaXRpdmVQcm9wc1dpdGhSZWYgfSBmcm9tICcuL1ByaW1pdGl2ZSc7XG4iLCJpbXBvcnQgKiBhcyBSZWFjdCBmcm9tICdyZWFjdCc7XG5pbXBvcnQgKiBhcyBSZWFjdERPTSBmcm9tICdyZWFjdC1kb20nO1xuaW1wb3J0IHsgU2xvdCB9IGZyb20gJ0ByYWRpeC11aS9yZWFjdC1zbG90JztcblxuY29uc3QgTk9ERVMgPSBbXG4gICdhJyxcbiAgJ2J1dHRvbicsXG4gICdkaXYnLFxuICAnaDInLFxuICAnaDMnLFxuICAnaW1nJyxcbiAgJ2xhYmVsJyxcbiAgJ2xpJyxcbiAgJ25hdicsXG4gICdvbCcsXG4gICdwJyxcbiAgJ3NwYW4nLFxuICAnc3ZnJyxcbiAgJ3VsJyxcbl0gYXMgY29uc3Q7XG5cbi8vIFRlbXBvcmFyeSB3aGlsZSB3ZSBhd2FpdCBtZXJnZSBvZiB0aGlzIGZpeDpcbi8vIGh0dHBzOi8vZ2l0aHViLmNvbS9EZWZpbml0ZWx5VHlwZWQvRGVmaW5pdGVseVR5cGVkL3B1bGwvNTUzOTZcbi8vIHByZXR0aWVyLWlnbm9yZVxudHlwZSBQcm9wc1dpdGhvdXRSZWY8UD4gPSBQIGV4dGVuZHMgYW55ID8gKCdyZWYnIGV4dGVuZHMga2V5b2YgUCA/IFBpY2s8UCwgRXhjbHVkZTxrZXlvZiBQLCAncmVmJz4+IDogUCkgOiBQO1xudHlwZSBDb21wb25lbnRQcm9wc1dpdGhvdXRSZWY8VCBleHRlbmRzIFJlYWN0LkVsZW1lbnRUeXBlPiA9IFByb3BzV2l0aG91dFJlZjxcbiAgUmVhY3QuQ29tcG9uZW50UHJvcHM8VD5cbj47XG5cbnR5cGUgUHJpbWl0aXZlcyA9IHsgW0UgaW4gdHlwZW9mIE5PREVTW251bWJlcl1dOiBQcmltaXRpdmVGb3J3YXJkUmVmQ29tcG9uZW50PEU+IH07XG50eXBlIFByaW1pdGl2ZVByb3BzV2l0aFJlZjxFIGV4dGVuZHMgUmVhY3QuRWxlbWVudFR5cGU+ID0gUmVhY3QuQ29tcG9uZW50UHJvcHNXaXRoUmVmPEU+ICYge1xuICBhc0NoaWxkPzogYm9vbGVhbjtcbn07XG5cbmludGVyZmFjZSBQcmltaXRpdmVGb3J3YXJkUmVmQ29tcG9uZW50PEUgZXh0ZW5kcyBSZWFjdC5FbGVtZW50VHlwZT5cbiAgZXh0ZW5kcyBSZWFjdC5Gb3J3YXJkUmVmRXhvdGljQ29tcG9uZW50PFByaW1pdGl2ZVByb3BzV2l0aFJlZjxFPj4ge31cblxuLyogLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLVxuICogUHJpbWl0aXZlXG4gKiAtLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLSovXG5cbmNvbnN0IFByaW1pdGl2ZSA9IE5PREVTLnJlZHVjZSgocHJpbWl0aXZlLCBub2RlKSA9PiB7XG4gIGNvbnN0IE5vZGUgPSBSZWFjdC5mb3J3YXJkUmVmKChwcm9wczogUHJpbWl0aXZlUHJvcHNXaXRoUmVmPHR5cGVvZiBub2RlPiwgZm9yd2FyZGVkUmVmOiBhbnkpID0+IHtcbiAgICBjb25zdCB7IGFzQ2hpbGQsIC4uLnByaW1pdGl2ZVByb3BzIH0gPSBwcm9wcztcbiAgICBjb25zdCBDb21wOiBhbnkgPSBhc0NoaWxkID8gU2xvdCA6IG5vZGU7XG5cbiAgICBSZWFjdC51c2VFZmZlY3QoKCkgPT4ge1xuICAgICAgKHdpbmRvdyBhcyBhbnkpW1N5bWJvbC5mb3IoJ3JhZGl4LXVpJyldID0gdHJ1ZTtcbiAgICB9LCBbXSk7XG5cbiAgICByZXR1cm4gPENvbXAgey4uLnByaW1pdGl2ZVByb3BzfSByZWY9e2ZvcndhcmRlZFJlZn0gLz47XG4gIH0pO1xuXG4gIE5vZGUuZGlzcGxheU5hbWUgPSBgUHJpbWl0aXZlLiR7bm9kZX1gO1xuXG4gIHJldHVybiB7IC4uLnByaW1pdGl2ZSwgW25vZGVdOiBOb2RlIH07XG59LCB7fSBhcyBQcmltaXRpdmVzKTtcblxuLyogLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLVxuICogVXRpbHNcbiAqIC0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tKi9cblxuLyoqXG4gKiBGbHVzaCBjdXN0b20gZXZlbnQgZGlzcGF0Y2hcbiAqIGh0dHBzOi8vZ2l0aHViLmNvbS9yYWRpeC11aS9wcmltaXRpdmVzL3B1bGwvMTM3OFxuICpcbiAqIFJlYWN0IGJhdGNoZXMgKmFsbCogZXZlbnQgaGFuZGxlcnMgc2luY2UgdmVyc2lvbiAxOCwgdGhpcyBpbnRyb2R1Y2VzIGNlcnRhaW4gY29uc2lkZXJhdGlvbnMgd2hlbiB1c2luZyBjdXN0b20gZXZlbnQgdHlwZXMuXG4gKlxuICogSW50ZXJuYWxseSwgUmVhY3QgcHJpb3JpdGlzZXMgZXZlbnRzIGluIHRoZSBmb2xsb3dpbmcgb3JkZXI6XG4gKiAgLSBkaXNjcmV0ZVxuICogIC0gY29udGludW91c1xuICogIC0gZGVmYXVsdFxuICpcbiAqIGh0dHBzOi8vZ2l0aHViLmNvbS9mYWNlYm9vay9yZWFjdC9ibG9iL2E4YTQ3NDJmMWM1NDQ5M2RmMDBkYTY0OGEzZjlkMjZlM2RiOWM4YjUvcGFja2FnZXMvcmVhY3QtZG9tL3NyYy9ldmVudHMvUmVhY3RET01FdmVudExpc3RlbmVyLmpzI0wyOTQtTDM1MFxuICpcbiAqIGBkaXNjcmV0ZWAgaXMgYW4gIGltcG9ydGFudCBkaXN0aW5jdGlvbiBhcyB1cGRhdGVzIHdpdGhpbiB0aGVzZSBldmVudHMgYXJlIGFwcGxpZWQgaW1tZWRpYXRlbHkuXG4gKiBSZWFjdCBob3dldmVyLCBpcyBub3QgYWJsZSB0byBpbmZlciB0aGUgcHJpb3JpdHkgb2YgY3VzdG9tIGV2ZW50IHR5cGVzIGR1ZSB0byBob3cgdGhleSBhcmUgZGV0ZWN0ZWQgaW50ZXJuYWxseS5cbiAqIEJlY2F1c2Ugb2YgdGhpcywgaXQncyBwb3NzaWJsZSBmb3IgdXBkYXRlcyBmcm9tIGN1c3RvbSBldmVudHMgdG8gYmUgdW5leHBlY3RlZGx5IGJhdGNoZWQgd2hlblxuICogZGlzcGF0Y2hlZCBieSBhbm90aGVyIGBkaXNjcmV0ZWAgZXZlbnQuXG4gKlxuICogSW4gb3JkZXIgdG8gZW5zdXJlIHRoYXQgdXBkYXRlcyBmcm9tIGN1c3RvbSBldmVudHMgYXJlIGFwcGxpZWQgcHJlZGljdGFibHksIHdlIG5lZWQgdG8gbWFudWFsbHkgZmx1c2ggdGhlIGJhdGNoLlxuICogVGhpcyB1dGlsaXR5IHNob3VsZCBiZSB1c2VkIHdoZW4gZGlzcGF0Y2hpbmcgYSBjdXN0b20gZXZlbnQgZnJvbSB3aXRoaW4gYW5vdGhlciBgZGlzY3JldGVgIGV2ZW50LCB0aGlzIHV0aWxpdHlcbiAqIGlzIG5vdCBuZXNzZXNhcnkgd2hlbiBkaXNwYXRjaGluZyBrbm93biBldmVudCB0eXBlcywgb3IgaWYgZGlzcGF0Y2hpbmcgYSBjdXN0b20gdHlwZSBpbnNpZGUgYSBub24tZGlzY3JldGUgZXZlbnQuXG4gKiBGb3IgZXhhbXBsZTpcbiAqXG4gKiBkaXNwYXRjaGluZyBhIGtub3duIGNsaWNrIPCfkY5cbiAqIHRhcmdldC5kaXNwYXRjaEV2ZW50KG5ldyBFdmVudCjigJhjbGlja+KAmSkpXG4gKlxuICogZGlzcGF0Y2hpbmcgYSBjdXN0b20gdHlwZSB3aXRoaW4gYSBub24tZGlzY3JldGUgZXZlbnQg8J+RjlxuICogb25TY3JvbGw9eyhldmVudCkgPT4gZXZlbnQudGFyZ2V0LmRpc3BhdGNoRXZlbnQobmV3IEN1c3RvbUV2ZW50KOKAmGN1c3RvbVR5cGXigJkpKX1cbiAqXG4gKiBkaXNwYXRjaGluZyBhIGN1c3RvbSB0eXBlIHdpdGhpbiBhIGBkaXNjcmV0ZWAgZXZlbnQg8J+RjVxuICogb25Qb2ludGVyRG93bj17KGV2ZW50KSA9PiBkaXNwYXRjaERpc2NyZXRlQ3VzdG9tRXZlbnQoZXZlbnQudGFyZ2V0LCBuZXcgQ3VzdG9tRXZlbnQo4oCYY3VzdG9tVHlwZeKAmSkpfVxuICpcbiAqIE5vdGU6IHRob3VnaCBSZWFjdCBjbGFzc2lmaWVzIGBmb2N1c2AsIGBmb2N1c2luYCBhbmQgYGZvY3Vzb3V0YCBldmVudHMgYXMgYGRpc2NyZXRlYCwgaXQncyAgbm90IHJlY29tbWVuZGVkIHRvIHVzZVxuICogdGhpcyB1dGlsaXR5IHdpdGggdGhlbS4gVGhpcyBpcyBiZWNhdXNlIGl0J3MgcG9zc2libGUgZm9yIHRob3NlIGhhbmRsZXJzIHRvIGJlIGNhbGxlZCBpbXBsaWNpdGx5IGR1cmluZyByZW5kZXJcbiAqIGUuZy4gd2hlbiBmb2N1cyBpcyB3aXRoaW4gYSBjb21wb25lbnQgYXMgaXQgaXMgdW5tb3VudGVkLCBvciB3aGVuIG1hbmFnaW5nIGZvY3VzIG9uIG1vdW50LlxuICovXG5cbmZ1bmN0aW9uIGRpc3BhdGNoRGlzY3JldGVDdXN0b21FdmVudDxFIGV4dGVuZHMgQ3VzdG9tRXZlbnQ+KHRhcmdldDogRVsndGFyZ2V0J10sIGV2ZW50OiBFKSB7XG4gIGlmICh0YXJnZXQpIFJlYWN0RE9NLmZsdXNoU3luYygoKSA9PiB0YXJnZXQuZGlzcGF0Y2hFdmVudChldmVudCkpO1xufVxuXG4vKiAtLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLS0tLSovXG5cbmNvbnN0IFJvb3QgPSBQcmltaXRpdmU7XG5cbmV4cG9ydCB7XG4gIFByaW1pdGl2ZSxcbiAgLy9cbiAgUm9vdCxcbiAgLy9cbiAgZGlzcGF0Y2hEaXNjcmV0ZUN1c3RvbUV2ZW50LFxufTtcbmV4cG9ydCB0eXBlIHsgQ29tcG9uZW50UHJvcHNXaXRob3V0UmVmLCBQcmltaXRpdmVQcm9wc1dpdGhSZWYgfTtcbiJdLCJuYW1lcyI6WyJQcmltaXRpdmUiLCJSb290IiwiZGlzcGF0Y2hEaXNjcmV0ZUN1c3RvbUV2ZW50IiwiUmVhY3QiLCJSZWFjdERPTSIsIlNsb3QiLCJOT0RFUyIsInJlZHVjZSIsInByaW1pdGl2ZSIsIm5vZGUiLCJOb2RlIiwiZm9yd2FyZFJlZiIsInByb3BzIiwiZm9yd2FyZGVkUmVmIiwiYXNDaGlsZCIsInByaW1pdGl2ZVByb3BzIiwiQ29tcCIsInVzZUVmZmVjdCIsIndpbmRvdyIsIlN5bWJvbCIsImZvciIsImRpc3BsYXlOYW1lIiwidGFyZ2V0IiwiZXZlbnQiLCJmbHVzaFN5bmMiLCJkaXNwYXRjaEV2ZW50Il0sInZlcnNpb24iOjMsImZpbGUiOiJpbmRleC5tb2R1bGUuanMubWFwIn0=

Suggested solution

n/a

Additional context

n/a

Your environment

Software	Name(s)	Version
Radix Package(s)	react-dropdown-menu	2.0.2
React	n/a	18.2.0
Browser	Chrome	Version 109.0.5414.120 (Official Build) (64-bit)
Assistive tech
Node	n/a	v16.17.0
npm/yarn	pnpm	7.25.0
Operating System	Windows	10.0.19045 Build 19045

[andy-hook]

@Kyzegs Can you provide details of your setup and configuration? seems like ReactDOM is not accessible in your environment.

[olivermrbl]

I have the same issue. Did you manage to resolve it @Kyzegs?

[zouhangwithsweet]

react-dom is commonjs module, should transform it to esm

[Eigilak]

Did you find a solution Oliver?

[zouhangwithsweet]

Yeah. It's easy to fix it. Just use esbuild or babel tranform react-dom to esm module.

for vite, you shoule transform react-dom to esm module:

vite.config.ts

optimizeDeps: {
    include: ['react-dom'],
},

for webpack, I think you shoule include react-dom into bable-loader? I donot good at using webpack

[Eigilak]

How should i fix this in Next JS?

[AnthonyChablov]

For me i was getting this error whenever i tried building my next.js app,

To fix it i applied the 'use client' directive on top of the file that was causing the error in the import trace for the requested module.

After i did that it all worked I think this is probably due to next.js running client side code on the server side during the build process.

I hope this helps

[yaolifeng0629]

@Eigilak I meet the same issues, Have you solved it?

[AnthonyChablov]

For me i was getting this error whenever i tried building my next.js app,

To fix it i applied the 'use client' directive on top of the file that was causing the error in the import trace for the requested module.

After i did that it all worked I think this is probably due to next.js running client side code on the server side during the build process.

I hope this helps

[yaolifeng0629]

@AnthonyChablov Thank you ideas, I'll try it later