graphql-compose throws 'Uncaught ReferenceError: require is not defined' #15633

barbalex · 2019-07-11T15:47:03Z

Description

I am trying to recover from #15249 and finally be able to update my gatsby version which has had to remain at v2.10.0, with terser version fixed by yarn resolutions.

So I updated gatsby to v2.13.14 and removed the yarn resolution, as #15249 should have been resolved a few versions ago.

Now I can run gastby develop sucessfully. But when I open the project in the browser the dev tools show this error:

graphqlVersion.mjs:3 Uncaught ReferenceError: require is not defined
    at getGraphqlVersion (graphqlVersion.mjs:3)
    at Module../node_modules/graphql-compose/mjs/utils/graphqlVersion.mjs (graphqlVersion.mjs:16)
    at __webpack_require__ (bootstrap:766)
    at fn (bootstrap:129)
    at Module../node_modules/graphql-compose/mjs/EnumTypeComposer.mjs (EnumTypeComposer.mjs:1)
    at __webpack_require__ (bootstrap:766)
    at fn (bootstrap:129)
    at Module../node_modules/graphql-compose/mjs/ObjectTypeComposer.mjs (ObjectTypeComposer.mjs:1)
    at __webpack_require__ (bootstrap:766)
    at fn (bootstrap:129)
    at Module../node_modules/graphql-compose/mjs/TypeMapper.mjs (TypeMapper.mjs:1)
    at __webpack_require__ (bootstrap:766)
    at fn (bootstrap:129)
    at Module../node_modules/graphql-compose/mjs/SchemaComposer.mjs (SchemaComposer.mjs:1)
    at __webpack_require__ (bootstrap:766)
    at fn (bootstrap:129)
    at Module../node_modules/graphql-compose/mjs/index.mjs (index.mjs:1)
    at __webpack_require__ (bootstrap:766)
    at fn (bootstrap:129)
    at Module.<anonymous> (DateFieldWithPickerFormik.js:25)
    at Module../src/components/shared/Files/File.js (File.js:81)
    at __webpack_require__ (bootstrap:766)
    at fn (bootstrap:129)
    at Module.<anonymous> (File.js:81)
    at Module../src/components/shared/Files/index.js (index.js:39)
    at __webpack_require__ (bootstrap:766)
    at fn (bootstrap:129)
    at Module.<anonymous> (updateErfkritById.js:5)
    at Module../src/components/Projekte/Daten/Idealbiotop/index.js (index.js:62)
    at __webpack_require__ (bootstrap:766)
    at fn (bootstrap:129)
    at Module.<anonymous> (updateZielberById.js:5)
    at Module../src/components/Projekte/Daten/index.js (index.js:53)
    at __webpack_require__ (bootstrap:766)
    at fn (bootstrap:129)
    at Module.<anonymous> (KarteOrNull.js:8)
    at Module../src/components/Projekte/ProjektContainer.js (ProjektContainer.js:70)
    at __webpack_require__ (bootstrap:766)
    at fn (bootstrap:129)
    at Module.<anonymous> (tpopById.js:3)
    at Module../src/components/Projekte/index.js (index.js:60)
    at __webpack_require__ (bootstrap:766)
    at fn (bootstrap:129)
    at Module.<anonymous> (404.js:83)
    at Module../src/pages/Daten.js (Daten.js:25)
    at __webpack_require__ (bootstrap:766)
    at fn (bootstrap:129)
    at Object.<anonymous> (sync-requires.js:12)
    at Object../.cache/sync-requires.js (sync-requires.js:4)
    at __webpack_require__ (bootstrap:766)

When I run yarn why graphql-compose I get:

[1/4] Why do we have the module "graphql-compose"...?
[2/4] Initialising dependency graph...
[3/4] Finding dependency...
[4/4] Calculating file sizes...
=> Found "graphql-compose@6.3.5"
info Reasons this module exists
   - "gatsby" depends on it
   - Hoisted from "gatsby#graphql-compose"
info Disk size without dependencies: "3.61MB"
info Disk size with unique dependencies: "3.7MB"
info Disk size with transitive dependencies: "3.7MB"
info Number of shared dependencies: 2

Environment

  System:
    OS: Windows 10
    CPU: (20) x64 Intel(R) Core(TM) i9-7900X CPU @ 3.30GHz
  Binaries:
    Node: 11.13.0 - C:\Users\alexa\AppData\Local\Temp\yarn--1562859960461-0.7984626940531945\node.CMD
    Yarn: 1.15.2 - C:\Users\alexa\AppData\Local\Temp\yarn--1562859960461-0.7984626940531945\yarn.CMD
    npm: 6.9.0 - C:\Program Files\nodejs\npm.CMD
  Languages:
    Python: 2.7.15 - C:\Python27\python.EXE
  Browsers:
    Edge: 44.17763.1.0
  npmPackages:
    gatsby: 2.13.14 => 2.13.14
    gatsby-image: 2.2.5 => 2.2.5
    gatsby-mdx: 0.6.3 => 0.6.3
    gatsby-plugin-create-client-paths: 2.1.2 => 2.1.2
    gatsby-plugin-eslint: 2.0.5 => 2.0.5
    gatsby-plugin-manifest: 2.2.2 => 2.2.2
    gatsby-plugin-offline: 2.2.2 => 2.2.2
    gatsby-plugin-react-helmet: 3.1.1 => 3.1.1
    gatsby-plugin-sharp: 2.2.4 => 2.2.4
    gatsby-plugin-styled-components: 3.1.1 => 3.1.1
    gatsby-plugin-typography: 2.3.1 => 2.3.1
    gatsby-plugin-web-font-loader: 1.0.4 => 1.0.4
    gatsby-remark-autolink-headers: 2.1.1 => 2.1.1
    gatsby-remark-embed-video: 1.7.1 => 1.7.1
    gatsby-remark-emojis: 0.3.2 => 0.3.2
    gatsby-remark-external-links: 0.0.4 => 0.0.4
    gatsby-remark-images: 3.1.4 => 3.1.4
    gatsby-remark-images-medium-zoom: 1.2.1 => 1.2.1
    gatsby-source-filesystem: 2.1.2 => 2.1.2
    gatsby-transformer-remark: 2.6.3 => 2.6.3
    gatsby-transformer-sharp: 2.2.2 => 2.2.2

The text was updated successfully, but these errors were encountered:

barbalex · 2019-07-11T15:58:59Z

Same error in v2.13.0, v2.12.1, v2.11.6, v2.11.0.

Works in v2.10.5 with terser pinned to v4.0.0 by resolutions.

So it seems v2.11.0 causes the problem: https://github.com/gatsbyjs/gatsby/compare/gatsby@2.10.5...gatsby@2.11.0.

As gatsby v2.10.5 includes the same version of graphql-compose as v2.13.14, namely 6.3.5, the change has probably happened in gatsby.

Could it be that a babel/webpack change prevents global require calls? That is what is done in the failing module: https://github.com/graphql-compose/graphql-compose/blob/master/src/utils/graphqlVersion.js

pieh · 2019-07-11T16:53:25Z

How is graphql-compose ending up in your webpack bundles?

barbalex · 2019-07-11T16:59:43Z

alex@pca:/mnt/c/Users/alexa/apf2/public$ yarn why graphql-compose
yarn why v1.12.3
[1/4] Why do we have the module "graphql-compose"...?
[2/4] Initialising dependency graph...
[3/4] Finding dependency...
[4/4] Calculating file sizes...
=> Found "graphql-compose@6.3.5"
info Reasons this module exists
   - "gatsby" depends on it
   - Hoisted from "gatsby#graphql-compose"
info Disk size without dependencies: "3.74MB"
info Disk size with unique dependencies: "3.83MB"
info Disk size with transitive dependencies: "3.83MB"
info Number of shared dependencies: 2
Done in 1.20s.

pieh · 2019-07-11T17:48:53Z

Yes, gatsby depend on it for schema creation - but not as runtime dependency (webpack shouldn't try to load it).

Looking at stack trace you pasted:

    at fn (bootstrap:129)
    at Module../node_modules/graphql-compose/mjs/index.mjs (index.mjs:1)
    at __webpack_require__ (bootstrap:766)
    at fn (bootstrap:129)
    at Module.<anonymous> (DateFieldWithPickerFormik.js:25)
    at Module../src/components/shared/Files/File.js (File.js:81)

It seems like somehow its being imported potentially in src/components/shared/Files/File.js ?

barbalex · 2019-07-11T18:38:16Z

I can't see how that code line should cause this: https://github.com/barbalex/apf2/blob/3a8f2de39792a4d785c44d9d47559f58b2c0de42/src/components/shared/Files/index.js#L81

barbalex · 2019-07-11T18:45:12Z

Ah, well, it is a graphql query...

barbalex · 2019-07-16T10:01:18Z

I am now getting this warning when updating gatsby-transformer-remark:

warn Plugin gatsby-transformer-remark is not compatible with your gatsby version 2.10.5 - It requires gatsby@^2.12.0

So would be glad if this issue could be adressed.

barbalex · 2019-07-16T12:25:40Z

I tried updating another gatsby project of mine. There this issue is not occuring (save for #15750)

barbalex · 2019-07-16T12:40:18Z

also bumping into issues with gatsby-source-filesystem: same as here #15680. So basically I am now blocked from updating most anything that has to do with gatsby :-(

barbalex · 2019-07-16T12:52:55Z

I just updated gatsby then

del yarn.lock && rmdir /s node_modules && yarn cache clean && yarn && yarn dev

and got the error again.

@pieh So basically you should be able to reproduce this by doing:

fork https://github.com/barbalex/apf2
update gatsby
run yarn && yarn dev
visit localhost:8000
see the error in dev tools

The project needs a local api server. But this error seems to occur before the project connects to the api so that does not prevent reproduction of the issue.

barbalex · 2019-07-16T13:12:53Z

I just tried to reproduce this on my MacBook pro (my normal dev machine is a windows pc). The issue happens exact same.

wardpeet · 2019-07-16T13:28:47Z

It looks like you're importing graphql-compose inside your project https://github.com/barbalex/apf2/blob/e8cdd961cfbf781bb1b5d548c7465dc3b3765325/src/components/shared/Files/File.js#L20

Graphql-compose is a nodejs project which doesn't work in the browser. If you need a upperFirst function I recommend going for https://www.npmjs.com/package/capitalize or just write a small utility yourself.

const capitalize = (s) => {
  return s.charAt(0).toUpperCase() + s.slice(1)
}

barbalex · 2019-07-16T13:43:37Z

facepalm

this shows:

automatisms in editors can be extremely dangerous. The cause of this is:
1. I thought I had imported 'upperFirst' from lodash and wrote it in my code.
2. a friendly helper in VSCode automatically imported an upperFirst function it could find...
Humans, especially me, are really bad at finding stuff they don't expect. Even if they are told to look for it and their eyes scan it :-(

I am really sorry for bugging you guys. Thanks a lot for this great tool and your patience.

wardpeet · 2019-07-17T07:30:33Z

No worries, it happens to the best of us ❤️

wardpeet closed this as completed Jul 16, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

graphql-compose throws 'Uncaught ReferenceError: require is not defined' #15633

graphql-compose throws 'Uncaught ReferenceError: require is not defined' #15633

barbalex commented Jul 11, 2019 •

edited

Loading

barbalex commented Jul 11, 2019 •

edited

Loading

pieh commented Jul 11, 2019

barbalex commented Jul 11, 2019

pieh commented Jul 11, 2019 •

edited

Loading

barbalex commented Jul 11, 2019

barbalex commented Jul 11, 2019

barbalex commented Jul 16, 2019 •

edited

Loading

barbalex commented Jul 16, 2019 •

edited

Loading

barbalex commented Jul 16, 2019

barbalex commented Jul 16, 2019 •

edited

Loading

barbalex commented Jul 16, 2019

wardpeet commented Jul 16, 2019 •

edited

Loading

barbalex commented Jul 16, 2019

wardpeet commented Jul 17, 2019

graphql-compose throws 'Uncaught ReferenceError: require is not defined' #15633

graphql-compose throws 'Uncaught ReferenceError: require is not defined' #15633

Comments

barbalex commented Jul 11, 2019 • edited Loading

Description

Environment

barbalex commented Jul 11, 2019 • edited Loading

pieh commented Jul 11, 2019

barbalex commented Jul 11, 2019

pieh commented Jul 11, 2019 • edited Loading

barbalex commented Jul 11, 2019

barbalex commented Jul 11, 2019

barbalex commented Jul 16, 2019 • edited Loading

barbalex commented Jul 16, 2019 • edited Loading

barbalex commented Jul 16, 2019

barbalex commented Jul 16, 2019 • edited Loading

barbalex commented Jul 16, 2019

wardpeet commented Jul 16, 2019 • edited Loading

barbalex commented Jul 16, 2019

wardpeet commented Jul 17, 2019

barbalex commented Jul 11, 2019 •

edited

Loading

barbalex commented Jul 11, 2019 •

edited

Loading

pieh commented Jul 11, 2019 •

edited

Loading

barbalex commented Jul 16, 2019 •

edited

Loading

barbalex commented Jul 16, 2019 •

edited

Loading

barbalex commented Jul 16, 2019 •

edited

Loading

wardpeet commented Jul 16, 2019 •

edited

Loading