Блог

Главная - Вопросы по программированию - В проекте vite vue3 TS AWS Amplify не удалось разрешить компоненты

В проекте vite vue3 TS AWS Amplify не удалось разрешить компоненты

#javascript #aws-amplify #vuejs3 #vite #aws-amplify-vue

#javascript #aws-amplify #vuejs3 #vite #aws-amplify-vue

Вопрос:

Мне трудно заставить AWS Amplify работать с Vite.js

 // First I was getting this error:
Uncaught ReferenceError: global is not defined

Итак, я добавил это script в index.html раздел «s» head 

 <script>
  var global = global || window;
  var Buffer = Buffer || [];
  var process = process || {
    env: { DEBUG: undefined },
    version: []
  };
</script>

Теперь я получаю это предупреждение / ошибку

 [Vue warn]: Failed to resolve component: amplify-sign-out 
[Vue warn]: Failed to resolve component: amplify-authenticator

Полные журналы можно посмотреть здесь:
введите описание изображения здесь

Ответ №1:

Я смог исправить ошибки компонента resolve, создав vue.config.js файл в корневом каталоге приложения и добавление следующего:

 module.exports = {
  chainWebpack: config => {
    config.module
      .rule('vue')
      .use('vue-loader')
      .tap(options => {
        options.compilerOptions = {
          ...(options.compilerOptions || {}),
          isCustomElement: tag => tag.startsWith('amplify-')
        };
        return options;
      });
  }
};

Комментарии:

1. Это сработало, спасибо за это. Просто примечание для всех остальных: мне пришлось перезапустить приложение, чтобы оно вступило в силу.

2. Это избавляет меня от ошибок, но аутентификатор не работает. Я ожидаю, что он появится при загрузке страницы, но я просто получаю свою страницу с ее содержимым.

Ответ №2:

Согласно документу AWS Amplify, вам необходимо добавить app.config.isCustomElement = tag => tag.startsWith('amplify-'); в свой main.ts файл.

Поскольку вы используете vite, вы также можете сделать это, следуя примеру vite. vite.config.ts Файл должен быть похож

 import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag.startsWith("amplify-"),
        },
      },
    }),
  ],
});