react-scripts@2.0.0-next.3e165448 - ReferenceError: require is not defined :: due to graphql using .mjs

Is this a bug report?

Yes.

The latest react-scripts@2.0.0-next.3e165448 with Webpack 4 support breaks when bundling dependencies (node_modules) with .mjs files, such as graphql.

Did you try recovering your dependencies?

Yes.

Which terms did you search for in User Guide?

In the User Guide, Issues and PRs I searched for:

• ReferenceError: require is not defined
• graphql
• mjs

Environment

Environment:
  OS:  macOS Sierra 10.12.6
  Node:  8.9.4
  Yarn:  1.7.0
  npm:  5.6.0
  Watchman:  4.1.0
  Xcode:  Xcode 9.2 Build version 9C40b
  Android Studio:  2.1 AI-143.3101438

Packages: (wanted => installed)
  react: ^16.4.1 => 16.4.1
  react-dom: ^16.4.1 => 16.4.1
  react-scripts: ^2.0.0-next.3e165448 => 2.0.0-next.3e165448

Steps to Reproduce

(Write your steps here:)

1. npx create-react-app my-app && cd my-app
2. npm install
3. npm install graphql react-scripts@2.0.0-next.3e165448 --save
4. Add [graphqlCode] after import "./App.css" in src/App.js
5. npm start

[graphqlCode]

import {
  graphql,
  GraphQLSchema,
  GraphQLObjectType,
  GraphQLString
} from "graphql";

var schema = new GraphQLSchema({
  query: new GraphQLObjectType({
    name: "RootQueryType",
    fields: {
      hello: {
        type: GraphQLString,
        resolve() {
          return "world";
        }
      }
    }
  })
});

Expected Behavior

Actual Behavior

Reproducible Demo

https://github.com/christemple/create-react-app-graphql-issue

git clone [e-mail]:christemple/create-react-app-graphql-issue.git
npm install
npm start

Additional

I noticed this when trying to install the AWS Amplify package, which I noticed has a dependency on graphql.

I’m happy to raise a PR for a fix, I just wanted to get verification that it’s a needed fix before doing so.

Thanks

[christemple]

The following in the webpack config, just before the file loader, appears to solve the issue:

{
  test: /\.mjs$/,
  include: /node_modules/,
  type: 'javascript/auto',
}

I can do more testing and get a root cause and solution along with a PR up this evening

[bebbi]

Because my api uses different babel versions, I had react-scripts in the monorepo’s nohoist declaration. I was then able to resolve this by adding further libs to the nohoist declaration:

"nohoist": [
  "**/react-scripts",
  "**/react-scripts/**",
  "**/graphql",
  "**/graphql/**",
  "**/apollo",
  "**/apollo/**",
  "**/apollo-link-state",
  "**/apollo-link-state/**",
  "**/babel-loader",
  "**/babel-loader/**"
]