New nativescript-vue developer here...
I am suddenly getting tns build errors on every /components/*.vue file when I run my normal build routine:
$ rm -rf node_modules/ hooks/ platforms/ package-lock.json
$ tns build ios --bundle --env.config dev
ERROR in ./components/Startup.vue?vue&type=style&index=0&lang=css& (../node_modules/nativescript-dev-webpack/style-hot-loader.js!../node_modules/nativescript-dev-webpack/apply-css-loader.js!../node_modules/css-loader/dist/cjs.js??ref--1-2!../node_modules/vueloader/lib/loaders/stylePostLoader.js!../node_modules/vue-loader/lib??vue-loader-options!./components/Startup.vue?vue&type=style&index=0&lang=css&)
Module build failed (from ../node_modules/css-loader/dist/cjs.js):
ValidationError: CSS Loader Invalid Options
options should NOT have additional properties
at validateOptions (/Users/.../node_modules/css-loader/node_modules/schema-utils/src/validateOptions.js:32:11)
at Object.loader (/Users/.../node_modules/css-loader/dist/index.js:44:28)
@ ./components/Startup.vue?vue&type=style&index=0&lang=css& 1:0-371 1:387-390 1:392-760 1:392-760
@ ./components/Startup.vue
@ ./router/index.js
@ ./app.js
This appears to be related to the UglifyJsPlugin that comes with Nativescript. In my webpack.config.js:
const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
...
const config = {
mode: mode,
context: appFullPath,
externals,
...
minimize: Boolean(production),
minimizer: [
new UglifyJsPlugin({
parallel: true,
cache: true,
uglifyOptions: {
output: {
comments: false,
},
compress: {
// The Android SBG has problems parsing the output
// when these options are enabled
'collapse_vars': platform !== "android",
sequences: platform !== "android",
},
},
}),
],
I don't know why this is failing. Environment:
I finally found the solution, posting here for others who may need help. Turns out, according to Nativescript, Webpack needed to be upgraded. Running this did the trick and allowed me to build and run again: ./node_modules/.bin/update-ns-webpack --deps --configs