cleanup build output, better documentation for webpack

[okorz001]

Using graphiql@0.17.2 with webpack@4.41.2 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 "graphql-language-service-utils@2.3.2"
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!