Issues in @reduxjs/toolkit

[emyot]

What version of Remix are you using?

2.2.0

Are all your remix dependencies & dev-dependencies using the same version?

• [X] Yes

Steps to Reproduce

index.ts file in the store directory

// import { configureStore, combineReducers } from "@reduxjs/toolkit";

import pkg from "@reduxjs/toolkit"; const { configureStore, combineReducers } = pkg;

import skillNumArrSlice from "./skill-slice"; import workExpSlice from "./workExp-slice"; import certificateSlice from "./certificate-slice"; import eductBGSlice from "./eductBG-slice"; import parentInfoSlice from "./parentInfo-slice"; import charRefSlice from "./charReference-slice"; import basicInfoLanguageSlice from "./basicInfo-Language-slice";

const allReducers = combineReducers({ workExp: workExpSlice.reducer, certificate: certificateSlice.reducer, eductBG: eductBGSlice.reducer, parentInfo: parentInfoSlice.reducer, charRef: charRefSlice.reducer, skillNumArr: skillNumArrSlice.reducer, basicInfoLangStateArr: basicInfoLanguageSlice.reducer, });

export type RootState = ReturnType<typeof allReducers>;

const store = configureStore({ reducer: { workExp: workExpSlice.reducer, certificate: certificateSlice.reducer, eductBG: eductBGSlice.reducer, parentInfo: parentInfoSlice.reducer, charRef: charRefSlice.reducer, skillNumArr: skillNumArrSlice.reducer, basicInfoLangStateArr: basicInfoLanguageSlice.reducer, }, });

export default store;

root.tsx route file in app directory import { cssBundleHref } from "@remix-run/css-bundle"; import type { LinksFunction } from "@remix-run/node"; import { Links, LiveReload, Meta, Outlet, Scripts, ScrollRestoration, } from "@remix-run/react";

import { Provider } from "react-redux";

import store from "./store";

export const links: LinksFunction = () => [ ...(cssBundleHref ? [{ rel: "stylesheet", href: cssBundleHref }] : [ { rel: "stylesheet", href: "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css", }, ]), ];

interface Props { children: React.ReactNode; }

const Document = ({ children }: Props) => { return (

<meta charSet="utf-8" /> <Meta /> <Links /> {children} <ScrollRestoration /> <Scripts /> <LiveReload /> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-BBtl+eGJRgqQAUMxJ7pMwbEyER4l1g+O15P+16Ep7Q9Q+zqX6gSbd85u4mG4QzX+" crossOrigin="anonymous" > ); };

export default function App() { return ( <Document> <Provider store={store}> <Outlet /> </Provider> </Document> ); }

Expected Behavior

To run without errors.

Note: Don't have any problems in the pervious Remix version before 2.0

Actual Behavior

It's giving me this error:

C:\Users\admin\Documents\Remix-Projects\remix-v2-testapp>npm run dev

dev remix dev --manual

�💿 remix d

info building... X [ERROR] Build failed with 1 error:
app/store/index.ts:3:7: ERROR: No matching export in "node_modules/@reduxjs/toolkit/dist/redux-toolkit.esm.js" for import "default" [plugin css-bundle-plugin]

app/root.tsx:20:30:
  20 │ import { cssBundleHref } from "@remix-run/css-bundle";
     ╵

 This error came from the "onLoad" callback registered here:

   node_modules/@remix-run/dev/dist/compiler/plugins/cssBundlePlugin.js:35:12: 
     35 │       build.onLoad({
        ╵             ~~~~~~

   at setup (C:\Users\admin\Documents\Remix-Projects\remix-v2-testapp\node_modules\@remix-run\dev\dist\compiler\plugins\cssBundlePlugin.js:35:13)
   at handlePlugins (C:\Users\admin\Documents\Remix-Projects\remix-v2-testapp\node_modules\esbuild\lib\main.js:1279:21)    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

[emyot]

Ignore this report, I'm having this issues when using the esmodule but when I switched to vite I no longer have this problems at all.

[tbscode]

Had the same issue once, don't remember where I found the fix but this solved a similar error for me:

import * as toolkitRaw from "@reduxjs/toolkit";
const { configureStore } = toolkitRaw.default ?? toolkitRaw;