使用Webpack加载GraphQL查询时遇'export'语法错误（ejected CRA项目）

这个错误的核心原因是你的 .graphql/.gql 文件里混了 JS 的 export 语法，或者旧 CRA 的 webpack 配置和新版 graphql-tag/loader 不兼容，具体解决方法分几种：

• 清理 .graphql 文件内容
  确保你的 .graphql/.gql 文件里只有纯 GraphQL 代码，不能写任何 JS 语法。比如把原来带 export 的写法：

  export const UserFragment = gql`
    fragment UserFragment on User {
      id
      name
    }
  `
  

  改成纯 GraphQL 片段：

  fragment UserFragment on User {
    id
    name
  }
  

  然后在 JS 文件里直接导入使用：

  import UserFragment from './UserFragment.graphql'
  

• 调整 webpack 规则顺序
  旧 CRA 的 webpack 配置里，处理 JS/JSX 的规则可能排在前面，导致 .graphql 文件被错误地当成 JS 处理。把你加的 graphql 规则移到所有 JS 处理规则的前面，确保先被 graphql-tag/loader 解析。

• 降级 graphql-tag/loader 版本
  五年前的 CRA 依赖版本比较旧，最新的 graphql-tag/loader 可能存在兼容性问题。试试降级到和项目 graphql 版本匹配的 loader 版本，比如如果你的项目用的是 graphql@14.x，就安装 graphql-tag/loader@2.0.4 这类旧版本。

• 放弃单独的 .graphql 文件（临时方案）
  如果不想折腾配置，直接在 JS 文件里用 gql 模板字符串写片段，比如：

  import gql from 'graphql-tag'
  
  const UserFragment = gql`
    fragment UserFragment on User {
      id
      name
    }
  `
  

  这样不需要配置任何 loader 也能正常运行。

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