使用prismic.io的CRA React项目遇Module parse failed错误求助

DevOps 小满

2026-8-5

解决CRA集成Prismic.io时的模块解析错误

问题根源

你遇到的Unexpected token (115:23)错误，是因为新版@prismicio/react使用了ES2020的空值合并运算符（??），而你的Create React App（CRA）默认Babel配置不会转译node_modules目录下的依赖，导致Webpack无法解析该语法。

解决方案

方案1：降级Prismic依赖到兼容版本

直接安装适配旧版CRA的Prismic包版本，无需修改配置：

npm install @prismicio/react@^2.0.0 @prismicio/client@^6.0.0 @prismicio/helpers@^2.0.0

安装完成后重新启动项目即可。

方案2：修改CRA配置，让Babel转译Prismic依赖

如果不想降级，可以让Babel处理@prismicio/react的代码，有两种方式：

方式A：Eject项目（不可逆）

执行命令暴露CRA配置：

npm run eject

打开config/webpack.config.js，找到Babel-loader的规则块，修改include字段，将@prismicio/react加入转译范围：

{
  test: /\.(js|mjs|jsx|ts|tsx)$/,
  // 修改这里，添加Prismic包的路径
  include: [paths.appSrc, /node_modules\/@prismicio\/react/],
  loader: require.resolve('babel-loader'),
  // 其他配置保持不变
}

重新启动项目：

npm start

方式B：使用react-app-rewired（无需Eject）

安装依赖包：

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

在项目根目录创建config-overrides.js文件，写入以下内容：

const { override, addBabelInclude } = require('customize-cra');
module.exports = override(
  addBabelInclude([require.resolve('@prismicio/react')])
);

修改package.json中的scripts，替换为react-app-rewired：

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