graphiql: Cannot build with webpack

I’m trying to bundle graphiql which uses codemirror-graphql which uses graphql-language-service.

The build is failing because webpack can’t parse the bundled js.flow files, and it is trying to parse those because of the dynamic import at https://github.com/graphql/graphql-language-service/blob/master/packages/graphql-language-service-interface/src/GraphQLLanguageService.js#L87 (probably) which could be importing anything at all.

Is it not possible to limit the require by making it something like:

require(`./${somePath}.js`)

If not, is it possible to not include the flow js files in the dist folder?

The webpack error is:

Module parse failed: .../node_modules/graphql-language-service-interface/dist/getOutline.js.flow Unexpected token (11:12)
You may need an appropriate loader to handle this file type.
|  */
|
| import type {
|   Outline,
|   TextToken,
 @ ./node_modules/graphql-language-service-interface/dist ^.*$
 @ ./node_modules/graphql-language-service-interface/dist/GraphQLLanguageService.js
 @ ./node_modules/graphql-language-service-interface/dist/index.js
 @ ./node_modules/codemirror-graphql/lint.js
 @ ./node_modules/graphiql/dist/components/QueryEditor.js
 @ ./node_modules/graphiql/dist/components/GraphiQL.js
 @ ./node_modules/graphiql/dist/index.js
 @ ./lib/universal/Graphql/index.jsx
 @ ./lib/universal/Root.jsx
 @ ./lib/client/index.js
 @ multi babel-polyfill stratokit/client

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 24
Comments: 31 (19 by maintainers)

Commits related to this issue

use string literal for dynamic imports — committed to graphql/graphql-language-service by asiandrummer 7 years ago
fix: webpack resolutions for #882, add webpack example — committed to graphql/graphiql by acao 5 years ago
fix: webpack resolutions for #882, add webpack example — committed to graphql/graphiql by acao 5 years ago

Most upvoted comments

For now I worked around it by using this as a webpack plugin:

			new webpack.ContextReplacementPlugin(
				/graphql-language-service-interface[\\/]dist$/,
				new RegExp(`^\\./.*\\.js$`)
			)

but of course this is far from ideal. Isn’t there a better approach than this dynamic require?

+12

wmertens on Jul 19, 2017

How is this still thing? geez

igl on Mar 15, 2019

A PR is ready that solves this issue if anyone is interested! #973

acao on Oct 27, 2019

In case it helps, here’s the webpack configuration we’re currently using in PostGraphile to bundle GraphiQL:

https://github.com/graphile/postgraphile/blob/7979cfb10f3246c7c198be8db2c929e82e0e4323/scripts/make-assets#L49-L124

benjie on Aug 13, 2019

Aha, this issue is actually a duplicate of #111 with the same workaround I also found 😃

So, the real problem is, why do you need the dynamic require? The quick fix I post above (require(`./${somePath}.js`)) should work with webpack, and maybe browserify.

Are you outputting warnings on your webpack build? I can’t imagine how it would not complain…

wmertens on Aug 7, 2017