导入ReactFlow v11时出现"Module parse failed: Unexpected token"错误

问题原因 #

ReactFlow v11使用了ES2020+语法（可选链?.、空值合并运算符??），但你的构建工具（如Webpack、Create React App）默认不对node_modules里的包进行转译，导致这些语法无法被解析。而v10版本的react-flow-renderer可能使用了更兼容的语法或预编译更彻底，因此没有出现该问题。

解决方案 #

1. Webpack项目配置babel-loader转译@reactflow包 #

修改Webpack配置，让babel-loader对@reactflow相关包进行转译：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        // 排除node_modules但例外@reactflow包
        exclude: /node_modules(?!\/@reactflow)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react']
          }
        }
      }
    ]
  }
};

2. Create React App（CRA）项目处理方案 #

CRA默认不允许直接修改Webpack配置，需借助craco工具覆盖配置：

• 安装craco：

  npm install @craco/craco --save-dev
  

• 在项目根目录创建craco.config.js：

  module.exports = {
    webpack: {
      configure: (webpackConfig) => {
        // 找到babel-loader规则，更新exclude规则
        const babelRules = webpackConfig.module.rules
          .find(rule => rule.oneOf)
          .oneOf
          .filter(rule => rule.loader?.includes('babel-loader'));
        
        babelRules.forEach(rule => {
          rule.exclude = /node_modules(?!\/@reactflow)/;
        });
        
        return webpackConfig;
      }
    }
  };
  

• 修改package.json中的scripts命令：

  "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test"
  }
  

3. 确保Babel配置支持ES2020+语法 #

安装必要的Babel插件：

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

在babel.config.json或.babelrc中添加插件配置：

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": [
    "@babel/plugin-proposal-optional-chaining",
    "@babel/plugin-proposal-nullish-coalescing-operator"
  ]
}

备注 #

这并非ReactFlow的bug，而是构建工具的转译配置问题。完成上述配置后，重新启动项目即可正常导入ReactFlow的组件和API。

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