<Provider/> react-redux import module error in Next.js

Question

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
    }
})

Answer 1

You should call the provider before AccountProvider so it will work properly