9.0.0-alpha.0: 'ERR_MODULE_NOT_FOUND' 'use-sync-external-store/with-selector' from react-redux/dist/react-redux.mjs within Vitest

[ryota-murakami]

What version of React, ReactDOM/React Native, Redux, and React Redux are you using?

• React: 18.2.0
• ReactDOM: 18.2.0
• Redux: 5.0.0-beta.0
• React Redux: 9.0.0-alpha.0
• Vitest: 0.34.0
• Node: 18.17.1

What is the current behavior?

react-redux@9.0.0-alpha.0 publish as a .mjs and import use-sync-external-store/with-selector' without .js` ext.
That doesn't satisfy Node.js's ESM convention so lead causing bellow error.

---

ryota.murakami@MacBook-Pro ~/l/vite-rtk-query (main)> yarn test
yarn run v1.22.19
$ vitest --run

 RUN  v0.34.2 /Users/ryota.murakami/laststance/vite-rtk-query

 ✓ src/hooks/useUpdateEffect.test.ts (1)
 ❯ src/App.test.tsx (0)

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Failed Suites 1 ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

 FAIL  src/App.test.tsx [ src/App.test.tsx ]
Error: Cannot find module '/Users/ryota.murakami/laststance/vite-rtk-query/node_modules/use-sync-external-store/with-selector' imported from /Users/ryota.murakami/laststance/vite-rtk-query/node_modules/react-redux/dist/react-redux.mjs
Did you mean to import use-sync-external-store/with-selector.js?
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
Serialized Error: { code: 'ERR_MODULE_NOT_FOUND' }
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯[1/1]⎯

What is the expected behavior?

Import modules following Node runtime rules about treat ESM and then disappier this error.

There is reproduction here.

https://github.com/laststance/vite-rtk-query

Installation

npx degit laststance/vite-rtk-query myapp

cd myapp
npm install --force
npm test

Which browser and OS are affected by this issue?

No response

Did this work in previous versions of React Redux?

• Yes

[markerikson]

Y'know, as soon as I saw the headline I knew what the issue was here.

We really need use-sync-external-store to include ESM files in order for this to work, don't we.

THANK YOU for reporting this! (I mean, I hate seeing more issues, but this is why we published an alpha.)

[ryota-murakami]

@markerikson I just thought that Vite prebuilds the dependency package as ESM, so this problem does not occur on the dev-server.

I thought that the ESM error that occurs in Jest would not occur because Vitest does the same thing, but it seems that is not the case.
If Vitest is working with Vite's dependency prebundle, it would be natural to be able to avoid this problem by setting vitest.config.ts.

Vite and Bun are the only effective tools for CJS/ESM compatibility, so it's worth learning more about them now.

[guillaumebrunerie]

For what it's worth, I'm having the same problem with webpack when simply starting the dev server. So I haven't been able to test react-redux 9 so far because my app doesn't build at all with it.

[EskiMojo14]

The changes in facebook/react#26230 seem to do the trick, but there's no sign of when that might be merged in.

For now, I'm having to use patch-package to add the changes myself (if you want to do this too, note that patch-package will exclude package.json by default, so needs that config to be overridden)

[markerikson]

Looks like changing the imports to be "use-sync-external-store/with-selector.js" works for now. Will do that and release alpha.2.

[ryota-murakami]

Nice!

[markerikson]

Fix is out in https://github.com/reduxjs/react-redux/releases/tag/v9.0.0-beta.0 - please let me know if there's any other issues!

[ryota-murakami]

@markerikson Thanks!