CSS Loader Invalid Options options should NOT have additional properties

Question

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

Answer 1

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

Answer 2

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!