How to use Quasar 2 with AWS Amplify?

Question

I have created the following boot file for Quasar in src/boot/amplify.js and added 'amplify' to quasar.conf.js:

import Amplify from 'aws-amplify';
import awsconfig from '../aws-exports';
import {
  applyPolyfills,
  defineCustomElements,
} from '@aws-amplify/ui-components/loader';

applyPolyfills().then(() => {
  defineCustomElements(window);
});
Amplify.configure(awsconfig);

But I get many import errors from the line import Amplify from 'aws-amplify';:

Module not found: Can't resolve imported dependency "./printError"        

 App •  ERROR  •  UI  in ./node_modules/graphql/error/GraphQLError.mjs    

And more -- I've gotten passed them with npm install --save graphql, but I then found many more errors for the import. It is easy to setup following Amplify docs using Vue 3 CLI and not Quasar.

Anyone had luck using Quasar or know what a possible solution might be?

Answer 1

is a webpack issue, check this: https://github.com/graphql/graphql-js/issues/2721#issuecomment-723008284

I solved it by adding to the quasar.conf.js

build: {
...
extendWebpack (cfg, {isServer, isClient}) {
        cfg.module.rules.push ({
          test: /\.m?js/,
          resolve: {
            fullySpecified: false,
            fallback: {crypto: false}
          }
        })
      }
    }
}

the "fallback : {crypto: false}" it is used to resolve the subsequent error about the missing dependency of crypto-js based on: https://stackoverflow.com/a/67076572/1550140