Next.js 12升级至14后本地运行出现大量导入错误求助

问题概述 #

将Next.js项目从12版本升级至14版本后，本地运行时出现大量React导入错误，包括React默认导出不存在、Hook导出失败、第三方依赖react-transition-group导入API失败等，同时浏览器控制台抛出exports is not defined错误。尝试删除node_modules和package-lock.json重新安装依赖后问题仍未解决。

部分错误示例 #

Import trace for requested module:
./components/Header/Header.tsx

./components/Header/Header.tsx
Attempted import error: 'react' does not contain a default export (imported as 'React').

./components/Nav/Nav.tsx
Attempted import error: 'useState' is not exported from 'react' (imported as 'useState').

./node_modules/react-transition-group/esm/utils/ChildMapping.js
Attempted import error: 'cloneElement' is not exported from 'react' (imported as 'cloneElement').

浏览器控制台错误 #

react-refresh-runtime.development.js:531 Uncaught ReferenceError: exports is not defined
    at eval (react-refresh-runtime.development.js:531:9)
    at eval (react-refresh-runtime.development.js:543:7)
    at (:3000/app-pages-browser)/node_modules/next/dist/compiled/react-refresh/cjs/react-refresh-runtime.development.js (http://localhost:3000/_next/static/chunks/main-app.js?v=1706986671318:127:1)
    at options.factory (webpack.js?v=1706986671318:722:31)
    at __webpack_require__ (webpack.js?v=1706986671318:37:33)

当前配置文件 #

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "types": [
      "jest",
      "node"
    ],
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": [
        "./src/*"
      ]
    },
    "moduleResolution": "node",
    "module": "esnext"
  },
  "include": [
    "next-env.d.ts",
    "**/*.ts",
    "**/*.tsx",
    ".next/types/**/*.ts"
  ],
  "exclude": [
    "node_modules"
  ]
}

next.config.cjs

/** @type {import('next').NextConfig} */
const nextConfig = {}

module.exports = nextConfig

package.json

{
  "name": "benedict-construction",
  "type": "module",
  "version": "0.1.0",
  "private": true,
  "test": "jest --watchAll=false",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "test": "jest"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "dependencies": {
    "@emotion/react": "^11.11.3",
    "@emotion/styled": "^11.11.0",
    "@mui/icons-material": "^5.15.6",
    "@mui/material": "^5.15.6",
    "@types/node": "20.5.4",
    "autoprefixer": "10.4.15",
    "next": "^14.1.0",
    "postcss": "8.4.28",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "tailwindcss": "3.3.3"
  },
  "devDependencies": {
    "@babel/preset-env": "^7.22.20",
    "@babel/preset-react": "^7.23.3",
    "@babel/preset-typescript": "^7.23.0",
    "@jest/globals": "^29.7.0",
    "@testing-library/dom": "^9.3.1",
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^14.0.0",
    "@testing-library/user-event": "^14.4.3",
    "@types/jest": "^29.5.5",
    "@types/react": "^18.2.48",
    "@types/react-dom": "^18.2.18",
    "@types/testing-library__jest-dom": "^6.0.0",
    "add": "^2.0.6",
    "babel-jest": "^29.7.0",
    "encoding": "^0.1.13",
    "eslint": "^8.50.0",
    "eslint-config-next": "^14.1.0",
    "eslint-config-react-app": "^7.0.1",
    "eslint-plugin-material-ui": "^1.0.1",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
    "ts-jest": "^29.1.1",
    "ts-node": "^10.9.1",
    "typescript": "^5.2.2"
  }
}

解决方案 #

1. 移除package.json中的"type": "module" #

Next.js当前默认使用CommonJS模块系统，添加"type": "module"会导致模块解析冲突，直接引发exports is not defined错误。操作步骤：

• 打开package.json，删除"type": "module"这一行。

2. 修复React导入语法 #

React 17+无需默认导入React即可编写JSX，且新版React以命名导出为主，默认导出仅为兼容旧代码。操作步骤：

• 将组件中的默认导入替换为按需命名导入：

  // 替换前
  import React from 'react';
  // 替换后（按需导入所需API）
  import { useState, useEffect } from 'react';
  // 若需要React类型（如TS Props定义）
  import type { ReactNode } from 'react';
  

• 若项目中大量使用旧导入语法，可开启Next.js自动React导入（Next.js 13+默认启用，无需额外配置）。

3. 升级react-transition-group到兼容版本 #

错误显示旧版本react-transition-group无法适配React 18的导出方式，需升级至兼容版本：

npm install react-transition-group@latest
# 或使用yarn
yarn add react-transition-group@latest

4. 更新tsconfig.json的模块解析配置 #

Next.js 14推荐使用bundler模块解析策略，替换旧的node策略，同时升级目标JS版本：

{
  "compilerOptions": {
    // ...其他配置
    "target": "ES2020", // 替换原es5
    "moduleResolution": "bundler", // 替换原node
    // ...其他配置
  }
}

5. 彻底清理缓存并重新安装依赖 #

# 删除依赖文件夹和锁文件
rm -rf node_modules package-lock.json
# 删除Next.js缓存
rm -rf .next
# 重新安装依赖
npm install

完成以上步骤后，运行npm run dev即可验证错误是否解决。

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