引入express-graphql报错(0 , _expressGraphql2.default) is not a function如何解决？

报错触发原因 #

你安装的express-graphql@0.12.0版本已取消默认导出规则，改为仅支持命名导出graphqlHTTP。你当前的代码仍使用ES6默认导入语法，Babel转译ES6模块为CommonJS规范时，会把默认导入的内容挂载到转译后模块的default属性上，因此就出现了报错栈中的(0 , _expressGraphql2.default) is not a function提示——这段是Babel自动生成的转译代码，不会出现在你的本地业务源码中。

解决方案 #

1. 修正导入语法 #

将index.js中的express-graphql导入语句从默认导入改为解构命名导出：

// 修正前
import graphlHTTP from "express-graphql";
// 修正后
import { graphqlHTTP } from "express-graphql";

2. 修正路由注册代码 #

同步调整/graphql路由的调用逻辑，同时建议将app.get改为app.use适配GraphQL常用的POST请求：

// 修正前
app.get(
  '/graphql',
  graphlHTTP({
    schema: schema,
    graphiql: true
  })
);

// 修正后
app.use(
  '/graphql',
  graphqlHTTP({
    schema: schema,
    graphiql: true
  })
);

3. 清理冗余依赖（可选，推荐） #

你的package.json中同时存在已废弃的babel-cli@6和新版@babel/*系列工具，还存在-、save-dev这类无效依赖，容易引发额外兼容问题，可以执行以下命令卸载冗余项：

npm uninstall babel-cli babel-preset-env babel-preset-stage-0 - save-dev

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