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

Question

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'

Mashburn

check your package.json file for package "@vue/cli-plugin-babel". If it is not there, then install it and try again. – Decompensation

It's already there... – Mashburn

have you managed to solve this? – Entree

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.. – Chondrite

It is Sep 2021, I still stumble on this problem, though I remember it used to work on this computer (with different updted version). As @Chondrite mentioned I do have the same problem but without the uppercase S. Nowadays, my Version of is @vue/cli-plugin-babel ^3.12.1 – Oppression

Answer 1

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

Longanimity

It's not working if project is created with command 'vue create my-project'. – Mashburn

Answer 2

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

Greengrocery

This answer sounds weak to me. I am not having any *.ts scripts at all. The 'try setting' is automatically done in the first first place by the vue create project setup with vue3 anyways. Answer Downgrade for me. – Oppression