Graphiql: cleanup build output, better documentation for webpack

[okorz001]

Using [email protected] with [email protected] fails with the following error:

ERROR in ./node_modules/graphql-language-service-utils/esm/__tests__/validateWithCustomRules-test.js
Module not found: Error: Can't resolve 'fs' in '/src/graphiql/node_modules/graphql-language-service-utils/esm/__tests__'
 @ ./node_modules/graphql-language-service-utils/esm/__tests__/validateWithCustomRules-test.js 1:0-34 9:29-41
 @ ./node_modules/graphql-language-service-utils/esm sync ^.*\.js$
 @ ./node_modules/graphql-language-service-utils/esm/file.js
 @ ./node_modules/graphql-language-service-utils/esm/index.js
 @ ./node_modules/graphql-language-service-interface/dist/getDefinition.js
 @ ./node_modules/graphql-language-service-interface/dist/index.js
 @ ./node_modules/codemirror-graphql/hint.js
 @ ./node_modules/graphiql/dist/components/QueryEditor.js
 @ ./node_modules/graphiql/dist/components/GraphiQL.js
 @ ./node_modules/graphiql/dist/index.js
 @ ./client/main.jsx

It appears that Webpack is trying to include files based on a regular expression (???) which then matches test code.

WARNING in ./node_modules/graphql-language-service-utils/esm/file.spec.js 53:37-93
Critical dependency: the request of a dependency is an expression
 @ ./node_modules/graphql-language-service-utils/esm sync ^.*\.js$
 @ ./node_modules/graphql-language-service-utils/esm/file.js
 @ ./node_modules/graphql-language-service-utils/esm/index.js
 @ ./node_modules/graphql-language-service-interface/dist/getDefinition.js
 @ ./node_modules/graphql-language-service-interface/dist/index.js
 @ ./node_modules/codemirror-graphql/hint.js
 @ ./node_modules/graphiql/dist/components/QueryEditor.js
 @ ./node_modules/graphiql/dist/components/GraphiQL.js
 @ ./node_modules/graphiql/dist/index.js
 @ ./client/main.jsx

WARNING in ./node_modules/graphql-language-service-utils/esm/file.spec.js 57:37-93
Critical dependency: the request of a dependency is an expression
 @ ./node_modules/graphql-language-service-utils/esm sync ^.*\.js$
 @ ./node_modules/graphql-language-service-utils/esm/file.js
 @ ./node_modules/graphql-language-service-utils/esm/index.js
 @ ./node_modules/graphql-language-service-interface/dist/getDefinition.js
 @ ./node_modules/graphql-language-service-interface/dist/index.js
 @ ./node_modules/codemirror-graphql/hint.js
 @ ./node_modules/graphiql/dist/components/QueryEditor.js
 @ ./node_modules/graphiql/dist/components/GraphiQL.js
 @ ./node_modules/graphiql/dist/index.js
 @ ./client/main.jsx

WARNING in ./node_modules/graphql-language-service-utils/esm/file.spec.js 61:37-93
Critical dependency: the request of a dependency is an expression
 @ ./node_modules/graphql-language-service-utils/esm sync ^.*\.js$
 @ ./node_modules/graphql-language-service-utils/esm/file.js
 @ ./node_modules/graphql-language-service-utils/esm/index.js
 @ ./node_modules/graphql-language-service-interface/dist/getDefinition.js
 @ ./node_modules/graphql-language-service-interface/dist/index.js
 @ ./node_modules/codemirror-graphql/hint.js
 @ ./node_modules/graphiql/dist/components/QueryEditor.js
 @ ./node_modules/graphiql/dist/components/GraphiQL.js
 @ ./node_modules/graphiql/dist/index.js
 @ ./client/main.jsx

WARNING in ./node_modules/graphql-language-service-utils/esm/file.spec.js 68:37-99
Critical dependency: the request of a dependency is an expression
 @ ./node_modules/graphql-language-service-utils/esm sync ^.*\.js$
 @ ./node_modules/graphql-language-service-utils/esm/file.js
 @ ./node_modules/graphql-language-service-utils/esm/index.js
 @ ./node_modules/graphql-language-service-interface/dist/getDefinition.js
 @ ./node_modules/graphql-language-service-interface/dist/index.js
 @ ./node_modules/codemirror-graphql/hint.js
 @ ./node_modules/graphiql/dist/components/QueryEditor.js
 @ ./node_modules/graphiql/dist/components/GraphiQL.js
 @ ./node_modules/graphiql/dist/index.js
 @ ./client/main.jsx

Simple client app is just trying to mount the GraphiQL component to the entire page:

$ cat client/main.jsx 
import GraphiQL from 'graphiql'
import React from 'react'
import ReactDOM from 'react-dom'

import 'graphiql/graphiql.css'

function fetchGraphQL(params) {
  const url = window.location.origin + '/gql'
  const fetchParams = {
    method: 'post',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify(params),
  }
  return window.fetch(url, fetchParams)
    .then(response => response.json())
}

const app = <GraphiQL fetcher={fetchGraphQL} />
ReactDOM.render(app, document.body);

[okorz001]

As a workaround, you can use ignore-loader to discard all files within a __tests__ directory:

1. Install ignore-loader: $ npm install ignore-loader --save-dev

2. Add to module.rules in webpack.config.js:

      {
        test: /\/__tests__\//i,
        use: ['ignore-loader'],
      },

[barbalex]

After updating graphiql from 0.17.0 to 0.17.2 I got this error when running gatsby dev:

$ gatsby develop
success open and validate gatsby-configs - 0.061s
success load plugins - 2.088s
success onPreInit - 0.007s
success initialize cache - 0.012s
success copy gatsby files - 0.301s
success onPreBootstrap - 0.034s
success createSchemaCustomization - 0.074s
success source and transform nodes - 0.346s
success building schema - 0.714s
success createPages - 0.056s
success createPagesStatefully - 0.169s
success onPreExtractQueries - 0.015s
success update schema - 0.047s
success extract queries from components - 1.006s
success write out requires - 0.080s
success write out redirect data - 0.048s
success Build manifest and related icons - 0.131s
success onPostBootstrap - 0.212s
⠀
info bootstrap finished - 12.360 s
⠀
success run queries - 0.115s - 15/15 131.00/s
warn Critical dependency: the request of a dependency is an expression
warn Critical dependency: the request of a dependency is an expression
warn Critical dependency: the request of a dependency is an expression
warn Critical dependency: the request of a dependency is an expression

 ERROR #98123  WEBPACK

Generating development JavaScript bundle failed

Can't resolve 'fs' in 'C:\Users\alexa\ae2\node_modules\graphql-language-service-utils\esm\__tests__'

File: node_modules\graphql-language-service-utils\esm\__tests__\validateWithCustomRules-test.js

failed Building development bundle - 25.229s

This is a gatsby project running on Windows 10, using webpack 4.41.2.

Unfortunately after reverting to v0.17.0 the error remains. Even after running:

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

also:

alexa@PCA C:\Users\alexa\ae2
$ yarn why graphql-language-service-utils
yarn why v1.19.0
[1/4] Why do we have the module "graphql-language-service-utils"...?
[2/4] Initialising dependency graph...
[3/4] Finding dependency...
[4/4] Calculating file sizes...
=> Found "[email protected]"
info Reasons this module exists
   - "graphiql#codemirror-graphql#graphql-language-service-interface" depends on it
   - Hoisted from "graphiql#codemirror-graphql#graphql-language-service-interface#graphql-language-service-utils"
info Disk size without dependencies: "240KB"
info Disk size with unique dependencies: "512KB"
info Disk size with transitive dependencies: "7.62MB"
info Number of shared dependencies: 17
Done in 1.54s.

I suppose this is related?

[acao]

thank you for reporting these bugs! please make sure you are using the webpack and babel configs in the example and check back again if that doesnt help. i confirmed the webpack example manually on the last deploy

[acao]

https://github.com/graphql/graphiql/blob/master/packages/examples/graphiql-webpack/webpack.config.js#L68 possibly this line in particular?

[acao]

yes it is using a dynamic regex expression to resolve files because of a dynamic require we need for the server LSP. that require will happen on the browser soon but thats another matter

[acao]

@okorz001 @barbalex did this help in webpack.config.js?

node: {
    fs: 'empty',
  },

[acao]

so there's essentially:

• a documentation bug that doesnt make it clear to use the webpack config examples (already an issue for folks in the past)
• a housekeeping issue in terms of the wrong ignore paths for our babel build scripts

[barbalex]

node: {
    fs: 'empty',
  },

works fine. Thanks!

[acao]

that's great news. meanwhile, cleaning up these embarassing issues you pointed out (such as publishing unit tests, oops!)

[ggascoigne]

I should add that if you are using create-react-app all of these webpack workarounds are less than ideal since the webpack configuration is sealed.

That said, that's where patch-package becomes really useful.

[acao]

@ggascoigne works without any config in CRA:
https://codesandbox.io/s/graphiql-example-nhzvc

[acao]

also to note. it will still look for fs even after this, because we are always importing packages that use FS. so node: { fs: empty } is always required, with or without accidentally publishing tests. note it works transparently in CRA because this configuration is standard.

[acao]

@okorz001 @barbalex @ggascoigne again thanks for reporting your issues with build output. if you like, you can confirm that this cleans up the offending file resolution issue and that the create react app example works and the docs are fine from webpack/bundler usage perspective?

[acao]

https://github.com/graphql/graphiql/pull/1068/files this is ready to go, a much easier version that just addresses the test placement and unit test file resolution issue

[acao]

looks like it was closed automatically earlier because i said fixes #id and it did not.

just want to confirm for once and for all that the 0.17.4 release of GraphiQL this morning resolves all of these issues with test files getting published and file resolutions for webpack? the webpack output is looking much nicer.

@okorz001 @barbalex @ggascoigne

[barbalex]

I had webpack issues with v0.17.4. Then I saw v0.17.5 turning up quickly thereafter. Tried it and it works 🎉

[ggascoigne]

I can also confirm that I'm not seeing this issue with 0.17.5. Thank you for such a prompt response.

[acao]

hooray! glad that feels like a quick fix, haha. had to wait til i was 100% sure it resolved everything. lmk if there are any other issues, happy bundling!