I followed offical documentation to install vuetify, but I’ve got trouble with that.
When I am trying add vuetify to my project, I always get two types of errors:
First type:
JavaScript
x
22
22
1
ERROR in ./src/main/resources/static/js/pages/App.vue?vue&type=style&index=0&lang=css& (./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!.
2
/node_modules/sass-loader/dist/cjs.js??ref--2-3!./node_modules/vue-loader/lib??vue-loader-options!./src/main/resources/static/js/pages/App.vue?vue&type=style&index=0&lang=css&)
3
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
4
SassError: Expected newline.
5
╷
6
44 │ .app-main{
7
│ ^
8
╵
9
srcmainresourcesstaticjspagesApp.vue 44:10 root stylesheet
10
@ ./src/main/resources/static/js/pages/App.vue?vue&type=style&index=0&lang=css& (./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loade
11
r/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/dist/cjs.js??ref--2-3!./node_modules/vue-loader/lib??vue-loader-options!./src/main/resources/static/js/pages/App.vue?vue&typ
12
e=style&index=0&lang=css&) 2:26-348
13
@ ./node_modules/vue-style-loader!./node_modules/style-loader/dist/cjs.js!./node_modules/css-loader/dist/cjs.js!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules
14
/sass-loader/dist/cjs.js??ref--2-3!./node_modules/vue-loader/lib??vue-loader-options!./src/main/resources/static/js/pages/App.vue?vue&type=style&index=0&lang=css&
15
@ ./src/main/resources/static/js/pages/App.vue?vue&type=style&index=0&lang=css&
16
@ ./src/main/resources/static/js/pages/App.vue
17
@ ./src/main/resources/static/js/main.js
18
19
ERROR in ./src/main/resources/static/js/main.js
20
Module not found: Error: Can't resolve '/plugins/vuetify' in 'C:UserspingmIdeaProjectskursovayasrcmainresourcesstaticjs'
21
@ ./src/main/resources/static/js/main.js 5:0-39 14:11-18
22
P.S .app-main is my style class. Without vuetify it works fine.
Second type:
JavaScript
1
9
1
Module not found: Error: Can't resolve '/plugins/vuetify' in 'C:UserspingmIdeaProjectskursovayasrcmainresourcesstaticjs'
2
@ ./src/main/resources/static/js/main.js 5:0-39 13:11-18
3
i 「wdm」: Failed to compile.
4
Error from chokidar (/): Error: EBUSY: resource busy or locked, lstat 'C:DumpStack.log.tmp'
5
Error from chokidar (/): Error: EBUSY: resource busy or locked, lstat 'C:hiberfil.sys'
6
Error from chokidar (/): Error: EBUSY: resource busy or locked, lstat 'C:pagefile.sys'
7
Error from chokidar (/): Error: EBUSY: resource busy or locked, lstat 'C:swapfile.sys'
8
9
I am not sure what the affects are on changing errors, but they are changing when I change code in main.js file
package.json
JavaScript
1
19
19
1
import Vue from 'vue'
2
import VueResource from 'vue-resource'
3
import App from 'pages/App.vue'
4
import {connect} from "./util/ws";
5
import vuetify from '/plugins/vuetify' // path to vuetify export
6
7
if (frontendData.profile) {
8
connect()
9
}
10
11
Vue.use(VueResource)
12
13
new Vue({
14
el: '#app',
15
vuetify,
16
render: a => a(App)
17
}).$mount('#app')
18
19
My Webpack.config.js
JavaScript
1
64
64
1
const path = require('path');
2
const VueLoaderPlugin = require('vue-loader/lib/plugin');
3
4
module.exports = {
5
mode: 'development',
6
devtool: 'source-map',
7
entry: path.join(__dirname, 'src', 'main', 'resources', 'static', 'js', 'main.js'),
8
devServer: {
9
contentBase: './dist',
10
compress: true,
11
port: 8000,
12
allowedHosts: [
13
'localhost:8080'
14
],
15
stats: 'errors-only',
16
clientLogLevel: 'error'
17
},
18
module: {
19
rules: [
20
{
21
test: /.js$/,
22
exclude: /(node_modules|bower_components)/,
23
use: {
24
loader: 'babel-loader',
25
options: {
26
presets: ['@babel/preset-env']
27
}
28
}
29
},
30
{
31
test: /.vue$/,
32
loader: 'vue-loader'
33
},
34
{
35
test: /.css$/,
36
use: [
37
'vue-style-loader',
38
'style-loader',
39
'css-loader',
40
{
41
// Requires sass-loader@^8.0.0
42
options: {
43
implementation: require('sass'),
44
sassOptions: {
45
fiber: require('fibers'),
46
indentedSyntax: true // optional
47
},
48
},
49
},
50
]
51
}
52
]
53
},
54
plugins: [
55
new VueLoaderPlugin()
56
],
57
resolve: {
58
modules: [
59
path.join(__dirname, 'src', 'main', 'resources', 'static', 'js'),
60
path.join(__dirname, 'node_modules'),
61
],
62
}
63
}
64
Advertisement
Answer
Solving by adding this property to Webpack:
JavaScript
1
11
11
1
resolve: {
2
alias: {
3
plugins: path.resolve(__dirname, 'src/plugins/vuetify.js')
4
},
5
extensions: ['.js', 'jsx', '.css'],
6
modules: [
7
path.join(__dirname, 'src', 'main', 'resources', 'static', 'js'),
8
path.join(__dirname, 'node_modules'),
9
],
10
}
11
- Main.js
JavaScript
1
2
1
import vuetify from 'plugins'
2