Next.js 13引入@viral-loops/widgets后JSX编译错误求助

问题根源 #

@viral-loops/widgets包的代码未被编译成Next.js能直接解析的格式，导致Webpack无法处理其中的JSX语法。

推荐解决方案：使用Next.js自带的transpilePackages #

这是最简单的方式，无需手动配置Babel：

修改你的next.config.js，在顶层添加transpilePackages字段，指定需要转译的第三方包：

module.exports = {
  transpilePackages: ['@viral-loops/widgets'], // 新增此配置
  webpack(config, { isServer }) {
    // 保留原有的webpack配置内容
    const prefix = config.assetPrefix ?? config.basePath ?? '';
    config.module.rules.push(
      {
        test: /\.svg$/,
        use: ['@svgr/webpack', 'url-loader'],
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'url-loader',
          },
        ],
      },
      {
        test: /\.(mp4|webm|mov|ogg|swf|ogv)$/,
        use: [
          {
            loader: require.resolve('file-loader'),
            options: {
              publicPath: `${prefix}/_next/static/videos/`,
              outputPath: `${isServer ? '../' : ''}static/videos/`,
              name: '[name]-[hash].[ext]',
            },
          },
        ],
      },
    );
    return config;
  },
  // 保留其他原有配置项（images、sassOptions等）
};

这个配置会让Next.js自动把@viral-loops/widgets纳入自身的转译流程，自动处理JSX和ES6+语法，不需要额外配置Babel。

备选方案：手动配置Babel和Webpack #

如果上述方案无效，可以尝试手动配置：

1. 安装必要的Babel预设：

npm install @babel/preset-react --save-dev

2. 在项目根目录创建babel.config.js文件：

module.exports = {
  presets: [
    'next/babel', // 继承Next.js默认的Babel配置
    '@babel/preset-react'
  ]
};

3. 修改next.config.js中的Webpack规则，仅针对@viral-loops/widgets包使用babel-loader（避免和Next.js自带转译冲突）：

module.exports = {
  webpack(config, { isServer }) {
    const prefix = config.assetPrefix ?? config.basePath ?? '';
    // 新增转译@viral-loops/widgets的规则
    config.module.rules.push({
      test: /\.(js|jsx)$/,
      include: /node_modules\/@viral-loops\/widgets/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['next/babel', '@babel/preset-react']
        }
      }
    });
    // 保留原有的webpack规则
    config.module.rules.push(
      {
        test: /\.svg$/,
        use: ['@svgr/webpack', 'url-loader'],
      },
      {
        test: /\.(png|jpe?g|gif)$/i,
        use: [
          {
            loader: 'url-loader',
          },
        ],
      },
      {
        test: /\.(mp4|webm|mov|ogg|swf|ogv)$/,
        use: [
          {
            loader: require.resolve('file-loader'),
            options: {
              publicPath: `${prefix}/_next/static/videos/`,
              outputPath: `${isServer ? '../' : ''}static/videos/`,
              name: '[name]-[hash].[ext]',
            },
          },
        ],
      },
    );
    return config;
  },
  // 保留其他原有配置项
};

注意事项 #

• 不要全局配置babel-loader处理所有.js/.jsx文件，会和Next.js自带的转译逻辑冲突，导致更多错误。
• 优先使用transpilePackages，这是Next.js官方推荐的处理未转译第三方包的方式。

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