You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

Next.js 14.0.3+App Router执行npm run build遇模块缺失错误求助

Next.js 14.0.3 + MUI App Router 编译失败:找不到@popperjs/core的modifiers/index.js

错误现象

执行npm run build时出现以下编译错误:

npm run build

   ▲ Next.js 14.0.3

Failed to compile.

./node_modules/@popperjs/core/lib/index.js
Module not found: Can't resolve './modifiers/index.js'

Import trace for requested module:
./node_modules/@mui/base/Popper/Popper.js
./node_modules/@mui/base/Popper/index.js
./node_modules/@mui/base/index.js
./node_modules/@mui/material/node/Modal/Modal.js
./node_modules/@mui/material/node/Modal/index.js
__barrel_optimize__?names=Box,Modal,TextField!=!./node_modules/@mui/material/index.js
./app/user/signin/signin-form.tsx

./node_modules/@popperjs/core/lib/popper.js
Module not found: Can't resolve './modifiers/index.js'

Import trace for requested module:
./node_modules/@popperjs/core/lib/index.js
./node_modules/@mui/base/Popper/Popper.js
./node_modules/@mui/base/Popper/index.js
./node_modules/@mui/base/index.js
./node_modules/@mui/material/node/Modal/Modal.js
./node_modules/@mui/material/node/Modal/index.js
__barrel_optimize__?names=Box,Modal,TextField!=!./node_modules/@mui/material/index.js
./app/user/signin/signin-form.tsx


> Build failed because of webpack errors

主要原因

  1. 依赖安装不完整或缓存异常:node_modules中的@popperjs/core模块缺失modifiers/index.js文件,可能是安装过程中断、缓存未正常更新导致文件未写入。
  2. 版本不兼容:当前安装的@popperjs/core版本与MUI(尤其是@mui/base)依赖的版本不匹配,新版本文件结构变化导致MUI的导入路径失效。

解决方案

方案1:清理缓存并重新安装依赖

  • 删除本地依赖目录和锁文件:
    # Linux/macOS
    rm -rf node_modules package-lock.json
    # Windows
    rmdir /s /q node_modules && del package-lock.json
    
  • 清除npm缓存:
    npm cache clean --force
    
  • 重新安装依赖:
    npm install
    

方案2:锁定兼容的@popperjs/core版本

MUI v5系列适配@popperjs/core@^2.11.8版本,直接安装指定版本:

npm install @popperjs/core@2.11.8 --save

方案3:调整Next.js的webpack配置(前两种方案无效时尝试)

在项目根目录的next.config.js中添加webpack解析配置,强制指定@popperjs/core的导入路径:

/** @type {import('next').NextConfig} */
const nextConfig = {
  webpack: (config) => {
    config.resolve.alias['@popperjs/core'] = require.resolve('@popperjs/core/lib/index.js');
    return config;
  },
};

module.exports = nextConfig;

内容的提问来源于stack exchange,提问作者tomo-redx

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.06 03:11:20