I have this error Failed to compile. ./src/main.js Module not found: Error: Can't resolve '.plugins/vuetify' in 'C:\vue\testvueapp\src' but I have installed it
and this is my main.js
import Vue from 'vue';
import App from './App.vue';
import vuetify from '.plugins/vuetify';
Vue.config.productionTip = false;
new Vue({
vuetify,
render: (h) => h(App),
}).$mount('#app');
Seems like path issue. tryout below
import vuetify from '#/plugins/vuetify'
Use
import vuetify from './plugins/vuetify'
Notice the slightest of path difference before plugins here
the issue because dependency was not found. do following and reload the project will fix the issue
npm install --save vuetify/lib/framework
Solved Issue
Related
How can I install an external package in Rollup in VueJS. I'm trying to install VuePortal, but I need to use Vue.use(PortalVue), but I don't where put it.
I tried with a package called rollup-plugin-auto-external, and I put it in:
plugins: [
...
autoExternal(),
...
],
Also I put into the externals's object, but nothing.
Thanks
You don't need a rollup plugin to use PortalVue.
Vue.use(PortalVue) should go in the entry point file, where you setup the root Vue instance (e.g., main.js, index.js, app.js, etc.).
For example:
// main.js
import Vue from 'vue'
import App from './App.vue'
import PortalVue from 'portal-vue'
Vue.use(PortalVue)
new Vue({
render: h => h(App)
}).$mount('#app')
I am using Vuex and using store.js for the first time. In my main.js file I am using
import { store } from './store/store'
new Vue({
el: '#app',
store,
render: h => h(App)
})
and everytime I run this I keep getting this error.
ERROR in ./src/store/store.js
Module not found: Error: Can't resolve '.vue' in '/Users/briansantos/code/Vuex/src/store'
# ./src/store/store.js 1:0-23
# ./src/main.js
# multi main
ERROR in ./src/store/store.js
Module not found: Error: Can't resolve '.vuex' in '/Users/briansantos/code/Vuex/src/store'
# ./src/store/store.js 2:0-25
# ./src/main.js
# multi main
I have tried scouring the internet and have found several peopole saying that this is a dependency issue and I have checked for updates and with no luck have found an answer. Below is my store.js file in my store folder.
import Vue from '.vue';
import Vuex from '.vuex';
Vue.use(Vuex);
export default new Vuex.Store({
state: {
counter: 0
}
})
If anyone could help me understand what is happening and how to correct this. Here is the repo all you have to do is clone and npm install.
https://github.com/brianmsantos/Vuex
Your problem is with the imports of Vue packages. You have to remove the dot prefix from them, like so:
import Vue from 'vue';
import Vuex from 'vuex';
Those packages come from node_modules, thus don't need to be prefixed by .
Im using vue to import google maps to my application
but it does not let me run my application once i import it.
import Vue from 'vue'
import App from './App.vue'
import * as VueGoogleMaps from "vue2-google-maps";
Vue.use(VueGoogleMaps, {
load: {
key: "",
libraries: "places" // necessary for places input
}
});
new Vue({
el: '#app',
render: h => h(App)
})
and this is the error im getting
Failed to compile.
/Users/temporary/node_modules/vue2-google-maps/dist/components/infoWindow.vue
Module not found: Error: Can't resolve 'babel-loader' in '/Users/temporary/node_modules/vue2-google-maps/dist/components'
# /Users/temporary/node_modules/vue2-google-maps/dist/components/infoWindow.vue 4:0-161 5:0-174
# /Users/temporary/node_modules/vue2-google-maps/dist/main.js
# ./src/main.js
# multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js
Are you using vue-cli for this project? If so, you should be able to just do:
npm install --save-dev babel-loader
(or if you're using yarn)
yarn add --dev babel-loader
If you're not using vue-cli then you will still need to install babel-loader using the methods above, but you will also have to add it to your webpack config.
More on babel-loader:
From the Vue docs
More detailed example of babel-loader, vue, and webpack
Example webpack config, taken from the vue2-google-maps GitHub repo
When trying to run the application with npm run serve (on iOS), I am getting the following error:
This relative module was not found:
./src/main.js in multi (webpack)-dev-server/client?http://10.0.0.5:8081/sockjs-node ./node_modules/#vue/cli-service/node_modules/webpack/hot/dev-server.js ./src/main.js
Please bear with me, I am new to this.
I have tried a bunch of random stuff like checking for misspelling issues, reinstalling webpack, updating node, and nothing. I have no clue of what this error is about so I am not sure where to look at.
The main.js file looks like this:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store/store'
import './registerServiceWorker'
import * as VueGoogleMaps from "vue2-google-maps"
import VeeValidate from 'vee-validate'
import BootstrapVue from 'bootstrap-vue'
Vue.use(VueGoogleMaps, {
load: {
key: "AIzaSyCGiy39IZbj8oxvO4HHqSVjP5RmLSHl7mY",
libraries: "places" // necessary for places input
}
});
Vue.use(VeeValidate);
Vue.use(BootstrapVue);
Vue.config.productionTip = false;
new Vue({
router,
store,
beforeCreate() {
this.$store.commit('initialiseStore');
this.$store.dispatch('commons/initialize');
},
render: h => h(App)
}).$mount('#app')
I expect the live web server to display, but I am getting this compilation error and it is failing.
I faced a similar issue after and spent hours searching.
The issue occurred in my project when I tried to install vuetify using command vue add vuetify. Apparently, the in automatically changes the app entry property in webpack.config automatically.
You can either change the filename itself to main.js or change the webpack config through vue.config.js (by reading the vue cli documentation regararding webpack config).
You can check your webpack.config by using the command vue inspect.
],
entry: {
app: [
'./src/main.js'
]
}
}
I had a similar error, this worked for me but not sure you have the same issue. I found this in one of my webpack configuration files (usually named like webpack.dev.conf.js):
{
test: /\.js$/,
loader: 'babel-loader',
include: [
resolve('src'),
resolve('test'),
resolve('node_modules/webpack-dev-server/client')
]
},
I removed resolve('node_modules/webpack-dev-server/client') and it fixed that issue.
This is an old thread, but I ran across this recently after installing a new module to a Vue project. The problem went away when I updated all my other modules, too.
I have a project on github, I work on it at home where it works fine, but when I pull it onto another pc and run the necessary commands it fails on the module build.
main.js:
import Vue from 'vue'
import App from './App'
import router from './router'
import SuiVue from 'semantic-ui-vue';
import './assets/semantic/dist/semantic.min.css'
import './assets/sass/main.scss'
Vue.config.productionTip = false;
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
render: h => h(App)
});
Vue.use(SuiVue);
The invalid css error I get when I run npm run dev:
Module build failed:
import Vue from 'vue'
^
Invalid CSS after "i": expected 1 selector or at-rule, was "import Vue from 'vu"
in /Users/Developer/www/profile-site/src/main.js (line 1, column 1)
# multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js
Not sure if I am missing something somewhere when I pull in the project.
Here is the actual repository: https://github.com/RduPlessis/profile-site