graphql-playground-react compilation error in `node_modules`

This issue pertains to the following package(s):

• GraphQL Playground - Electron App
• GraphQL Playground HTML
• GraphQL Playground
• GraphQL Playground Express Middleware
• GraphQL Playground Hapi Middleware
• GraphQL Playground Koa Middleware
• GraphQL Playground Lambda Middleware

What OS and OS version are you experiencing the issue(s) on?

MacOS 10.13.6

What version of graphql-playground(-electron/-middleware) are you experiencing the issue(s) on?

1.7.20

What is the expected behavior?

When rendering the React component from the As React component example, I expect the react components to render.

What is the actual behavior?

I see compilation errors about needing appropriate webpack loaders. Typically, packages ship with compiled versions of their projects so that there would not need to be a compile step for them. It is, however, likely that I’m doing something wrong.

Here is the output from my compilation:

ERROR in ./node_modules/graphql-playground-react/lib/components/GraphQLBinApp.jsx
Module parse failed: Unexpected token (109:16)
You may need an appropriate loader to handle this file type.
|             subscriptionEndpoint = getParameterByName('subscription');
|         }
|         return (<Wrapper>
|         {this.state.loading ? null : !this.state.endpoint ||
|             this.state.endpoint.length === 0 ? (<styled_1.ThemeProvider theme={styled_1.theme}>
 @ ./node_modules/graphql-playground-react/lib/lib.js 13:22-59
 @ ./src/pages/graphql_playground/index.js
 @ multi (webpack)-dev-server/client?https://localhost:8080 webpack/hot/dev-server ./src/pages/graphql_playground

ERROR in ./node_modules/graphql-playground-react/lib/components/Playground/GraphQLEditor.jsx
Module parse failed: Unexpected token (260:16)
You may need an appropriate loader to handle this file type.
|     };
|     GraphQLEditor.prototype.render = function () {
|         return (<EditorWrapper_1.Container setRef={this.setContainerComponent}>
|         <EditorWrapper_1.default>
|           <TopBar_1.default shareEnabled={this.props.shareEnabled} fixedEndpoint={this.props.fixedEndpoint}/>
 @ ./node_modules/graphql-playground-react/lib/lib.js 11:22-70
 @ ./src/pages/graphql_playground/index.js
 @ multi (webpack)-dev-server/client?https://localhost:8080 webpack/hot/dev-server ./src/pages/graphql_playground

ERROR in ./node_modules/graphql-playground-react/lib/components/PlaygroundWrapper.jsx
Module parse failed: Unexpected token (331:43)
You may need an appropriate loader to handle this file type.
|     };
|     PlaygroundWrapper.prototype.render = function () {
|         var title = this.props.setTitle ? (<react_helmet_1.Helmet>
|         <title>{this.getTitle()}</title>
|       </react_helmet_1.Helmet>) : null;
 @ ./node_modules/graphql-playground-react/lib/lib.js 9:26-67
 @ ./src/pages/graphql_playground/index.js
 @ multi (webpack)-dev-server/client?https://localhost:8080 webpack/hot/dev-server ./src/pages/graphql_playground

[junaid33]

Getting the same issue when using graphQl-playground-react with next.js.

[mgeraci]

I added file loader to my webpack config, and now it’s compiling (still with flow errors). I’d love to see some information added to the readme about this, as it was totally unclear what I needed to do to actually get this running.