When i compile my Vue project it stops at 40% and doesnt compile any further.
I already know that it has to do with the use of vuetify in this component.
<template>
<v-form>
<v-text-field placeholder="Username" solo></v-text-field>
<v-text-field placeholder="Password" type="password" solo></v-text-field>
</v-form>
</template>
<script lang="ts">
import { Vue } from 'vue-property-decorator'
import Component from 'vue-class-component';
@Component
export default class Login extends Vue {
}
</script>
<style scoped>
v-form {
display: flex;
justify-content: space-between;
}
</style>
i dont use vuetify in any other component.
I followed the installation guide for vuetify with webpack. https://vuetifyjs.com/en/getting-started/installation/#webpack-install
I have Vuetify 2.5.14 (also didnt work with 2.5.10), Webpack 4.46.0, Vue 2.6.14, using prerendering SPA Plugin (if that matters...).
Heres my configuration:
package.json
{
"name": "project",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.5",
"prerender-spa-plugin": "^3.4.0",
"vue": "^2.6.11",
"vue-class-component": "^7.2.3",
"vue-property-decorator": "^9.1.2",
"vue-router": "^3.2.0",
"vuetify": "^2.5.14",
"vuex": "^3.4.0"
},
"devDependencies": {
"@typescript-eslint/eslint-plugin": "^4.18.0",
"@typescript-eslint/parser": "^4.18.0",
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-typescript": "~4.5.0",
"@vue/cli-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/eslint-config-standard": "^5.1.2",
"@vue/eslint-config-typescript": "^7.0.0",
"deepmerge": "^4.2.2",
"eslint": "^6.7.2",
"eslint-plugin-import": "^2.20.2",
"eslint-plugin-node": "^11.1.0",
"eslint-plugin-promise": "^4.2.1",
"eslint-plugin-standard": "^4.0.0",
"eslint-plugin-vue": "^6.2.2",
"sass": "^1.32.13",
"sass-loader": "^10.2.0",
"typescript": "~4.1.5",
"vue-cli-plugin-vuetify": "~2.4.3",
"vue-template-compiler": "^2.6.11",
"vuetify-loader": "^1.7.0"
}
}
node_modules/vuetify-loader/dev4/webpack-config.js
var path = require('path')
var webpack = require('webpack')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
const isProd = process.env.NODE_ENV === 'production'
function sassLoaderOptions (indentedSyntax = false) {
return {
implementation: require('sass'),
additionalData: `@import "~@/_variables.scss"` + (indentedSyntax ? '' : ';'),
sassOptions: { indentedSyntax },
}
}
module.exports = {
devtool: 'source-map',
mode: isProd ? 'production' : 'development',
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.s(c|a)ss$/,
use: [
'vue-style-loader',
'css-loader',
{
loader: 'sass-loader',
// Requires sass-loader@^7.0.0
options: {
implementation: require('sass'),
indentedSyntax: true // optional
},
// Requires >= sass-loader@^8.0.0
options: {
implementation: require('sass'),
sassOptions: {
indentedSyntax: true // optional
},
},
},
],
},
{
test: /\.vue$/,
loader: 'vue-loader',
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules\/(?!(vuetify)\/)/
},
{
test: /\.sass$/,
use: [
'vue-style-loader',
{ loader: 'css-loader', options: { esModule: false } },
{ loader: 'sass-loader', options: sassLoaderOptions(true) }
]
},
{
test: /\.scss$/,
use: [
'vue-style-loader',
{ loader: 'css-loader', options: { esModule: false } },
{ loader: 'sass-loader', options: sassLoaderOptions() }
]
},
{
test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)(\?.*)?$/,
loader: 'url-loader',
options: { limit: 1024 }
}
]
},
resolve: {
alias: {
'vue$': path.resolve(__dirname, './node_modules/vue/dist/vue.runtime.esm.js'),
'@': path.resolve(__dirname, 'src')
},
extensions: ['*', '.js', '.vue', '.json']
},
plugins: [
new VueLoaderPlugin(),
new VuetifyLoaderPlugin({
progressiveImages: true
}),
new BundleAnalyzerPlugin({
analyzerMode: 'static',
openAnalyzer: false
})
],
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true
},
performance: {
hints: false
},
optimization: {
concatenateModules: false
}
}
if (isProd) {
module.exports.devtool = '#source-map'
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
})
])
}
vuetify.ts
import Vue from 'vue'
import Vuetify from 'vuetify/lib/framework'
Vue.use(Vuetify)
export default new Vuetify({
})
main.ts
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import vuetify from './plugins/vuetify'
Vue.config.productionTip = false
new Vue({
router,
store,
vuetify,
render: h => h(App)
}).$mount('#app')
Does anyone know why my compilation breaks at 40% and what it has to do with my setup, especially regarding vuetify?