title: Apollo - React (Typescript) Invariant Error when building production build
body: <p>I am creating a new react app with gatsby, typescript, and apollo (for graphql queries).</p>
  
  <p>When testing in dev, the app compiles and runs with no errors thrown.</p>
  
  <p>When I transpile the build, using 'gatsby build', it fails with an error.</p>
  
  <p>I don't understand why or where this is being triggered. It seems to be something to do with the way webpack is checking as it's building, but I don't know how to pinpoint the issue and there doesn't seem to be any material out there with a clear answer for me.</p>
  
  <p>It seems to be caused by the httplink module. The code that triggers the error when present in any .tsx file is:</p>
  
  <pre><code>import { HttpLink } from 'apollo-link-http'
  
  const link = new HttpLink({
    uri: 'http://localhost:3001/graphql'
  })
  </code></pre>
  
  <p><strong>The error shown is the following:</strong></p>
  
  <pre><code>error Building static HTML failed
  
  See our docs page on debugging HTML builds for help https://gatsby.dev/debug-html
  
    10 |     function InvariantError(message) {
    11 |         if (message === void 0) { message = genericMessage; }
  &gt; 12 |         var _this = _super.call(this, typeof message ===     "number"
       | ^
    13 |             ? genericMessage + ": " + message + " (see    https://github.com/apollographql/invariant-packages)"
    14 |             : message) || this;
    15 |         _this.framesToPop = 1;
  
  
    WebpackError: Invariant Violation: Invariant Violation: 1 (see https://github.com/apollographql/invariant-packages)
  
    - invariant.esm.js:12 new InvariantError
  [lib]/[apollo-link-http-common]/[ts-invariant]/lib/invariant.esm.js:12:1
  
    - bundle.esm.js:64 checkFetcher
  [lib]/[apollo-link-http-common]/lib/bundle.esm.js:64:52
  
    - bundle.esm.js:8 createHttpLink
  [lib]/[apollo-link-http]/lib/bundle.esm.js:8:17
  
    - bundle.esm.js:139 new HttpLink
  [lib]/[apollo-link-http]/lib/bundle.esm.js:139:1
  
    - Strategy.tsx:6 Module../src/components/Strategy.tsx
  lib/src/components/Strategy.tsx:6:14
  
    - bootstrap:19 __webpack_require__
  lib/webpack/bootstrap:19:1
  
  
    - bootstrap:19 __webpack_require__
  lib/webpack/bootstrap:19:1
  
    - sync-requires.js:10 Object../.cache/sync-requires.js
  lib/.cache/sync-requires.js:10:56
  
    - bootstrap:19 __webpack_require__
  lib/webpack/bootstrap:19:1
  
    - static-entry.js:9 Module../.cache/static-entry.js
  lib/.cache/static-entry.js:9:22
  
    - bootstrap:19 __webpack_require__
  lib/webpack/bootstrap:19:1
  
    - bootstrap:83
  lib/webpack/bootstrap:83:1
  
  
    - universalModuleDefinition:3 webpackUniversalModuleDefinition
  lib/webpack/universalModuleDefinition:3:1
  
    - universalModuleDefinition:10 Object.&lt;anonymous&gt;
  lib/webpack/universalModuleDefinition:10:2"
  </code></pre>
  
  <blockquote>
    <p>Is this typescript issue, gatsby issue, apollo issue, or a webpack issue? Or a combination?</p>
  </blockquote>
  
  <p>Thank you for any help you can give! I'm struggling with my understanding of all the pieces here.</p>
  
  <p>I understand that Invariant Violations are about an issue with the wrong types being referenced. Because this occurs in the module, I'm not sure if I'm doing something wrong, or if it's an issue inside the imported library. Maybe it's an issue that I'm forcing typescript checks on a basic javascript based library. I still didn't quite come to a conclusion on this.</p>
  
  <p>I tried adding the following config to gatsby-node.js to ignore the module checks (as suggested here: <a href="https://gatsby.dev/debug-html" rel="noreferrer">https://gatsby.dev/debug-html</a>), with no successful build, though the error did change, as it could not see the module.</p>
  
  <pre><code>  exports.onCreateWebpackConfig = ({ stage, loaders, actions }) =&gt; {
      if (stage === "build-html") {
        actions.setWebpackConfig({
          module: {
            rules: [
              {
                test: /apollo-link-http/,
                use: loaders.null(),
              },
            ],
          },
        })
      }
    }
  </code></pre>
  
  <p>To recap, this is the code designed to create the client object to enable queries to the graphql endpoint. When running 'gatsby build' the in variant error occurs (see above).</p>
  
  <pre><code>  import * as React from 'react'
    import { ApolloClient } from 'apollo-client'
    import { InMemoryCache } from 'apollo-cache-inmemory'
    import { HttpLink } from 'apollo-link-http'
  
    const cache = new InMemoryCache()
    const link = new HttpLink({
      uri: 'http://localhost:3001/graphql'
    })
  
    const client = new ApolloClient({
      cache,
      link
    })
  </code></pre>