<Provider/> react-redux import module error in Next.js
This is the error I get from next.js browser and terminal
SyntaxError: Cannot use import statement outside a module
import Provider from './components/Provider';
^^^^^^
SyntaxError: Cannot use import statement outside a module
at Object.compileFunction (node:vm:352:18)
at wrapSafe (node:internal/modules/cjs/loader:1031:15)
at Module._compile (node:internal/modules/cjs/loader:1065:27)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object.react-redux/es/exports (C:\Editor\lazy-docs-ai\.next\server\pages\index.js:835:18)
at __webpack_require__ (C:\Editor\lazy-docs-ai\.next\server\webpack-runtime.js:33:42)
at eval (webpack-internal:///./components/Login.tsx:12:80)
at Function.__webpack_require__.a (C:\Editor\lazy-docs-ai\.next\server\webpack-runtime.js:97:13)
at eval (webpack-internal:///./components/Login.tsx:1:21)
at Object../components/Login.tsx (C:\Editor\lazy-docs-ai\.next\server\pages\index.js:88:1)
at __webpack_require__ (C:\Editor\lazy-docs-ai\.next\server\webpack-runtime.js:33:42)
at eval (webpack-internal:///./pages/index.tsx:16:75)
at Function.__webpack_require__.a (C:\Editor\lazy-docs-ai\.next\server\webpack-runtime.js:97:13)
at eval (webpack-internal:///./pages/index.tsx:1:21)
at Object../pages/index.tsx (C:\Editor\lazy-docs-ai\.next\server\pages\index.js:330:1)
at __webpack_require__ (C:\Editor\lazy-docs-ai\.next\server\webpack-runtime.js:33:42)
at __webpack_exec__ (C:\Editor\lazy-docs-ai\.next\server\pages\index.js:900:39)
at C:\Editor\lazy-docs-ai\.next\server\pages\index.js:901:28
at Object.<anonymous> (C:\Editor\lazy-docs-ai\.next\server\pages\index.js:904:3)
at Module._compile (node:internal/modules/cjs/loader:1101:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1153:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object.requirePage (C:\Editor\lazy-docs-ai\node_modules\next\dist\server\require.js:88:12)
at C:\Editor\lazy-docs-ai\node_modules\next\dist\server\load-components.js:49:73
at async Object.loadComponentsImpl [as loadComponents] (C:\Editor\lazy-docs-ai\node_modules\next\dist\server\load-components.js:49:26)
at async DevServer.findPageComponentsImpl (C:\Editor\lazy-docs-ai\node_modules\next\dist\server\next-server.js:599:36) {
page: '/'
}
This is my code in pages/_app.tsx
import '../styles/globals.css'
import '../styles/header.css'
import '@material-tailwind/react'
import { AccountProvider } from '@/components/context/Account'
import { store } from '@/features/Authentication';
import { Provider } from 'react-redux'
import type { AppProps } from 'next/app'
function App({ Component, pageProps }: AppProps) {
return <>
<Provider store={store}>
<AccountProvider>
<Component {...pageProps} />
</AccountProvider>
</Provider>
</>
}
export default App
Even if I swap the two, this still gives the same error in their place.
import { configureStore, createSlice } from '@reduxjs/toolkit'
import { doc, setDoc } from 'firebase/firestore'
import { db } from '@/components/lib/firebase'
const datas: any[] = []
export const accountSlice = createSlice({
name:"account",
initialState:{ value: datas },
reducers:{
initialAccounts: (state,action) => {
if (action.payload == undefined) {
state.value = []
} else {
state.value = action.payload
}
},
...
}
})
export const {createAccount,deleteAccount,initialAccounts,updateStatus} = accountSlice.actions;
export const store = configureStore({
reducer: {
account:accountSlice.reducer
}
})