Next.js迁移项目时.js文件报loader未配置错误的原因

错误根源 #

你的ButtonChip.js文件里包含JSX代码（比如<div>这类标签），但Next.js默认的webpack配置中，仅会对.jsx/.tsx后缀的文件处理JSX语法，.js文件会被当作普通JavaScript文件对待，不会经过babel转译JSX，导致webpack无法识别这种非标准的JS语法，从而抛出缺少合适loader的错误。

为什么.js文件会触发问题？ #

Next.js的默认规则是：.js文件被视为普通JS文件，不解析其中的JSX；只有.jsx/.tsx后缀的文件才会被识别为React组件文件，自动启用JSX转译的loader。你把带JSX的代码放在.js文件里，自然就触发了解析失败。

解决办法 #

有两种可行方案：

• 方案一（推荐）：直接将ButtonChip.js重命名为ButtonChip.jsx，符合Next.js的文件约定，无需修改配置即可正常解析。
• 方案二：修改next.config.js的webpack配置，让.js文件也能处理JSX：

  module.exports = {
    images: {
      domains: ['www.amlakbashi.com'],
    },
  
    webpack(config) {
      // 保留原有的SVG处理规则
      config.module.rules.push({
        test: /\.svg$/i,
        issuer: /\.[jt]sx?$/,
        use: ['@svgr/webpack'],
      });
  
      // 修改babel-loader规则，让.js文件也能解析JSX
      config.module.rules.forEach(rule => {
        if (rule.test.toString().includes('jsx|tsx')) {
          rule.test = /\.[jt]sx?$/; // 匹配.js/.jsx/.ts/.tsx所有文件
        }
      });
  
      return config;
    }
  }
  

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