Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

cleanup build output, better documentation for webpack

See original GitHub issue

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);

Issue Analytics

State:
Created 4 years ago
Reactions:4
Comments:18 (13 by maintainers)

Top GitHub Comments

1reaction

ggascoignecommented, Dec 9, 2019

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

1reaction

barbalexcommented, Dec 9, 2019

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

Top Results From Across the Web

Output Management - webpack

In general it's good practice to clean the /dist folder before each build, so that only used files will be generated. Let's take...

clean-webpack-plugin - npm

A webpack plugin to remove/clean your build folder(s). NOTE: Node v10+ and webpack v4+ are supported and tested.

Tidying Up - SurviveJS

Cleaning the build directory# ... Starting from webpack 5.20, it supports cleaning out of the box by using the following configuration: const config...

How to Create a Production-Ready Webpack 4 Config From ...

js file in our dist directory too! Wouldn't it be nice if webpack could delete the old unneeded output each time we do...

how to config the webpack 5.x to remove the dist folder before ...

Check out the docs: https://webpack.js.org/guides/output-management/#cleaning-up-the-dist-folder. Add clean:true