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

Question

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:

score 3 · Answer 1 · answered Apr 28 '21 at 12:03

3

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;
      });
  }
};

answered Apr 28 '21 at 12:03

Luke Halley

305
1
2
8

This worked, thanks for that. Just a note for anyone else, I had to restart the app for it to take effect. – Chris Owens Jul 31 '21 at 09:45
This gets rid of the errors for me, but the authenticator is not working. I'm expecting it to popup when the page is loaded, but I'm just getting my page with its content. – Todd Hale May 02 '22 at 23:50

score -1 · Answer 2 · answered Jun 27 '21 at 05:11

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-"),
        },
      },
    }),
  ],
});

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

2 Answers2