Next.js动态导入含CSS Modules的组件时模板字面量路径报错如何解决

该错误由Next.js 12版本的webpack内置CSS Modules解析规则触发：当使用模板字面量进行动态导入时，webpack的路径推断逻辑会误将项目本地~/assets目录下的CSS Modules文件判定为node_modules内的第三方文件，而Next.js默认禁止从node_modules导入CSS Modules，因此抛出报错。

方案1：调整next.config.js的CSS解析规则 #

修改next.config.js配置，覆盖默认的CSS Modules解析限制，允许项目根目录下的所有CSS Modules文件被正常解析，保留你原有的next-transpile-modules配置即可：

const path = require('path');
const withTM = require('next-transpile-modules')([]); // 保留你原有需要转译的模块列表

module.exports = withTM({
  webpack: (config) => {
    // 定位处理CSS Modules的规则组
    const cssRule = config.module.rules.find(rule => rule.oneOf?.some(item => item.test?.toString().includes('.module.css')));
    if (cssRule) {
      cssRule.oneOf.forEach(item => {
        // 匹配CSS Modules规则
        if (item.test?.toString().includes('.module.css')) {
          // 移除默认的node_modules排除限制，指定仅包含项目根目录
          item.include = [path.resolve(__dirname)];
          delete item.exclude;
        }
      })
    }
    // 配置别名保证路径解析正确
    config.resolve.alias['~'] = path.resolve(__dirname);
    return config;
  }
})

方案2：给动态导入添加明确的文件后缀 #

在模板字面量的动态导入路径中添加明确的js/jsx后缀，让webpack跳过不必要的文件类型匹配，避免路径误判：

const NewComponent = dynamic(() => import(`~/assets/${asset.name}.js`), {
  ssr: false,
});

方案3：升级Next.js版本 #

该路径推断bug在Next.js 12.1.0及后续版本已被官方修复，可直接升级依赖解决问题：

npm install next@^12.1.0 react@^17.0.2 react-dom@^17.0.2

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