Apollo-client: Error with the graphql-anywhere package when compiling with TypeScript

Created on 22 Jan 2018  ·  11Comments  ·  Source: apollographql/apollo-client

Intended outcome:
Proper TypeScript compilation without any errors

Actual outcome:

The compiler throws the following error messages:

ERROR in /Users/robotics/github/ftc-tournament-frontend/node_modules/graphql-anywhere/src/graphql.ts
[tsl] ERROR in /Users/robotics/github/ftc-tournament-frontend/node_modules/graphql-anywhere/src/graphql.ts(2,3)
      TS2305: Module '"/Users/robotics/github/ftc-tournament-frontend/node_modules/graphql-anywhere/src/graphql"' has no exported member 'DocumentNode'.

ERROR in /Users/robotics/github/ftc-tournament-frontend/node_modules/graphql-anywhere/src/graphql.ts
[tsl] ERROR in /Users/robotics/github/ftc-tournament-frontend/node_modules/graphql-anywhere/src/graphql.ts(3,3)
      TS2305: Module '"/Users/robotics/github/ftc-tournament-frontend/node_modules/graphql-anywhere/src/graphql"' has no exported member 'SelectionSetNode'.

ERROR in /Users/robotics/github/ftc-tournament-frontend/node_modules/graphql-anywhere/src/graphql.ts
[tsl] ERROR in /Users/robotics/github/ftc-tournament-frontend/node_modules/graphql-anywhere/src/graphql.ts(4,3)
      TS2305: Module '"/Users/robotics/github/ftc-tournament-frontend/node_modules/graphql-anywhere/src/graphql"' has no exported member 'FieldNode'.

ERROR in /Users/robotics/github/ftc-tournament-frontend/node_modules/graphql-anywhere/src/graphql.ts
[tsl] ERROR in /Users/robotics/github/ftc-tournament-frontend/node_modules/graphql-anywhere/src/graphql.ts(5,3)
      TS2305: Module '"/Users/robotics/github/ftc-tournament-frontend/node_modules/graphql-anywhere/src/graphql"' has no exported member 'FragmentDefinitionNode'.

ERROR in /Users/robotics/github/ftc-tournament-frontend/node_modules/graphql-anywhere/src/graphql.ts
[tsl] ERROR in /Users/robotics/github/ftc-tournament-frontend/node_modules/graphql-anywhere/src/graphql.ts(6,3)
      TS2305: Module '"/Users/robotics/github/ftc-tournament-frontend/node_modules/graphql-anywhere/src/graphql"' has no exported member 'InlineFragmentNode'.

ERROR in /Users/robotics/github/ftc-tournament-frontend/node_modules/graphql-anywhere/src/graphql.ts
[tsl] ERROR in /Users/robotics/github/ftc-tournament-frontend/node_modules/graphql-anywhere/src/graphql.ts(148,42)
      TS2339: Property 'name' does not exist on type 'never'.

ERROR in /Users/robotics/github/ftc-tournament-frontend/node_modules/graphql-anywhere/src/graphql.ts
[tsl] ERROR in /Users/robotics/github/ftc-tournament-frontend/node_modules/graphql-anywhere/src/graphql.ts(151,58)
      TS2339: Property 'name' does not exist on type 'never'.

How to reproduce the issue:
Here is my tsconfig.json if that helps:

{
  "compilerOptions": {
    "module": "es6", 
    "target": "es6",
    "moduleResolution": "node",
    "rootDir": "./src",
    "outDir": "./dist/",
    "allowSyntheticDefaultImports": true,
    "experimentalDecorators": true,
    "sourceMap": true,
    "jsx": "react"
  },
  "exclude": [
    "node_modules"
  ]
}

Here is the are the package.json dependencies that I am using:

{
"devDependencies": {
    "@types/jquery": "^3.2.15",
    "@types/react": "^16.0.15",
    "@types/react-dom": "^16.0.2",
    "@types/react-redux": "^5.0.10",
    "@types/react-responsive": "^3.0.0",
    "@types/react-router": "^4.0.15",
    "@types/react-router-redux": "^5.0.8",
    "@types/redux": "^3.6.0",
    "@types/redux-thunk": "^2.1.0",
    "@types/route-parser": "^0.1.1",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-flow": "^6.23.0",
    "babel-preset-react": "^6.24.1",
    "copy-webpack-plugin": "^4.1.1",
    "css-loader": "^0.28.7",
    "dotenv": "^4.0.0",
    "extract-text-webpack-plugin": "^3.0.1",
    "gts": "^0.4.0",
    "html-webpack-plugin": "^2.30.1",
    "less": "^3.0.0-alpha.3",
    "less-loader": "^4.0.5",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "raw-loader": "^0.5.1",
    "react-hot-loader": "^3.1.1",
    "resolve-url-loader": "^2.1.1",
    "rimraf": "^2.6.2",
    "source-map-loader": "^0.2.2",
    "style-loader": "^0.19.0",
    "ts-loader": "^3.0.3",
    "typescript": "^2.6.2",
    "webpack": "^3.7.1",
    "webpack-dev-server": "^2.9.2",
    "whatwg-fetch": "^2.0.3"
  },
  "dependencies": {
    "apollo-cache-inmemory": "^1.1.5",
    "apollo-client": "^2.2.0",
    "apollo-link-http": "^1.3.2",
    "graphql": "^0.12.3",
    "graphql-anywhere": "^4.1.1",
    "graphql-tag": "^2.6.1",
    "history": "^4.7.2",
    "react": "^16.0.0",
    "react-apollo": "^2.0.4",
    "react-dom": "^16.0.0",
    "react-redux": "^5.0.6",
    "react-responsive": "^3.0.0",
    "react-router": "^4.2.0",
    "react-router-redux": "^5.0.0-alpha.8",
    "redux": "^3.7.2",
    "redux-thunk": "^2.2.0"
  }
}

Version

needs-reproduction
Source
picture kirkbrauer
👍2

Most helpful comment

I ran into this and after banging my head against my keyboard all morning realized it was occurring due to having resolve.modules in my webpack config set to [ './src', 'node_modules' ]. Changing it to [ path.resolve(__dirname, '../src'), 'node_modules' ], fixes the issue. Long story short, your webpack is resolving the graphql-anywhere/src/graphql.ts as the graphql package.

picture jtag05 on 13 Sep 2018
👍3

All 11 comments

After looking into it it seems that the issue is resulting from an incorrect import of the graphql dependency, but even after installing @types/graphql the issues persist.

kirkbrauer picture kirkbrauer on 22 Jan 2018

I got the same error, you should check your webpack config like this one 

module: {
    loaders: [
      {
        test: /\.(ts|tsx)$/,
        include: path.resolve('./src'),
        use: [
          {
            loader: require.resolve('ts-loader'),
            options: {
              // disable type checker - we will use it in fork plugin
              transpileOnly: true,
            },
          },
        ],
      },

from react-create-app-typescript

remithomas picture remithomas on 25 Jan 2018

I don't think this is a valid solution. You are just skipping the type checking, which is the core purpose of TypeScript.

brapifra picture brapifra on 15 Feb 2018
👍3

I'm getting this issue as well when trying to use apollot-boost with Stencil, this is the repository I started with: https://github.com/ionic-team/ionic-pwa-toolkit

My error is bundling: node_modules/apollo-link-state/lib/index.js, line: 13 'graphql' is not exported by node_modules/graphql-anywhere/lib/async.js

arjunyel picture arjunyel on 6 Apr 2018

Any update? It is happening to many apollo related packages. It look like relative paths are used in the wrong context or there are files missing.
Cannot find source file '../src/graphql.ts'
Cannot find source file '../src/index.ts'
I will provide more inf if needed

biels picture biels on 17 Jul 2018

If anyone can provide a small runnable reproduction that demonstrates this happening, that would be great. Thanks!

hwillson picture hwillson on 7 Aug 2018

We haven't heard back regarding a reproduction, so closing for now. Happy to re-open if anyone can provide a repro. Thanks!

hwillson picture hwillson on 5 Sep 2018

I ran into this and after banging my head against my keyboard all morning realized it was occurring due to having resolve.modules in my webpack config set to [ './src', 'node_modules' ]. Changing it to [ path.resolve(__dirname, '../src'), 'node_modules' ], fixes the issue. Long story short, your webpack is resolving the graphql-anywhere/src/graphql.ts as the graphql package.

jtag05 picture jtag05 on 13 Sep 2018
👍3

This may not be the problem others are facing, but I managed to reproduce with a fresh create-react-app app and by following the guide here: https://www.apollographql.com/docs/link/links/rest.html

Here is a repo: https://github.com/nihakue/apollo-rest-link-minimal-repro

nihakue picture nihakue on 27 Oct 2018
👍1

Related https://github.com/apollographql/apollo-link/pull/850

petetnt picture petetnt on 1 Nov 2018

@jtag05 's answer works fine :)

Need to change src as relative path to check src dir recursively.
https://webpack.js.org/configuration/resolve/#resolvemodules

kazuooooo picture kazuooooo on 18 Jul 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

stubailo picture stubailo  ·  3Comments
elie222 picture elie222  ·  3Comments
joergbaier picture joergbaier  ·  3Comments
omatrot picture omatrot  ·  3Comments
timbotnik picture timbotnik  ·  3Comments