-
-
Notifications
You must be signed in to change notification settings - Fork 1.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Cannot import redux-toolkit from a Node.js ESM module #1960
Comments
Yes, we do not currently ship our package in a fully Node-ESM compatible way. (Frankly this entire situation has been incredibly confusing for me every time I try to do research on it.) I've been advised that making any changes to our setup along those lines, such as adding an See #958 for some related notes. |
I am also really confused about ES modules in Node.js, and every time I attempt the migration I give up at some point out of frustration. I was not aware that adding an As an intermediate solution I can only imagine generating an |
I found a workaround that works in both backend and frontend: import * as toolkitRaw from '@reduxjs/toolkit';
const { createSlice } = toolkitRaw.default ?? toolkitRaw; or in Typescript: import * as toolkitRaw from '@reduxjs/toolkit';
const { createSlice } = ((toolkitRaw as any).default ?? toolkitRaw) as typeof toolkitRaw; |
Just FYI - all the examples on the Redux Toolkit site uses ESM imports - might be why some are confused here! e.g. https://redux-toolkit.js.org/api/createReducer |
@toychicken Yes, because ESM syntax has been pretty standard for writing client-side code for several years now. The Node situation is unfortunate, but not a reason to skip showing ESM imports in examples. |
Hello, just wonder if the PR associated with this issue will be included in the next minor / patch realease of redux toolkit ? |
If you're testing ES6 code referencing Redux in a transpiled build environment and have installed the new JSX Transform, you can save yourself a lot of trouble by putting your tests into JSX files. Explanation here. For the record, I'm aware of how dumb that sounds. 🤷♂️ |
As a follow-up: after some additional discussion, @karmaniverous and I concluded that what's actually going on is that Mocha in that template repo was configured to auto-register Babel, and a full set of Babel transforms is being run on any |
thank you, i got the same error, and this worked for me, i solved my problem.👍 |
If that can be helpful, I've managed to get Redux Toolkit imported properly when running in Mocha through a little patching with
Note that the project it runs in has In case it helps anyone, this is the
If you're looking to patch the library further (for ex. to remove the |
that sounds odd - we definitely ship an ESM file in the |
Our team uses gen-esm-wrapper to create another
|
Or if we want to let |
@markerikson From what I understood of the start of the thread, Node seems to rely on the "exports" field to pick the files to import. I'm not sure if the "module" field is something it understands or if it's just used by bundlers.
|
Right, I'm just saying that |
Oh right, apologies for the hasty shortcut there, I'll edit my message to not mislead 😊
|
This gets even more confusing with RTK Query. I have a similar situation where I use RTK on both backend and frontend. When using ESM, TypeScript can't locate declaration files for RTK Query so in the end I ended up doing:
I had to build createApi myself because if I didn't all RTK Query types would fail to infer. Also I still get webpack warnings so I had to ignore those explicitly in my webpack config as well. Hopefully RTK 2.0 comes and saves me from this madness 😄 |
Dropping a key link in here about how to improve package publishing: https://github.com/frehner/modern-guide-to-packaging-js-library |
Here's another resource for improving packaging: https://kit.svelte.dev/faq#packages And a linter that you can use: https://publint.bjornlu.com/@reduxjs/toolkit@1.8.6 |
Thanks a lot @akselikap, your example saved me ! 😅 Since I'm not using TypeScript, the code I ended up with is a little bit simpler : import * as rtkQuery from '@reduxjs/toolkit/dist/query/react/index.js';
const { createApi, fetchBaseQuery } = rtkQuery.default ?? rtkQuery; Note that I import from |
Hiya, folks. For the record, I am finally trying to get started working on proper ESM support for RTK. Aaaaand I hate everything about this :) |
In my case even this approach doesn't work, there are more workarounds? |
@SebastianGaud : like I said, I'm working on this right now :) |
This should now be available in https://github.com/reduxjs/redux-toolkit/releases/tag/v2.0.0-alpha.1 . Please try that out and let us know if it works! |
FYI folks, I've published https://github.com/reduxjs/redux-toolkit/releases/tag/v2.0.0-alpha.4 , which does further improvements to the ESM/CJS package formatting. I've also built up a whole suite of example apps using different build tools (CRA4/5, Next, Vite) and other test projects (Node in ESM and CJS mode, and the I feel fairly good about the ESM/CJS packaging at this point. Please try out that alpha and give us feedback! |
It's passing publint! https://publint.dev/@reduxjs/toolkit@2.0.0-alpha.4 |
I'm going to go ahead and call it done at this point, as of alpha.4. If anyone does run into further problems, please file a new issue! |
[1]upgraded to svelte 4 [2]updated other deps [3]compatible with redux/toolkit cjs([issue](reduxjs/redux-toolkit#1960))
what worked for me was:
|
@roggc : did you try out our RTK 2.0 betas? They should specifically address this issue. |
Hey @markerikson, thanks for letting me know. I am the author of react-context-slices, a library to manage global shared state in React that seamlessly integrates both Redux and React Context with zero-boilerplate. Recently I developed a solution (a setup) of RSC+SSR (React Server Components + Server Side Rendering) from scratch after reading this guide from Dan Abramov. Dan ended this guide by proposing challenges to people, being the last of them to incorporate RCC (React Client Components) to the solution. In this implementation of my own I used react-context-slices too, and that's where the problem appeared. As I said I used the mentioned workaround. I suppose I am not sure of using a beta now yet. When it becomes released I will update the library. Thanks again! |
@markerikson Is the issue resolved in the latest release? I'm trying to use the Redux Toolkit in an Inertia.js SSR app but getting errors when running the SSR script.
Following is my import { configureStore } from '@reduxjs/toolkit';
export const store = configureStore({
reducer: {
// slices added here...
},
devTools: import.meta.env.DEV,
}); |
@azzazkhan did you see Marks last message and try the 2.0 betas? |
I can confirm that upgrading to the 2.0.0-2 beta resolves this issue for sveltekit builds. Great fix, thank y'all. No configuration options are necessary |
There's a confusion in ESM and CJS, let's try to fix them by using namespace imports for uuid and `default` wrapper removal for `adapter` (as suggested here: reduxjs/redux-toolkit#1960)
There's a confusion in ESM and CJS, let's try to fix them by using namespace imports for uuid and `default` wrapper removal for `adapter` (as suggested here: reduxjs/redux-toolkit#1960)
There's a confusion in ESM and CJS, let's try to fix them by using namespace imports for uuid and `default` wrapper removal for `adapter` (as suggested here: reduxjs/redux-toolkit#1960)
There's a confusion in ESM and CJS, let's try to fix them by using namespace imports for uuid and `default` wrapper removal for `adapter` (as suggested here: reduxjs/redux-toolkit#1960)
There's a confusion in ESM and CJS, let's try to fix them by using namespace imports for uuid and `default` wrapper removal for `adapter` (as suggested here: reduxjs/redux-toolkit#1960)
There's a confusion in ESM and CJS, let's try to fix them by using `default` wrapper removal for `adapter` (as suggested here: reduxjs/redux-toolkit#1960)
There's a confusion in ESM and CJS, let's try to fix them by using `default` wrapper removal for `adapter` (as suggested here: reduxjs/redux-toolkit#1960)
I have a bit of an unusual setup where I use redux-toolkit also in the backend of a Node.js application. I am currently in the process of migrating my backend to ESM modules, since some dependencies (in particular node-fetch) are starting to ship only ESM modules.
Error description
When I try to import redux-toolkit in an mjs module using
import { createSlice } from '@reduxjs/toolkit';
, I am receiving the following error:The workaround suggested in the error message does work for Node.js mjs files. The problem is that the code where I use redux-toolkit is shared by the backend (running on Node.js) and the frontend (compiled using webpack). With the workaround in place, webpack can now not compile the file anymore and gives the following error:
Reason for the error
redux-toolkit is bundled in several different formats, among them
cjs
andesm
. The bundles are referenced inpackage.json
in the following way (index.js
being a wrapper that includes thecjs
bundle):While the
module
property is probably supported by webpack and other bundlers, it does not seem to be supported by Node.js. Instead, Node.js uses theexports
property to support different main files for different environments (see here. Since that is not defined in this case, Node.js requires the file from themain
property, which is a CommonJS bundle.Even forcing Node.js to use the ESM bundle by doing
import { createSlice } from '@reduxjs/toolkit/dist/redux-toolkit.esm.js';
does not solve the problem. The problem is that Node.js interprets files as CommonJS unless they have a.jsm
file extension or"type": "module"
is defined inpackage.json
(which then applies to all files in the package) (see here).Node.js does support importing CommonJS packages in most cases, but in the case of redux-toolkit for some reason it doesn’t work. I am not sure why, but none of my other dependencies had this problem.
Possible solution
Setting
"type": "module"
is probably not an option, since that will break the CommonJS files.The only solution that I can think of is to ship the ESM bundle as an
.mjs
file, either by renaming the current one or by creating a copy. The file can then be referenced inpackage.json
like this:This solution does not solve the problem completely, as redux-toolkit uses immer, which has a similar problem. I have reported that as immerjs/immer#901.
Workaround
Use the import like this:
or in Typescript:
The text was updated successfully, but these errors were encountered: