如何在Quasar 2中集成使用AWS Amplify？解决导入报错问题

1. 修复依赖版本 #

卸载现有graphql包，安装Amplify兼容的v15版本：
npm uninstall graphql && npm install --save-dev graphql@15.8.0

2. 调整Quasar构建配置 #

如果使用Webpack版Quasar，修改quasar.conf.js的build配置块，新增如下规则：

build: {
  // 原有配置保留，新增以下内容
  transpileDependencies: ['aws-amplify', '@aws-amplify', '@aws-amplify/ui-components'],
  extendWebpack (cfg) {
    cfg.module.rules.push({
      test: /\.mjs$/,
      include: /node_modules/,
      type: 'javascript/auto',
      resolve: {
        fullySpecified: false
      }
    })
  }
}

如果使用Vite版Quasar，修改vite.config.js添加依赖预构建配置：

export default defineConfig({
  optimizeDeps: {
    include: ['aws-amplify', '@aws-amplify/*']
  }
})

3. 修正Amplify导入语法 #

修改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);

4. 清理缓存重启服务 #

执行以下命令清理构建缓存后重启开发服务：
rm -rf node_modules/.cache && quasar dev
完成上述操作后所有导入错误均可解决。

内容的提问来源于stack exchange，提问作者Jack