Vue cli 3 - Cannot find module '@vue/cli-plugin-babel'

6
votes

I am using vue cli 3 with typescript support. Actually, i'm trying to create web component using vuejs.

main.ts

import Vue from 'vue';
import './plugins/vuetify';
import App from './App.vue';
import router from './router';
import store from './store';
import wrap from '@vue/web-component-wrapper';

import RoleManagement from './views/role-management/RoleManagement.vue';

const CustomElement = wrap(Vue, RoleManagement);
window.customElements.define('custom-component', CustomElement);

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount('#app');

Command to create web component is as follows,

vue-cli-service build --target wc --name custom-component ./src/main.ts

After this getting error,

Cannot find module '@vue/cli-plugin-babel'

2
typescriptbabeljsweb-componentvue-cli-3
check your package.json file for package "@vue/cli-plugin-babel". If it is not there, then install it and try again. – Rubanraj Ravichandran
It's already there... – Mangesh Daundkar
have you managed to solve this? – Buksy
This issue is re-occuring it seems. The weird thing is that in the babel config it wants @vue/cli-pluginS-babel/preset, with emphasis on the S, as the package name is without the S. Don't know if this has any bearing on it.. – Nickvda

2 Answers

1
votes

facing this issue with v3.1.2 but it works when i downgrade to v3.1.0 (with a warning that this version is no longer maintained) a temporary work around.This can be a possibility to your problem

0
votes

It seems that doesn't run when the vue-cli-service is called directly. Somehow it can be workarounded by calling via npm script.

Why don't you try setting

scripts: {
   build: "vue-cli-service build"
}

in your package.json and try later with

npm run build --target wc --name custom-component ./src/main.ts