引入graphql-js导致Vue Router报错，如何解决？

核心原因 #

这个SyntaxError本质是graphql-js的ESM模块与你的项目打包/运行环境不兼容导致的。从graphql@16.x开始，它变成了纯ESM包，如果你的项目是CommonJS主导，或者vue-router动态导入触发的代码分割过程中，打包工具（比如webpack、vite）没有正确处理ESM格式的依赖，就会解析失败抛出语法错误。

修复方案 #

1. 调整打包工具配置，正确处理graphql的ESM代码

• 如果用Webpack：
  在webpack.config.js中添加转译规则，让babel处理graphql模块：

  module.exports = {
    module: {
      rules: [
        {
          test: /\.m?js$/,
          include: /node_modules\/graphql/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['@babel/preset-env']
            }
          }
        }
      ]
    }
  }
  

• 如果用Vite：
  在vite.config.js中优化依赖预构建，确保graphql被正确处理：

  export default {
    optimizeDeps: {
      include: ['graphql']
    }
  }
  

2. 改用graphql的CommonJS入口导入

尝试直接导入graphql的CommonJS版本文件，绕过ESM解析问题：

import { parse } from 'graphql/index.js';

3. 降级graphql版本到15.x

如果上述配置调整无效，可以降级到同时支持ESM和CommonJS的graphql@15.x版本，执行命令：

npm install graphql@^15.8.0
# 或 yarn add graphql@^15.8.0

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