Node-fetch: `.mjs` fails webpack build

[peterbakonyi05]

When using node-fetch with webpack v4.8.3, bundling fails with node-fetch v2.2. By default webpack will resolve the module entry from package.json. Webpack supports .mjs extension, it seems the problem is the ES6 imports from the built-in node_modules like http, which are being shipped in CommonJS format.

Is there a plan to support webpack 4 with the new .mjs format?

As a temporary workaround the issue can be solved by changing the mainFields entry to mainFields: ["main", "module"]. Note: this will affect all modules.

Error:

ERROR in ./node_modules/node-fetch/lib/index.mjs
1049:34-46 Can't import the named export 'STATUS_CODES' from non EcmaScript module (only default export is available)
 @ ./node_modules/node-fetch/lib/index.mjs
 @ ./apps/server/src/test.js

ERROR in ./node_modules/node-fetch/lib/index.mjs
1142:16-21 Can't import the named export 'parse' from non EcmaScript module (only default export is available)
 @ ./node_modules/node-fetch/lib/index.mjs
 @ ./apps/server/src/test.js

ERROR in ./node_modules/node-fetch/lib/index.mjs
1145:16-21 Can't import the named export 'parse' from non EcmaScript module (only default export is available)
 @ ./node_modules/node-fetch/lib/index.mjs
 @ ./apps/server/src/test.js

ERROR in ./node_modules/node-fetch/lib/index.mjs
1149:15-20 Can't import the named export 'parse' from non EcmaScript module (only default export is available)
 @ ./node_modules/node-fetch/lib/index.mjs
 @ ./apps/server/src/test.js

ERROR in ./node_modules/node-fetch/lib/index.mjs
1194:9-15 Can't import the named export 'format' from non EcmaScript module (only default export is available)
 @ ./node_modules/node-fetch/lib/index.mjs
 @ ./apps/server/src/test.js

ERROR in ./node_modules/node-fetch/lib/index.mjs
1352:51-58 Can't import the named export 'resolve' from non EcmaScript module (only default export is available)
 @ ./node_modules/node-fetch/lib/index.mjs
 @ ./apps/server/src/test.js

ERROR in ./node_modules/node-fetch/lib/index.mjs
1413:27-38 Can't import the named export 'PassThrough' from non EcmaScript module (only default export is available)
 @ ./node_modules/node-fetch/lib/index.mjs
 @ ./apps/server/src/test.js

ERROR in ./node_modules/node-fetch/lib/index.mjs
1460:29-40 Can't import the named export 'PassThrough' from non EcmaScript module (only default export is available)
 @ ./node_modules/node-fetch/lib/index.mjs
 @ ./apps/server/src/test.js

ERROR in ./node_modules/node-fetch/lib/index.mjs
496:11-22 Can't import the named export 'PassThrough' from non EcmaScript module (only default export is available)
 @ ./node_modules/node-fetch/lib/index.mjs
 @ ./apps/server/src/test.js

ERROR in ./node_modules/node-fetch/lib/index.mjs
497:11-22 Can't import the named export 'PassThrough' from non EcmaScript module (only default export is available)
 @ ./node_modules/node-fetch/lib/index.mjs
 @ ./apps/server/src/test.js

[chris-feist]

@peterbakonyi05 This resolved it for me https://github.com/apollographql/react-apollo/issues/1737#issuecomment-372946515

[TimothyGu]

I used import with fields for Node.js modules because they are now supported by Node.js after https://github.com/nodejs/node/pull/20403 (v10.2.0).

Would using only default import help with the problem? I.e., import http from 'http'; const { STATUS_CODES } = http;? This is compatible with Node.js as well.

[peterbakonyi05]

Thanks @f3ist, I didn't manage to find that in the official docs. In case anyone needs more info why the below solves the problem: https://github.com/webpack/webpack/issues/6357

{
  type: 'javascript/auto',
  test: /\.mjs$/,
  use: []
}

[tleef]

For what it's worth, you can also work around this issue more precisely by setting an alias in the resolve section of your webpack config

{
  ...
  resolve: {
    alias: {
      'node-fetch$': "node-fetch/lib/index.js"
    }
  }
  ...
}

This is similar to the original solution of using mainFields: ["main", "module"] but only affects node-fetch

[yvele]

The resolve.alias workaround is better and more precise than javascript/auto workaround as stated here https://github.com/apollographql/react-apollo/issues/1737#issuecomment-373039056

Just remember Webpack's defaults are the way they are for a reason. .mjs is limited because it's not fully baked and it's support story isn't finished yet. If you need javascript/auto you should really be using .js.

[bitinn]

2.2.1 release should address this issue, if not please let me know.