Next.js中使用Redux时出现import语句无法在模块外使用的错误

• 第一步：移除package.json中的"type": "module"配置
  Next.js自带模块兼容处理，手动设置这个会和框架的默认逻辑冲突，导致第三方库（比如react-redux）的ES模块加载异常。直接删掉这一行，恢复默认配置。

• 第二步：按Next.js规范配置Redux Provider

  • 如果你用的是App Router（Next.js 13+）：在根layout文件中添加'use client'指令（Redux属于客户端状态管理），然后用Provider包裹子组件：

    'use client';
    import { Provider } from 'react-redux';
    import { store } from '@/app/store'; // 你的store实际路径
    
    export default function RootLayout({ children }) {
      return (
        <html lang="zh-CN">
          <body>
            <Provider store={store}>{children}</Provider>
          </body>
        </html>
      );
    }
    

  • 如果你用的是Pages Router：在_app.js/_app.tsx中直接包裹Provider即可，无需额外指令：

    import { Provider } from 'react-redux';
    import { store } from '../store'; // 你的store实际路径
    
    export default function MyApp({ Component, pageProps }) {
      return (
        <Provider store={store}>
          <Component {...pageProps} />
        </Provider>
      );
    }
    

• 第三步：确保依赖版本兼容
  检查react-redux和@reduxjs/toolkit的版本是否适配你的Next.js版本，建议使用最新稳定版。可以重新安装依赖：

  npm uninstall react-redux @reduxjs/toolkit
  npm install react-redux @reduxjs/toolkit
  

• 第四步：清除缓存并重启服务
  缓存可能导致异常残留，执行以下命令清理后重启开发服务器：

  rm -rf .next node_modules package-lock.json
  npm install
  npm run dev
  

内容的提问来源于stack exchange，提问作者Dexter