An error with extract-text-webpack-plugin@3.0.0（throw new _ValidationError2.default(ajv.errors, name)）

Question

An error with extract-text-webpack-plugin@3.0.0（throw new _ValidationError2.default(ajv.errors, name)）

Closed this issue 8 years ago · 35 comments

I am getting an error when it came time to generate the css file.

// webpack v3.1.0
// extract-text-webpack-plugin v3.0.0
\node_modules\schema-utils\dist\validateOptions.js:40 throw new _ValidationError2.default(ajv.errors, name);

when I use extract-text-webpack-plugin@2.1.2,the program is running normally

There is my config

{
  test: /\.scss$/,
  exclude: [path.resolve(__dirname, "node_modules"), path.resolve(__dirname, "/client/*/pages")], 
  use: ExtractTextPlugin.extract({
    fallbackLoader: 'style-loader',
    use: ['css-loader','postcss-loader','sass-loader']
  })
},

nelisbijl commented 8 years ago

Me too

javiercaste commented 8 years ago

Following

Answer 1 · 2017-07-11T11:03:14.000Z

@irowbin Thanks, but the problem still exists!

Answer 2 · 2017-07-11T11:10:36.000Z

@deot can your provide minimum reproducible test repo?

Answer 3 · 2017-07-11T17:09:34.000Z

We can't debug based on a snippet from a config, a minimal projects that frames the issue will be necessary.

Answer 4 · 2017-07-11T18:12:40.000Z

I'm also experiencing this issue.

Answer 5 · 2017-07-12T13:24:16.000Z

@nelisbijl can your provide minimum reproducible test repo?

Answer 6 · 2017-07-12T13:32:06.000Z

I am fairly new to webpack. Following examples from the internet without really understanding what's happening

Answer 7 · 2017-07-12T16:31:06.000Z

@d3viant0ne @evilebottnawi
I've created a sample repo illustrating the problem: The link has been deleted

Answer 8 · 2017-07-12T16:37:37.000Z

 if (!ajv.validate(schema, options)) {
    throw new _ValidationError2.default(ajv.errors, name);
  }

The schema and options that are failing the validation

schema { type: 'object',
  additionalProperties: false,
  properties: 
   { allChunks: { type: 'boolean' },
     disable: { type: 'boolean' },
     omit: { type: 'boolean' },
     remove: { type: 'boolean' },
     fallback: { type: [Object] },
     filename: { type: 'string' },
     use: { type: [Object] },
     publicPath: { type: 'string' } } }

options { loader: 'css-loader' }

The loader option was removed from the schema here:
7ae32d9#diff-939b6c88924565b1f2a28ada62e3027e

That obviously might not be the root cause, just investigation

Answer 9 · 2017-07-12T20:04:17.000Z

To @joemcloE's point, fallBackLoader was deprecated in a previous major release and removed in the following.

You are failing on a schema validation error, change the old fallbackLoader syntax to fallback and everything works just fine.

It's worth noting, you are going to run into the same thing with loader (old) vs. use (new)

Answer 10 · 2017-07-12T20:55:53.000Z

@d3viant0ne Thanks,
Sorted it for me.

...Note to self, pay attention to depreciation warnings.

Thanks for the help

Answer 11 · 2017-07-13T01:22:06.000Z

Sorry，it's my fault

Answer 12 · 2017-07-16T04:02:23.000Z

Im using 'use:' and changed to 'fallback' but still seem to be havin this issue

Answer 13 · 2017-07-16T04:04:52.000Z

nvm i got it working with 'use:' inside the extract object

Answer 14 · 2017-07-16T20:50:08.000Z

worked for me in this way: change fallbackLoader to fallback

{
  test: /\.scss$/,
  exclude: [path.resolve(__dirname, "node_modules"), path.resolve(__dirname, "/client/*/pages")], 
  use: ExtractTextPlugin.extract({
    fallback: 'style-loader',
    use: ['css-loader','postcss-loader','sass-loader']
  })
},

Answer 15 · 2017-07-17T20:00:28.000Z

@carlitux did you defined the plugins. I defined as like you and defined the plugins like the below and webpack keep running without result.

plugins: [ 
        new ExtractTextPlugin({
            filename: path.resolve(__dirname, 'Host/Build/Style/[name].bundle.css')
        })  
    ]

Answer 16 · 2017-07-18T00:54:21.000Z

@ndeen86 this is my setup

      test: /\.css$/,
      loader: ExtractTextPlugin.extract({
        fallback: "style-loader",
        use: [
          {
            loader: 'css-loader',
            options: {
              sourceMap: true,
              localIdentName: '[local]___[hash:base64:5]',
              importLoaders: 2,
              modules: true,
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              plugins: (loader) => [
                require('postcss-import')({
                  root: loader.resourcePath,
                }),
                require('postcss-mixins')(),
                require('postcss-each')(),
                require('postcss-cssnext')({
                  features: {
                    customProperties: {
                      variables: require('../src/theme/variables.js'),
                    }
                  }
                }),
              ],
            } ,
          }]
        // publicPath: "/assets" // Overrides output.publicPath
      }),

Answer 17 · 2017-08-03T14:33:27.000Z

I was using the deprecated

        test: /\.scss/, include: SRC_DIR, loader:
          ExtractTextPlugin.extract({ loader: ['css-loader', 'sass-loader'] }) // loader is deprecated
      },

but changing it to

        test: /\.scss/, include: SRC_DIR, loader:
          ExtractTextPlugin.extract({ use: ['css-loader', 'sass-loader'] }) // use is what I should use. hah
      },

fixed it!!

Answer 18 · 2017-08-26T18:34:35.000Z

I get the same error, even though it seems i use fallback correctly:

here's the repo

$ npm run dist

> fishky@1.0.0 dist E:\Front-End Projects\fishky for bold guy
> cross-env NODE_ENV=production webpack -p

E:\Front-End Projects\fishky for bold guy\node_modules\schema-utils\dist\validateOptions.js
:40
    throw new _ValidationError2.default(ajv.errors, name);
    ^

false
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! fishky@1.0.0 dist: `cross-env NODE_ENV=production webpack -p`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the fishky@1.0.0 dist script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output
 above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\s\AppData\Roaming\npm-cache\_logs\2017-08-26T18_20_04_309Z-debug.log

It happens only when i run my dist script.

"scripts": {
    "dev": "webpack",
    "dist": "cross-env NODE_ENV=production webpack -p"
  }

These are the parts concerning ExtractTextPlugin. I believe it's some sort of incompatibility between cross-env and ExtractTextPlugin, because the same project without handling CSS using ExtractTextPlugin works. But hey, i need my styles :( .

{
  test: /\.css$/,
  use: ExtractTextPlugin.extract({
      fallback: 'style-loader', 
      use: ['css-loader']
    })

}

  // ...

plugins: [ new ExtractTextPlugin('styles/[name].css')]

Dependencies related to the issue:

 "cross-env": "^5.0.1"
 "extract-text-webpack-plugin": "2.1.2"
 "webpack": "^3.5.5"

Answer 19 · 2017-08-28T08:00:41.000Z

@sebhewelt I have the same issue.

What I did:
commented Line 39-41 in validateOptions.js:


if (!ajv.validate(schema, options)) {
    throw new _ValidationError2.default(ajv.errors, name);
  }

after that you will get the error messages.
I had to replace


{
  test: /\.css$/,
  use: ExtractTextPlugin.extract({
      fallback: 'style-loader', 
      use: ['css-loader']
    })

}

with:

{
  test: /\.css$/,
  use: ExtractTextPlugin.extract({
      fallback: 'style-loader', 
      loader: ['css-loader']
    })

}

But now I need to refactor CSS where i include background images, as path gets not resolved.

Answer 20 · 2017-09-08T21:09:55.000Z

@sebhewelt, most likely something else is not valid in your webpack config file (at least that was my case).
Open this file
E:\Front-End Projects\fishky for bold guy\node_modules\schema-utils\dist\validateOptions.js
and right before this line
throw new _ValidationError2.default(ajv.errors, name);
add
console.log(ajv.errors)
and rerun your build commands. It should give you a pretty good idea what is wrong.

Answer 21 · 2017-10-05T13:38:21.000Z

I had the same issue and finally I solve it. First of all go to https://webpack.js.org/plugins/extract-text-webpack-plugin/#extracting-sass-or-less there is the answer. you have just to change a little thing and install the latest version. The change you have to make are, change the syntax fallbackloader to fallback, change loader to user. and instead to of writing an option such as //if you want to pass in options, you can do so:
//new ExtractTextPlugin({
// filename: 'style.css'
//})
you can change it to this new ExtractTextPlugin('style.css'), just put in your mind that you can still have these options if you prefer to. The webpack.js.org explain it very well and you check it believe me you are going to do it just don't be afraid of trying.

I hope my answer find you well, good luck

Answer 22 · 2017-11-02T01:44:34.000Z

As @snoo-mpl said,

comment Line 39-41 in validateOptions.js:

if (!ajv.validate(schema, options)) {
    throw new _ValidationError2.default(ajv.errors, name);
}

and then you will get the exact error.

Answer 23 · 2017-11-08T08:10:47.000Z

Getting the same error.

Answer 24 · 2017-11-14T08:19:18.000Z

@mittalyashu Did you try the approach suggested by @MaxKramnik? It will help you to track down the issue. It helped me a lot. 🎉

Answer 25 · 2017-11-21T13:40:08.000Z

Seriously! Why they haven't added that in the original code in first place? Hiding useful and well detailed error messages so they can throw a vague unhandled exception?

Answer 26 · 2017-11-21T19:19:12.000Z

@totymedli I made issue #667 and pull request #668 for exactly that. Throwing on those errors and outputting them breaks a lot of the tests though. Looking into why now.

Answer 27 · 2017-11-21T23:01:54.000Z

@dinkzilla Thanks! I made some investigations too and I realized that the exception comes from the schema-utils package whose readme doesn't even mention that it can throw an exception, so I guess the author didn't notice that he have to handle one. I wanted to write a try-catch then display fix for it too but you were faster, so props to you!

Answer 28 · 2017-12-06T06:22:42.000Z

Since Loader is deprecetaed in version 3 of webpack please try using
fallback in code instead of fallbackLoader
cheers
thanks

Answer 29 · 2017-12-14T15:28:42.000Z

In my case, it was UglifyJsPlugin is incorrect, changed it from:

      new UglifyJsPlugin({
        parallel: true,
        uglifyOptions: {
          ie8: false,
          ecma: 6,
          warnings: true,
          mangle: true, // debug false
          output: {
            comments: false,
            beautify: false,  // debug true
          }
        },
        warnings: true, // this was the issue 
      }),

To:

      new UglifyJsPlugin({
        parallel: true,
        uglifyOptions: {
          ie8: false,
          ecma: 6,
          warnings: true,
          mangle: true, // debug false
          output: {
            comments: false,
            beautify: false,  // debug true
          }
        }
      }),

Actually, I added this console.log(schema, ajv.errors); inside validateOptions.js file, to know where the problem starts, big thanks to @MaxKramnik

Answer 30 · 2017-12-20T07:09:13.000Z

Changing version from "uglifyjs-webpack-plugin": "^1.0.1" to "uglifyjs-webpack-plugin": "^0.4.6" fixed the issue

I thing the new version has some issues

Answer 31 · 2018-02-14T13:30:41.000Z

Tried to setup
https://github.com/Semantic-Org/Semantic-UI-React/tree/master/examples/webpack3
and it broke ..

TypeError: Cannot read property 'forEach' of undefined
at new ValidationError (/home/pratik/Documents/development/assignments/webpack3/node_modules/schema-utils/dist/ValidationError.js:28:9)
at validateOptions (/home/pratik/Documents/development/assignments/webpack3/node_modules/schema-utils/dist/validateOptions.js:40:11)
at new ExtractTextPlugin (/home/pratik/Documents/development/assignments/webpack3/node_modules/extract-text-webpack-plugin/dist/index.js:60:33)
at Object. (/home/pratik/Documents/development/assignments/webpack3/config/webpack.config.common.js:28:21)
at Module._compile (module.js:660:30)
at Object.Module._extensions..js (module.js:671:10)
at Module.load (module.js:573:32)
at tryModuleLoad (module.js:513:12)
at Function.Module._load (module.js:505:3)
at Module.require (module.js:604:17)
at require (internal/module.js:11:18)
at Object. (/home/pratik/Documents/development/assignments/webpack3/config/webpack.config.prod.js:12:22)
at Module._compile (module.js:660:30)
at Object.Module._extensions..js (module.js:671:10)
at Module.load (module.js:573:32)
at tryModuleLoad (module.js:513:12)

Answer 32 · 2018-02-18T23:57:52.000Z

@pratikt-cuelogic I just encountered the same (was working from their linked custom css + webpack tutorial). Migrate any loaders to rules/use, and voila.

Answer 33 · 2018-04-06T02:09:35.000Z

Getting same error:

node_modules/extract-text-webpack-plugin/node_modules/schema-utils/dist/validateOptions.js:40
throw new _ValidationError2.default(ajv.errors, name);

webpack.config.js file:

const path = require('path');
var webpack = require('webpack');
var htmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
entry: './src/app.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app.bundle.js'
},
devServer: {
contentBase: path.join(__dirname, "/dist"),
compress: true,
port: 3000,
hot: true,
stats: "errors-only",
open: true
},
module:{
rules: [
{
test: /.js$/,
exclude: /node_modules/,
use: 'babel-loader'
},
{
test: /.css$/,
use:[
"style-loader" , "css-loader"
]
},
{
test: /.scss$/,
use: ExtractTextPlugin.extract({
fallbackLoader: 'style-loader',
loader: [
'css-loader', 'sass-loader'
],
publicPath: '/dist'
})
}
]
},
plugins: [
new htmlWebpackPlugin({
title: 'Webpack template html only',
template: './src/index.ejs',
minify: {
collapseWhitespace: true
},
hash: true
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
new ExtractTextPlugin({
filename: 'app.css',
disable: false,
allChunks: true
})
]

};

How to fix this?

Thanks.