CSS Loader Invalid Options options should NOT have additional properties

3
votes

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

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:

  • OS X 10.14.5
  • tns: 5.3.4
  • nativescript: 5.4.2
3
webpacknativescript-vue
you seem a more skilled developer than me, why do you remove all those files? – TomG
I don't know about being more skilled...I rm them just to make sure I have a clean slate when I run into build issues. – sonoerin

3 Answers

2
votes

If you are using the Webpack css-loader version ^3.0.0, you'll have to slightly update your webpack.config.

take note of the 'Here--->' in the code below. Hope this helps.

module.exports = {
  entry: `${SRC_DIR}`,
  output: {
    filename: 'bundle.js',
    path: `${DIST_DIR}`,
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        loader: 'style-loader',
      },
      {
        test: /\.css$/,
        loader: 'css-loader',
        options: {
Here--->   modules: {
Here--->    mode: 'local',
Here--->    localIdentName: '[local]--[hash:base64:5]',
          },
        },
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
};

Also, If you are working with a React project, you may need to update your component style name. the newer versions of react-scripts prefer the [name].module.css file naming convention.

This link explains how. https://facebook.github.io/create-react-app/docs/adding-a-css-modules-stylesheet

1
votes

I have no experience with Vue, but I had a similar issue when I updated the dependencies of my React project, using a custom Webpack configuration.

CSS Loader has updated to 3.0, and they changed their spec somewhat. If you have access to a webpack config file, you maybe will see something similar to this:

{
    loader: "css-loader",
    options: {
        modules: true,
        localIdentName: "..."
    }
}

And that should be changed to something like this:

{
    loader: "css-loader",
    options: {
        modules: {
            localIdentName: "..."
        }
    }
}

Note that the "..." part will be some kind of pattern like "[hash:base64:5]", not literally a "...".

This may or may be the specific problem, as there are other breaking changes apart from that one. You can find the list of breaking configuration changes here: https://github.com/webpack-contrib/css-loader/releases

Hope this helps!

0
votes

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