Next.js 13配置Redux时出现找不到'react'模块错误求助

1. 依赖问题（最常见） #

• 强制重装依赖：删除node_modules和锁文件，重新安装核心依赖

  rm -rf node_modules package-lock.json
  npm install react react-dom next @reduxjs/toolkit react-redux
  

• 检查版本兼容性：确保@reduxjs/toolkit和react-redux的版本与你的Next.js 13（pages目录）兼容，避免使用测试版依赖。

2. TS/JS配置错误 #

• 检查tsconfig.json（或jsconfig.json）的模块解析设置：
  确保compilerOptions包含以下配置，避免模块解析路径异常：

  {
    "compilerOptions": {
      "moduleResolution": "node",
      "target": "esnext",
      "jsx": "preserve",
      "baseUrl": ".",
      // 自定义paths中不要出现覆盖react的配置，比如禁止"react": ["xxx"]这类写法
    }
  }
  

3. 代码导入/结构问题 #

正确的_app.tsx示例： #

import type { AppProps } from 'next/app'
import { Provider } from 'react-redux'
import { store } from '../store'

export default function MyApp({ Component, pageProps }: AppProps) {
  return (
    <Provider store={store}>
      <Component {...pageProps} />
    </Provider>
  )
}

正确的store.ts示例： #

import { configureStore } from '@reduxjs/toolkit'
// 替换成你的业务reducer
import exampleReducer from './features/example/exampleSlice'

export const store = configureStore({
  reducer: {
    example: exampleReducer,
  },
})

export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch

• 检查是否有文件存在react导入拼写错误（比如import React from 'raect'），或在不必要的位置错误导入导致解析异常。

4. 其他排查点 #

• 确认项目确实未启用app目录，核心路由目录为pages。
• 如果错误截图指向具体文件，直接定位该文件的导入语句和依赖，检查是否有第三方库依赖react但未正确声明。

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