Skip to content

.mjs fails webpack build #493

Closed
Closed
.mjs fails webpack build#493

Description

@peterbakonyi05
peterbakonyi05
opened on Jul 23, 2018

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

Activity

  1. chris-feist commented on Jul 23, 2018

    @chris-feist
    chris-feist
    on Jul 23, 2018

    @peterbakonyi05 This resolved it for me apollographql/react-apollo#1737 (comment)

  2. TimothyGu commented on Jul 25, 2018

    @TimothyGu
    TimothyGu
    on Jul 25, 2018
    Collaborator

    I used import with fields for Node.js modules because they are now supported by Node.js after nodejs/node#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.

  3. peterbakonyi05 commented on Jul 26, 2018

    @peterbakonyi05
    peterbakonyi05
    on Jul 26, 2018
    Author

    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: webpack/webpack#6357

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

  4. tleef commented on Aug 19, 2018

    @tleef
    tleef
    on Aug 19, 2018

    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

  5. helmutgranda
    added a commit that references this issue on Sep 27, 2018

    Update to fix issues with building

    4fac047

  6. yvele commented on Oct 24, 2018

    @yvele
    yvele
    on Oct 24, 2018

    The resolve.alias workaround is better and more precise than javascript/auto workaround as stated here apollographql/react-apollo#1737 (comment)

    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.

  7. bitinn commented on Nov 5, 2018

    @bitinn
    bitinn
    on Nov 5, 2018
    Collaborator

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

  8. bitinn
    closed this as completedon Nov 5, 2018
  9. Jaid
    added a commit that references this issue on Jun 16, 2019

    Fixed `node-fetch` resolving for Webpack node-fetch/node-fetch#493

    c0ea2b5
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions