Next JS报错求助：ReactPlayer.jsx文件解析失败需配置loader

问题原因 #

Next.js 默认不会转译 node_modules 目录下的文件，而 react-player 的ES6版本代码包含未转译的JSX语法，导致webpack无法解析该文件。

解决方案 #

• 方法1：使用Next.js的transpilePackages配置（Next.js 13.1及以上版本）
  在项目根目录的next.config.js中添加配置，指定转译react-player包：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    transpilePackages: ['react-player'],
  }
  
  module.exports = nextConfig
  

• 方法2：自定义webpack配置（适用于旧版Next.js）
  若你的Next.js版本低于13.1，修改next.config.js，配置webpack对react-player目录下的文件进行转译：

  module.exports = {
    webpack: (config) => {
      config.module.rules.push({
        test: /\.(js|jsx)$/,
        include: /node_modules\/react-player/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['next/babel'],
          },
        },
      })
      return config
    },
  }
  

• 方法3：切换到react-player的UMD版本
  直接引入已转译完成的UMD版本，绕开ES6代码转译问题：

  import ReactPlayer from 'react-player/dist/react-player'
  

验证步骤 #

• 保存修改后的配置文件
• 重启Next.js开发服务器
• 重新运行项目，检查错误是否消失

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