Import errors using Quasar 2.0.2

[jackmuskopf]

Before opening, please confirm:

• [X] I have searched for duplicate or closed issues and discussions.
• [X] I have read the guide for submitting bug reports.
• [X] I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

Vue

Amplify APIs

Authentication

Amplify Categories

auth

Environment information

``` # Put output below this line Binaries: Node: 14.17.3 - C:\Program Files\nodejs\node.EXE Yarn: 1.22.10 - ~\AppData\Roaming\npm\yarn.CMD npm: 7.19.1 - C:\Program Files\nodejs\npm.CMD Browsers: Edge: Spartan (44.19041.1023.0), Chromium (91.0.864.67) Internet Explorer: 11.0.19041.1 npmPackages: @aws-amplify/api-graphql: ^2.0.5 => 2.0.5 @aws-amplify/pubsub: ^4.0.5 => 4.0.5 @aws-amplify/ui-components: ^1.6.1 => 1.6.1 @babel/eslint-parser: ^7.13.14 => 7.14.7 @quasar/app: ^3.0.0 => 3.0.0 @quasar/extras: ^1.0.0 => 1.10.7 aws-amplify: ^4.1.3 => 4.1.3 axios: ^0.21.1 => 0.21.1 core-js: ^3.6.5 => 3.15.1 eslint: ^7.14.0 => 7.29.0 eslint-config-prettier: ^8.1.0 => 8.3.0 eslint-plugin-vue: ^7.0.0 => 7.12.1 eslint-webpack-plugin: ^2.4.0 => 2.5.4 graphql: ^14.0.0 => 14.0.0 quasar: ^2.0.0 => 2.0.0 vuex: ^4.0.1 => 4.0.2 workbox-webpack-plugin: ^6.1.5 => 6.1.5 npmGlobalPackages: @aws-amplify/cli: 5.1.0 @quasar/cli: 1.2.1 @vue/cli: 4.5.13 npm: 7.19.1 serverless-layers: 2.3.3 serverless-plugin-canary-deployments: 0.6.0 serverless: 2.51.1 yarn: 1.22.10 ```

Describe the bug

When running quasar dev to serve the app, I get

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

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

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

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

 App •  ERROR  •  UI  in ./node_modules/graphql/index.mjs

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

 App •  ERROR  •  UI  in ./node_modules/graphql/index.mjs

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

This is caused by the line import Amplify from 'aws-amplify'; that I use in the Quasar boot config src/boot/amplify.js. The boot config takes the place of what is placed in main.js per https://docs.amplify.aws/ui/auth/authenticator/q/framework/vue#installation

Expected behavior

The imports should resolve.

Reproduction steps

1. Install Quasar CLI https://quasar.dev/start/quasar-cli
2. Create a Quasar app

   mkdir hello-world
   cd hello-world
   quasar create # follow the prompts
   amplify init # follow the prompts

3. Setup Quasar boot, similar to https://docs.amplify.aws/ui/auth/authenticator/q/framework/vue#recommended-usage

   npm install --save aws-amplify @aws-amplify/ui-components
   quasar new boot amplify

4. Configure Amplify following the code snippets:

src/boot/amplify.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);

// export default boot(({ app }) => {

//     app.config.isCustomElement = tag => tag.startsWith('amplify-');
// })

Add 'amplify' to quasar.conf.js in the boot array:

    boot: [
      'amplify'
    ],

Code Snippet

// Put your code below this line.

Log output

``` // Put your logs below this line App • ERROR • UI in ./node_modules/graphql/error/GraphQLError.mjs Module not found: Can't resolve imported dependency "./printError" App • ERROR • UI in ./node_modules/graphql/error/GraphQLError.mjs Module not found: Can't resolve imported dependency "../language/location" App • ERROR • UI in ./node_modules/graphql/index.mjs Module not found: Can't resolve imported dependency "./graphql" App • ERROR • UI in ./node_modules/graphql/index.mjs Module not found: Can't resolve imported dependency "./type" App • ERROR • UI in ./node_modules/graphql/index.mjs ... ```

aws-exports.js

No response

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

[ThisIsHermanCheng]

In quasar.conf.js, try to add to following code in the block 'build' chain.module.rule('esm').test(/\.m?jsx?$/).resolve.set('fullySpecified', false)

[jackmuskopf]

Yes! That seems to work, specifically under 'build' in the chainWebpack function. Thank you!

Would you expect that code should be removed after improvements to amplify-js or quasar? Or should it be necessary when mixing the two?

[ThisIsHermanCheng]

Vue CLI is working on it https://github.com/vuejs/vue-cli/blob/next/packages/%40vue/cli-service/lib/config/base.js#L16-L21, I think quasar will improve it later on.

[jackmuskopf]

Awesome - thanks again!

[joppehoekstra]

In quasar.conf.js, try to add to following code in the block 'build' chain.module.rule('esm').test(/\.m?jsx?$/).resolve.set('fullySpecified', false)

This does not seem to work for me unfortunately. Any updates on when Quasar is addressing this?

[bfreed]

In quasar.conf.js, try to add to following code in the block 'build' chain.module.rule('esm').test(/\.m?jsx?$/).resolve.set('fullySpecified', false)

This does not seem to work for me unfortunately. Any updates on when Quasar is addressing this?

The full line, combining what Herman and Jack said is: build: { ... lots of stuff ..., chainWebpack: chain => chain.module.rule('esm').test(/.m?jsx?$/).resolve.set('fullySpecified', false), ... potentially more stuff ... }

[github-actions[bot]]

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.