Next.js组件抽离公共项目后编译失败，求Webpack正确配置

问题根源 #

你通过package.json引入本地commons-project后，Next.js默认Webpack配置仅处理node_modules内的包，不会编译外部本地项目的JSX语法，导致出现"Unexpected token"解析错误。另外，你创建的独立webpack.config.js对Next.js无效——Next.js不读取该文件，必须通过next.config.js扩展其内置Webpack配置。

修复步骤 #

1. 配置next.config.js扩展Webpack规则 #

在主项目根目录创建/修改next.config.js，指定Babel处理commons-project的文件：

const path = require('path');

module.exports = {
  webpack: (config) => {
    // 添加规则，让babel-loader编译本地commons-project的JS/JSX文件
    config.module.rules.push({
      test: /\.(js|jsx)$/,
      include: path.resolve(__dirname, '../commons-project'),
      use: ['babel-loader'],
    });
    return config;
  },
};

2. 给commons-project配置Babel #

在commons-project根目录创建.babelrc文件，使用Next.js兼容的预设：

{
  "presets": ["next/babel"]
}

3. 安装必要依赖 #

确保主项目或commons-project安装了Babel相关依赖：

npm install --save-dev @babel/core babel-loader next/babel

额外提示 #

• 保持主项目与commons-project的Material-UI等依赖版本一致，避免版本冲突。
• 若commons-project包含CSS、图片等其他资源，需在next.config.js中添加对应Webpack规则处理。

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