1

Working on my first Vue app, and I'm now having issues when I run the build script. It claims I have an unknown "minimize" property in the options object, but damned if I can find where. I'm assuming some sort of dependency conflict? Any thoughts on how to untangle this?

Error below:

ERROR in ./node_modules/css-loader/dist/cjs.js?minimize!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-329f0f9e","scoped":false,"hasInlineConfig":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue
Module build failed: ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'minimize'. These properties are valid:
   object { url?, import?, modules?, sourceMap?, importLoaders?, localsConvention?, onlyLocals?, esModule? }
    at validate (C:\code\my-vue-app\node_modules\css-loader\node_modules\schema-utils\dist\validate.js:85:11)
    at Object.loader (C:\code\my-vue-app\node_modules\css-loader\dist\index.js:34:28)
 @ ./node_modules/vue-style-loader!./node_modules/css-loader/dist/cjs.js?minimize!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-329f0f9e","scoped":false,"hasInlineConfig":false}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/App.vue 4:14-287
 @ ./src/App.vue
 @ ./src/main.js

Here is my package.json file:

{
  "name": "my-vue-app",
  "version": "1.0.0",
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "axios": "^0.19.2",
    "vue": "^2.5.11"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-stage-3": "^6.24.1",
    "cross-env": "^5.0.5",
    "css-loader": "^3.4.2",
    "file-loader": "^1.1.4",
    "node-sass": "^4.5.3",
    "sass-loader": "^6.0.6",
    "vue-loader": "^13.0.5",
    "vue-template-compiler": "^2.4.4",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  }
}

EDIT: Here is the webpack.config.js file as well. (Note: I commented out the webpack.LoaderOptionsPlugin bit; it had no effect.)

var path = require('path')
var webpack = require('webpack')

module.exports = {
  entry: './src/main.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'build.js'
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ],
      },
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader'
        ],
      },
      {
        test: /\.sass$/,
        use: [
          'vue-style-loader',
          'css-loader',
          'sass-loader?indentedSyntax'
        ],
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
            // the "scss" and "sass" values for the lang attribute to the right configs here.
            // other preprocessors should work out of the box, no loader config like this necessary.
            'scss': [
              'vue-style-loader',
              'css-loader',
              'sass-loader'
            ],
            'sass': [
              'vue-style-loader',
              'css-loader',
              'sass-loader?indentedSyntax'
            ]
          }
          // other vue-loader options go here
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file-loader',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    },
    extensions: ['*', '.js', '.vue', '.json']
  },
  devServer: {
    historyApiFallback: true,
    noInfo: true,
    overlay: true
  },
  performance: {
    hints: false
  },
  devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
  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"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      sourceMap: true,
      compress: {
        warnings: false
      }
    }),
    new webpack.LoaderOptionsPlugin({
      minimize: true
    })
  ])
}
7
  • 1
    show your webpack config. Probably you have in the config some problems. Commented Feb 11, 2020 at 19:04
  • Thanks, @Guarana. I've added it to the question. Commented Feb 11, 2020 at 19:18
  • try comment this code new webpack.LoaderOptionsPlugin({ minimize: true }) Commented Feb 11, 2020 at 19:31
  • yeah, that's the first thing I tried. No change. Commented Feb 11, 2020 at 19:45
  • you have the problem with production build or dev ? Commented Feb 11, 2020 at 20:31

2 Answers 2

1

If you're working on your first Vue app, you should really use the Vue CLI. It manages a basic Webpack configuration for you.

It comes with SCSS, SASS, and less support out of the box... as well as hot reloading, babel, jest, linting etc.

npx vue create my-app will give you a working application.

Most production apps use Vue CLI because managing your own loader dependencies like this is a sure-fire way to spend a lot of time configuring webpack instead of programming.

Sign up to request clarification or add additional context in comments.

5 Comments

Thanks for the tip; will research that now.
...I think what's happening in your error is that Vue's style loader doesn't support that version of the css style loader.
This kind of version mis-match is what Vue CLI is designed to solve
I think that it's good to understand how to use Webpack before just switching to using Vue CLI as a crutch.
I agree, but he's on Webpack 3 and has a version mismatch issue with various loaders that aren't documented extensively with how to handle backwards compatibility.
1

Try removing

new webpack.LoaderOptionsPlugin({
  minimize: true
})

This is an old plugin and I believe that it is passing an option minimize: true to css-loader. css-loader doesn't support this, so it is throwing an error.

1 Comment

Yeah, I tried that with no appreciable change in result.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.