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

[christemple]

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 git@github.com: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

[Timer]

Odd, we added a work-around to make support for this explicitly work.

Can you get to the bottom of this?

[iansu]

This is the fix for Jest: #4318

I think there must be a similar issue with the order we're resolving files with the .mjs extension in our webpack config.

[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

[miraage]

I've just noticed the same pattern: upgrading react-scripts to the latest version (2.0.0-next.3e165448) breaks the build.
After clearing node_modules and package-lock.json and running npm install again worked things out for my two pet-projects.

@christemple could you try to execute those steps and tell us the results?

[christemple]

@miraage you're correct, clearing out node_modules, deleting package-lock.json and reinstalling with npm install does result in no errors.

However that's because when I install react-scripts with npm i react-scripts@2.0.0-next.3e165448 -S [1] it adds the dependency into the package.json as "react-scripts": "^2.0.0-next.3e165448", and the semantic versioning isn't working correctly with the git sha, and so it ends up installing "version": "2.0.0-next.b2fd8db8" (verified by looking at the package.json for react-scripts in the node_modules).

So you've narrowed it down to a change between those commits 👍

[1] Using npm v5.6.0

[christemple]

It all seems to be related to the update to Webpack 4 and it's new defaults.
Here's what I've discovered so far...

• Webpack 4 has introduced new module types
• New priority order for modules from package.json has module before main (module is the proposed field for mjs file in package.json)
• Webpack 4 will now use graphql's .mjs entrypoint

This currently causes the app to blow up with the experience described above.
The line of code in graphql that throws the exception is:

I believe the require statement should be __webpack_require__, not sure whether the issue is with webpack or grapnel yet though...

So I suspect it's more of an issue with Webpack or graphql (leaning more towards graphql as mjs seems more of an after-thought)

I'll follow up with a proposed solution/workaround in #4642

[nfantone]

I can confirm that adding:

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

before transpiling configuration for test: /\.(js|jsx|mjs)$/, does the trick (latest CRA 3e165448).

Other projects like Razzle have applied similar solutions to this.

[Timer]

We dropped mjs support, this won't be an issue anymore.

[bebbi]

@Timer Updating my monorepo to react-scripts@2.1.1 I have the identical issue as OP.
I also have graphql, through apollo, and using graphql.macro.

Can you clarify when this should or not occur?

Unfortunately, removing node_modules and yarn.lock didn't do the trick.

Environment:
OS: macOS 10.14.1
Node: 8.12.0
Yarn: 1.7.0
npm: 6.4.1
Watchman: 4.9.0
Xcode: Xcode 10.1 Build version 10B61
Android Studio: Not Found

Packages: (wanted => installed)
react: ^16.4.0 => Not Installed
react-dom: ^16.4.0 => Not Installed
react-scripts: ^2.1.1 => 2.1.1

[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/**"
]