amplify-js: Module not found error when bundling with Webpack 5

Describe the bug I am unable to start a webpack dev server due to imports in .mjs files not having file extensions. The errors I get are:

ERROR in ./node_modules/@aws-amplify/pubsub/node_modules/graphql/index.mjs 34:0-49
Module not found: Error: Can't resolve './graphql' in '/Users/mike/Projects/reactTemplate/node_modules/@aws-amplify/pubsub/node_modules/graphql'
Did you mean 'graphql.js'?
BREAKING CHANGE: The request './graphql' failed to resolve only because it was resolved as fully specified
(probably because the origin is a '*.mjs' file or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./node_modules/@aws-amplify/pubsub/lib-esm/Providers/AWSAppSyncRealTimeProvider.js 90:0-39 221:41-53 345:49-61 501:37-49 517:46-58 541:37-49
 @ ./node_modules/@aws-amplify/pubsub/lib-esm/Providers/index.js 15:0-45 15:0-45
 @ ./node_modules/@aws-amplify/pubsub/lib-esm/index.js 14:0-28 14:0-28
 @ ./node_modules/aws-amplify/lib-esm/index.js 27:0-45 27:0-45
 @ ./src/index.jsx 3:0-34 6:0-17

ERROR in ./node_modules/@aws-amplify/pubsub/node_modules/graphql/index.mjs 36:0-47:50
Module not found: Error: Can't resolve './type' in '/Users/mike/Projects/reactTemplate/node_modules/@aws-amplify/pubsub/node_modules/graphql'
Did you mean 'index.js'?
BREAKING CHANGE: The request './type' failed to resolve only because it was resolved as fully specified
(probably because the origin is a '*.mjs' file or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./node_modules/@aws-amplify/pubsub/lib-esm/Providers/AWSAppSyncRealTimeProvider.js 90:0-39 221:41-53 345:49-61 501:37-49 517:46-58 541:37-49
 @ ./node_modules/@aws-amplify/pubsub/lib-esm/Providers/index.js 15:0-45 15:0-45
 @ ./node_modules/@aws-amplify/pubsub/lib-esm/index.js 14:0-28 14:0-28
 @ ./node_modules/aws-amplify/lib-esm/index.js 27:0-45 27:0-45
 @ ./src/index.jsx 3:0-34 6:0-17

ERROR in ./node_modules/@aws-amplify/pubsub/node_modules/graphql/index.mjs 49:0-53:205
Module not found: Error: Can't resolve './language' in '/Users/mike/Projects/reactTemplate/node_modules/@aws-amplify/pubsub/node_modules/graphql'
Did you mean 'index.js'?
BREAKING CHANGE: The request './language' failed to resolve only because it was resolved as fully specified
(probably because the origin is a '*.mjs' file or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./node_modules/@aws-amplify/pubsub/lib-esm/Providers/AWSAppSyncRealTimeProvider.js 90:0-39 221:41-53 345:49-61 501:37-49 517:46-58 541:37-49
 @ ./node_modules/@aws-amplify/pubsub/lib-esm/Providers/index.js 15:0-45 15:0-45
 @ ./node_modules/@aws-amplify/pubsub/lib-esm/index.js 14:0-28 14:0-28
 @ ./node_modules/aws-amplify/lib-esm/index.js 27:0-45 27:0-45
 @ ./src/index.jsx 3:0-34 6:0-17

ERROR in ./node_modules/@aws-amplify/pubsub/node_modules/graphql/index.mjs 55:0-101
Module not found: Error: Can't resolve './execution' in '/Users/mike/Projects/reactTemplate/node_modules/@aws-amplify/pubsub/node_modules/graphql'
Did you mean 'index.js'?
BREAKING CHANGE: The request './execution' failed to resolve only because it was resolved as fully specified
(probably because the origin is a '*.mjs' file or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./node_modules/@aws-amplify/pubsub/lib-esm/Providers/AWSAppSyncRealTimeProvider.js 90:0-39 221:41-53 345:49-61 501:37-49 517:46-58 541:37-49
 @ ./node_modules/@aws-amplify/pubsub/lib-esm/Providers/index.js 15:0-45 15:0-45
 @ ./node_modules/@aws-amplify/pubsub/lib-esm/index.js 14:0-28 14:0-28
 @ ./node_modules/aws-amplify/lib-esm/index.js 27:0-45 27:0-45
 @ ./src/index.jsx 3:0-34 6:0-17

ERROR in ./node_modules/@aws-amplify/pubsub/node_modules/graphql/index.mjs 56:0-68
Module not found: Error: Can't resolve './subscription' in '/Users/mike/Projects/reactTemplate/node_modules/@aws-amplify/pubsub/node_modules/graphql'
Did you mean 'index.js'?
BREAKING CHANGE: The request './subscription' failed to resolve only because it was resolved as fully specified
(probably because the origin is a '*.mjs' file or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./node_modules/@aws-amplify/pubsub/lib-esm/Providers/AWSAppSyncRealTimeProvider.js 90:0-39 221:41-53 345:49-61 501:37-49 517:46-58 541:37-49
 @ ./node_modules/@aws-amplify/pubsub/lib-esm/Providers/index.js 15:0-45 15:0-45
 @ ./node_modules/@aws-amplify/pubsub/lib-esm/index.js 14:0-28 14:0-28
 @ ./node_modules/aws-amplify/lib-esm/index.js 27:0-45 27:0-45
 @ ./src/index.jsx 3:0-34 6:0-17

ERROR in ./node_modules/@aws-amplify/pubsub/node_modules/graphql/index.mjs 58:0-60:675
Module not found: Error: Can't resolve './validation' in '/Users/mike/Projects/reactTemplate/node_modules/@aws-amplify/pubsub/node_modules/graphql'
Did you mean 'index.js'?
BREAKING CHANGE: The request './validation' failed to resolve only because it was resolved as fully specified
(probably because the origin is a '*.mjs' file or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./node_modules/@aws-amplify/pubsub/lib-esm/Providers/AWSAppSyncRealTimeProvider.js 90:0-39 221:41-53 345:49-61 501:37-49 517:46-58 541:37-49
 @ ./node_modules/@aws-amplify/pubsub/lib-esm/Providers/index.js 15:0-45 15:0-45
 @ ./node_modules/@aws-amplify/pubsub/lib-esm/index.js 14:0-28 14:0-28
 @ ./node_modules/aws-amplify/lib-esm/index.js 27:0-45 27:0-45
 @ ./src/index.jsx 3:0-34 6:0-17

ERROR in ./node_modules/@aws-amplify/pubsub/node_modules/graphql/index.mjs 62:0-64
Module not found: Error: Can't resolve './error' in '/Users/mike/Projects/reactTemplate/node_modules/@aws-amplify/pubsub/node_modules/graphql'
Did you mean 'index.js'?
BREAKING CHANGE: The request './error' failed to resolve only because it was resolved as fully specified
(probably because the origin is a '*.mjs' file or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./node_modules/@aws-amplify/pubsub/lib-esm/Providers/AWSAppSyncRealTimeProvider.js 90:0-39 221:41-53 345:49-61 501:37-49 517:46-58 541:37-49
 @ ./node_modules/@aws-amplify/pubsub/lib-esm/Providers/index.js 15:0-45 15:0-45
 @ ./node_modules/@aws-amplify/pubsub/lib-esm/index.js 14:0-28 14:0-28
 @ ./node_modules/aws-amplify/lib-esm/index.js 27:0-45 27:0-45
 @ ./src/index.jsx 3:0-34 6:0-17

ERROR in ./node_modules/@aws-amplify/pubsub/node_modules/graphql/index.mjs 64:0-98:42
Module not found: Error: Can't resolve './utilities' in '/Users/mike/Projects/reactTemplate/node_modules/@aws-amplify/pubsub/node_modules/graphql'
Did you mean 'index.js'?
BREAKING CHANGE: The request './utilities' failed to resolve only because it was resolved as fully specified
(probably because the origin is a '*.mjs' file or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
 @ ./node_modules/@aws-amplify/pubsub/lib-esm/Providers/AWSAppSyncRealTimeProvider.js 90:0-39 221:41-53 345:49-61 501:37-49 517:46-58 541:37-49
 @ ./node_modules/@aws-amplify/pubsub/lib-esm/Providers/index.js 15:0-45 15:0-45
 @ ./node_modules/@aws-amplify/pubsub/lib-esm/index.js 14:0-28 14:0-28
 @ ./node_modules/aws-amplify/lib-esm/index.js 27:0-45 27:0-45
 @ ./src/index.jsx 3:0-34 6:0-17

webpack 5.6.0 compiled with 8 errors and 30 warnings in 14515 ms
ℹ ｢wdm｣: Failed to compile.

To Reproduce

git clone https://github.com/mmykhaylov/amplifyWebpack5Demo.git
yarn install
yarn dev

Look at the console and see 30 warnings and 8 errors

Expected behavior Build runs without errors or warnings

About this issue

  • Original URL
  • State: closed
  • Created 4 years ago
  • Reactions: 11
  • Comments: 27 (1 by maintainers)

Most upvoted comments

@rudyhadoux the workaround was implemented in webpack.config.ts under rules section, like this

...

module.exports = {
  mode: 'none',
  entry: './src/index.tsx',
  ...
  module: {
    rules: [
      // TODO: Remove the below rule for .mjs, once aws-amplify supports webpack 5
      {
        test: /\.m?js/,
        resolve: {
            fullySpecified: false
        }
      },
      ...
+32
jiyoon-koo on May 13, 2021

Solution for Quasar. Add in quasar.conf.js

chainWebpack (chain) {
        chain
          .module
          .rule('esm')
          .test(/\.m?jsx?$/)
          .resolve.set('fullySpecified', false)
      },
+5
fabien-lg on Jul 2, 2021

Thanks. The solution for Angular is https://www.npmjs.com/package/@angular-builders/custom-webpack

+3
rudyhadoux on May 13, 2021

I am trying to understand exactly what the change to the dependency is.

+1
walterobvio on Feb 26, 2022
Read more comments on GitHub
← amplify-js: Module not found: Can't resolve 'aws-crt' when using API in nextjs@13.2
amplify-js: Network Error when the app calls API.graphQL →