Wont compile after upgrading webpack 5

[thomastvedt]

Intended outcome:

I was upgrading / bumping packages in my repo. Upgrading webpack, apollo client, ++. It would be great if my solution still compiled / started up after this, but I get an error..

Actual outcome:

I get the following warning in console:

WARNING in ./node_modules/@apollo/client/utilities/globals/graphql.js 4:4-10
export 'isType' (imported as 'isType') was not found in 'graphql' (possible exports: removeTemporaryGlobals)
 @ ./node_modules/@apollo/client/utilities/globals/index.js 7:0-54 8:0-22
 @ ./node_modules/@apollo/client/react/index.js 1:0-39
 @ ./node_modules/@apollo/client/index.js 2:0-33 2:0-33
 @ ./src/index.tsx 9:0-48 12:36-50

which looks like this on the client:

How to reproduce the issue:

Reproduction repo: https://github.com/thomastvedt/react-apollo-error-template

• check out repo
• `npm install``
• npm run start

Output:

$ npm run start

> apollo-client-webpack-error@1.0.0 start
> webpack --config webpack.dev.config.ts

<w> [ReactRefreshPlugin] Hot Module Replacement (HMR) is not enabled! React Refresh requires HMR to function properly.
asset main.js 2.37 MiB [compared for emit] (name: main) 1 related asset
asset favicon.ico 24.3 KiB [compared for emit] [from: public/favicon.ico] [copied]
asset index.html 349 bytes [emitted]
orphan modules 163 KiB [orphan] 64 modules
runtime modules 3.25 KiB 6 modules
modules by path ./node_modules/ 1.97 MiB 319 modules
modules by path ./src/ 11.7 KiB
  ./src/index.tsx 9.35 KiB [built] [code generated]
  ./src/index.css 1.11 KiB [built] [code generated]
  ./node_modules/css-loader/dist/cjs.js!./src/index.css 1.26 KiB [built] [code generated]

WARNING in ./node_modules/@apollo/client/utilities/globals/graphql.js 4:4-10
export 'isType' (imported as 'isType') was not found in 'graphql' (possible exports: removeTemporaryGlobals)
 @ ./node_modules/@apollo/client/utilities/globals/index.js 7:0-54 8:0-22
 @ ./node_modules/@apollo/client/react/index.js 1:0-39
 @ ./node_modules/@apollo/client/index.js 2:0-33 2:0-33
 @ ./src/index.tsx 74:0-56 82:15-25 83:13-23 102:0-100 255:18-26 259:21-32 303:17-29 304:13-26 307:41-55

webpack 5.55.0 compiled with 1 warning in 2709 ms

Versions

$ npx envinfo@latest --preset apollo --clipboard

  System:
    OS: macOS 11.5.2
  Binaries:
    Node: 16.10.0 - ~/.nvm/versions/node/v16.10.0/bin/node
    Yarn: 1.22.11 - /usr/local/bin/yarn
    npm: 7.24.0 - ~/.nvm/versions/node/v16.10.0/bin/npm
  Browsers:
    Chrome: 94.0.4606.61
    Firefox: 90.0.2
    Safari: 14.1.2
  npmPackages:
    @apollo/client: ^3.4.15 => 3.4.15 

Some (perhaps) relevant links:
graphql/graphql-js#2721
#8178

I'm not a webpack expert, and it is possible that I'm doing something wrong here? How can I tell webpack that I want my 3rd party library (apollo client) to load ESM in stead of CommonJS?

[benjamn]

@thomastvedt Thanks to your reproduction, I have high confidence #8862 will fix this problem, even though the implied root cause (webpack resolving graphql as the local module ./graphql.ts) was difficult for me to believe at first.

Out of curiosity, do you have anything in your webpack config that might explain npm package identifiers getting resolved to local modules? I'm wondering if this is a default webpack misbehavior, or something that needs to be enabled.

[thomastvedt]

If I change line 2 in node_modules/@apollo/client/utilities/globals/graphql.js
from: import { isType } from 'graphql';
to: import { isType } from 'graphql/index.mjs';

that also fixes it. I thought that it was resolving to the CommonJS module and not the ESM module, possibly because of bad webpack config. But it looks like you're correct in #8862, renaming this file actually fixes it! Nice catch! 👍

I do have this setting enabled:
https://webpack.js.org/configuration/resolve/#resolvepreferrelative

could that be it? Yep... I guess I added that flag when webpack wasn't loading some less template stuff correctly... If I set preferRelative: false, (and load less stuff differently) it works...

resolve: {
    extensions: ['.mjs', '.wasm', '.tsx', '.ts', '.js','.jsx','.json', '...'],
    preferRelative: false,
    modules: [path.join(__dirname, 'src'), 'node_modules'],
    plugins: [
      new TsconfigPathsPlugin(),
    ],
  },

Thank you very much for looking at this @benjamn !
Also, I guess the fix in #8862 doesn't hurt? Just to be on the safe side / avoid future me doing the same thing over again? :)