React项目执行npm start时plyr.min.js编译失败如何解决？

DevOps 小满

2026-7-20

解决React项目npm start编译失败（plyr.min.js Unexpected token）问题

错误原因

报错中的??是空值合并运算符，你的Babel配置未启用该语法支持，且默认babel-loader不会转译node_modules目录下的文件，导致Plyr库中的未转译语法无法被Webpack解析。

解决方案

方案1：配置Babel支持空值合并运算符并转译Plyr模块

安装Babel插件

npm install @babel/plugin-proposal-nullish-coalescing-operator --save-dev

修改Babel配置文件（.babelrc或babel.config.json）

{
  "presets": ["react-app"],
  "plugins": ["@babel/plugin-proposal-nullish-coalescing-operator"]
}

修改Webpack配置让babel-loader处理Plyr模块

若使用Create React App且未eject，推荐用react-app-rewired修改配置：

安装依赖：

npm install react-app-rewired customize-cra --save-dev

项目根目录创建config-overrides.js：

const { override, addBabelLoader } = require('customize-cra');

module.exports = override(
  addBabelLoader({
    test: /\.js$/,
    include: /node_modules\/plyr/,
    plugins: ['@babel/plugin-proposal-nullish-coalescing-operator']
  })
);

更新package.json的启动脚本：

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test"
}

若已eject项目，找到webpack.config.js中的babel-loader配置，添加Plyr到include列表：

{
  test: /\.(js|mjs|jsx|ts|tsx)$/,
  include: [
    paths.appSrc,
    path.resolve(__dirname, 'node_modules/plyr')
  ],
  loader: require.resolve('babel-loader'),
  options: {
    // 保留原有配置，添加插件
    plugins: ['@babel/plugin-proposal-nullish-coalescing-operator']
  }
}