CODEWITHSUNDEEP
javascriptaws-amplifyvuejs3viteaws-amplify-vue
Syed
Syed

Reputation: 16543

In vite + vue3 + TS project, AWS Amplify Failed to resolve components

I am having hard time to make AWS Amplify work with Vite.js

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

So, I added this script in index.html's head section

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

Now, I am getting this warning/error

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

You can see complete logs here: enter image description here

Upvotes: 7

Views: 3722

Answers (2)

Old Panda
Old Panda

Reputation: 1626

According to AWS Amplify doc, you need to add app.config.isCustomElement = tag => tag.startsWith('amplify-'); to your main.ts file.

Since you're using vite, you can also do so by following the vite example. The vite.config.ts file should be like

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

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

Upvotes: -1

Luke Halley
Luke Halley

Reputation: 315

I was able to fix the resolve component errors by creating a vue.config.js file in the app root directory and adding the following:

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

Upvotes: 3

Related Questions