Reputation: 16543
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:
Upvotes: 7
Views: 3722
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
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