setting up redux toolkit with Next 14.0.1 #3842
Description
Below are my pakages
- "@reduxjs/toolkit": "^1.9.7",
- "next": "14.0.1",
- "react-redux": "^8.1.3",
The issue have been facing is settin up redux toolkit with the latest stable version of next just. when it compiles i get this error
and the logs
⚠ Fast Refresh had to perform a full reload due to a runtime error.
⨯ node_modules\react-redux\es\components\Provider.js (25:28) @ Provider
⨯ TypeError: (0 , _utils_useIsomorphicLayoutEffect__WEBPACK_IMPORTED_MODULE_3__.useIsomorphicLayoutEffect) is not a function
at stringify (<anonymous>)
null
⨯ node_modules\react-redux\es\components\Provider.js (25:28) @ Provider
⨯ TypeError: (0 , _utils_useIsomorphicLayoutEffect__WEBPACK_IMPORTED_MODULE_3__.useIsomorphicLayoutEffect) is not a function
at stringify (<anonymous>)
digest: "3258720864"
null
below is the setup for redux toolkit in my layout.tsx
type ReduxProviderProps = {
children: React.ReactNode;
};
function ReduxProvider({ children }: ReduxProviderProps) {
return <Provider store={store}>{children}</Provider>;
}
export default function RootLayout({
children,
}: {
children: React.ReactNode;
}) {
return (
<html lang="en">
<ReduxProvider>
<body className={inter.className}>
{children}
</body>
</ReduxProvider>
</html>
);
}As you can see above to the best of my knowledge, everything has been setup correctly and i've been through every resource i could find on the internet to put this all together.
Now alternative if i take out the ReduxProvider and put in a separate file to then import into the layout.tsx
type ReduxProviderProps = {
children: React.ReactNode;
};
function ReduxProvider({ children }: ReduxProviderProps) {
return <Provider store={store}>{children}</Provider>;
}i get the following error
and this are the logs
⨯ ./store/ReduxProvider.ts
Error:
× Expected '>', got 'store'
╭─[C:\Users\cross\Desktop\savvyshopper\store\ReduxProvider.ts:8:1]
8 │ };
9 │
10 │ function ReduxProvider({ children }: ReduxProviderProps) {
11 │ return <Provider store={store}>{children}</Provider>;
· ─────
12 │ }
╰────
and on the browser when it compiles i get
None of this really makes any sense to me.Thanks appreciate the help