1 year ago

#239160

test-img

bangarangguy

Failed to resolve component: amplify-s3-image , but it actually works

I get this warning in my Chrome Console:

runtime-core.esm-bundler.js?d2dd:38 [Vue warn]: The `compilerOptions` config option is only respected when using a build of Vue.js that includes the runtime compiler (aka "full build"). Since you are using the runtime-only build, `compilerOptions` must be passed to `@vue/compiler-dom` in the build setup instead.

and then this warning:

[Vue warn]: Failed to resolve component: amplify-s3-image
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. 

But the component actually works, since it shows the image from S3 how it's supposed to.

This is what my main.js looks like:

import { createApp } from 'vue'
import App from './App.vue' 
import router from './router'
import Amplify from "aws-amplify";
import AmplifyVue from '@aws-amplify/ui-vue';
import store from './store'
import awsconfig from './aws-exports';
import aws_exports from './aws-exports';
import { applyPolyfills, defineCustomElements } from '@aws-amplify/ui-components/loader';

Amplify.configure(awsconfig);
//Amplify.configure(aws_exports);

applyPolyfills().then(() => {
    defineCustomElements(window);
  });


const app = createApp(App).use(router).use(store).use(AmplifyVue)
app.config.compilerOptions.isCustomElement = tag => tag.startsWith('amplify-');
app.mount('#app');

and this is in my vue.config.js:

const { defineConfig } = require('@vue/cli-service')

module.exports = defineConfig({
    transpileDependencies: true
  },
)

module.exports = {
  chainWebpack: config => {
      config
          .plugin('html')
          .tap(args => {
              args[0].title = "Opensquare";
              return args;
          },options => {
            options['compilerOptions'] = {
              ...options.compilerOptions || {},
              isCustomElement: tag => tag.startsWith('amplify-')
            }
            return options;
          })
  }
}

What am I doing wrong? It's not blocking, since the component actually works, but reading the Console with this WARN popping up is a nightmare.

vue.js

amazon-s3

aws-amplify

amplifyjs

0 Answers

Your Answer

Accepted video resources