Webpack NPM module build failed ValidationError: CSS Loader ...does not match the API schema

Question

I have updated all my packages to the latest versions, but when I run my project script, I get an error that is somehow connected to my css file. I have checked pathfile names and any errors within my css itself, however it all looks exactly like its suppose to.

In the error it says that the CSS Loader has been initialized using an options object that does not match the API schema.

I have tried removing the package.json and the node-modules directory to reinstall them again, however that did not fix the problem.

I am not knowledgeable with webpack and NPM as I am currently learning my way. I have run into other small errors in the past which I have rectified myself, however this one has got me totally stumped!

Please help.

error:

npm run dev          

> [email protected] dev C:\wamp64\www\workshop_01\wp-content\themes\workshop_01
> npm-run-all -p devFast buildWatch


> [email protected] devFast C:\wamp64\www\workshop_01\wp-content\themes\workshop_01
> webpack serve


> [email protected] buildWatch \workshop_01\wp-content\themes\workshop_01
> webpack --watch

i ｢wds｣: Project is running at http://localhost:3000/
i ｢wds｣: webpack output is served from http://localhost:3000/
i ｢wds｣: Content not from webpack is served from \workshop_01\wp-content\themes\workshop_01
assets by status 2.02 KiB [cached] 2 assets
runtime modules 663 bytes 3 modules
cacheable modules 188 bytes
  ./js/scripts.js 149 bytes [built] [code generated]
  ./css/styles.css 39 bytes [built] [code generated] [1 error]

ERROR in ./css/styles.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/css-loader/dist/cjs.js):
ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
 - options.url should be one of these:
   boolean | object { filter? }
   -> Allows to enables/disables `url()`/`image-set()` functions handling.
   -> Read more at https://github.com/webpack-contrib/css-loader#url
   Details:
    * options.url should be a boolean.
    * options.url should be an object:
      object { filter? }
    at validate (\workshop_01\node_modules\webpack\node_modules\schema-utils\dist\validate.js:105:11)
    at Object.getOptions (\workshop_01\node_modules\webpack\lib\NormalModule.js:539:19)
    at Object.loader (\workshop_01\node_modules\css-loader\dist\index.js:31:27)
    at processResult (\workshop_01\node_modules\webpack\lib\NormalModule.js:713:19)
    at \workshop_01\node_modules\webpack\lib\NormalModule.js:819:5
    at \workshop_01\node_modules\loader-runner\lib\LoaderRunner.js:399:11
    at \workshop_01\node_modules\loader-runner\lib\LoaderRunner.js:251:18
 @ ./js/scripts.js 1:0-27

1 ERROR in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack 5.50.0 compiled with 2 errors in 2017 ms
× ｢wdm｣: asset bundled.js 411 KiB [emitted] (name: scripts) 1 related asset
runtime modules 26.3 KiB 13 modules
modules by path ./node_modules/ 344 KiB
  modules by path ./node_modules/webpack-dev-server/client/ 20.9 KiB 10 modules
  modules by path ./node_modules/style-loader/dist/runtime/*.js 5.02 KiB 6 modules
  modules by path ./node_modules/webpack/hot/ 4.46 KiB 5 modules
  modules by path ./node_modules/html-entities/lib/*.js 61 KiB 5 modules
  modules by path ./node_modules/url/ 37.4 KiB 3 modules
  modules by path ./node_modules/querystring/*.js 4.51 KiB
    ./node_modules/querystring/index.js 127 bytes [built] [code generated]
    ./node_modules/querystring/decode.js 2.34 KiB [built] [code generated]
    ./node_modules/querystring/encode.js 2.04 KiB [built] [code generated]
modules by path ./css/*.css 2.52 KiB
  ./css/styles.css 2.49 KiB [built] [code generated]
  ./node_modules/css-loader/dist/cjs.js?url=false!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./css/styles.css 39 bytes [built] [code generated] [1 error]
./js/scripts.js 149 bytes [built] [code generated]

ERROR in ./css/styles.css (./node_modules/css-loader/dist/cjs.js?url=false!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[0].use[2]!./css/styles.css)
Module build failed (from ./node_modules/css-loader/dist/cjs.js):
ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the API schema.
 - options.url should be one of these:
   boolean | object { filter? }
   -> Allows to enables/disables `url()`/`image-set()` functions handling.
   -> Read more at https://github.com/webpack-contrib/css-loader#url
   Details:
    * options.url should be a boolean.
    * options.url should be an object:
      object { filter? }
    at validate (C:\wamp64\www\workshop_01\wp-content\themes\workshop_01\node_modules\webpack\node_modules\schema-utils\dist\validate.js:105:11)
    at Object.getOptions (C:\wamp64\www\workshop_01\wp-content\themes\workshop_01\node_modules\webpack\lib\NormalModule.js:539:19)
    at Object.loader (C:\wamp64\www\workshop_01\wp-content\themes\workshop_01\node_modules\css-loader\dist\index.js:31:27)
 @ ./css/styles.css 8:6-181 22:17-24 26:7-21 58:25-39 59:36-47 59:50-64 63:6-73:7 64:54-65 64:68-82 70:42-53 70:56-70 72:21-28 83:0-151 83:0-151 84:22-29 84:33-47 84:50-64 61:4-74:5
 @ ./js/scripts.js 1:0-27

webpack 5.50.0 compiled with 1 error in 5656 ms
i ｢wdm｣: Failed to compile.

package.json:

{
  "name": "workshop_01",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "npm-run-all -p devFast buildWatch",
    "devFast": "webpack serve",
    "buildWatch": "webpack --watch",
    "build": "webpack",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.15.0",
    "@babel/preset-env": "^7.15.0",
    "@babel/preset-react": "^7.14.5",
    "@glidejs/glide": "^3.4.1",
    "autoprefixer": "^10.3.1",
    "axios": "^0.21.1",
    "babel-loader": "^8.2.2",
    "clean-webpack-plugin": "^4.0.0-alpha.0",
    "css-loader": "^6.2.0",
    "cssnano": "^5.0.7",
    "fs-extra": "^10.0.0",
    "jquery": "^3.6.0",
    "mini-css-extract-plugin": "^2.2.0",
    "normalize.css": "^8.0.1",
    "npm-run-all": "^4.1.5",
    "postcss-color-function": "^4.1.0",
    "postcss-hexrgba": "^2.0.1",
    "postcss-import": "^14.0.2",
    "postcss-loader": "^6.1.1",
    "postcss-mixins": "^8.1.0",
    "postcss-nested": "^5.0.6",
    "postcss-simple-vars": "^6.0.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "style-loader": "^3.2.1",
    "webpack": "^5.50.0",
    "webpack-cli": "^4.8.0",
    "webpack-dev-server": "^3.11.2",
    "webpack-manifest-plugin": "^4.0.2"
  }
}

webpack.config.js:


const currentTask = process.env.npm_lifecycle_event
const path = require("path")
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
const { WebpackManifestPlugin } = require("webpack-manifest-plugin")
const fse = require("fs-extra")

const postCSSPlugins = [require("postcss-import"), require("postcss-mixins"), require("postcss-simple-vars"), require("postcss-nested"), require("postcss-hexrgba"), require("postcss-color-function"), require("autoprefixer")]

class RunAfterCompile {
  apply(compiler) {
    compiler.hooks.done.tap("Update functions.php", function () {
      // update functions php here
      const manifest = fse.readJsonSync("./bundled-assets/manifest.json")

      fse.readFile("./functions.php", "utf8", function (err, data) {
        if (err) {
          console.log(err)
        }

        const scriptsRegEx = new RegExp("/bundled-assets/scripts.+?'", "g")
        const vendorsRegEx = new RegExp("/bundled-assets/vendors.+?'", "g")
        const cssRegEx = new RegExp("/bundled-assets/styles.+?'", "g")

        let result = data.replace(scriptsRegEx, `/bundled-assets/${manifest["scripts.js"]}'`).replace(vendorsRegEx, `/bundled-assets/${manifest["vendors~scripts.js"]}'`).replace(cssRegEx, `/bundled-assets/${manifest["scripts.css"]}'`)

        fse.writeFile("./functions.php", result, "utf8", function (err) {
          if (err) return console.log(err)
        })
      })
    })
  }
}

let cssConfig = {
  test: /\.css$/i,
  use: ["css-loader?url=false", { loader: "postcss-loader", options: { postcssOptions : { plugins: postCSSPlugins } }}]
}

let config = {
  entry: {
    scripts: "./js/scripts.js"
  },
  plugins: [],
  module: {
    rules: [
      cssConfig,
      {
        test: /\.js$/,
        exclude: /(node_modules)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-react", ["@babel/preset-env", { targets: { node: "12" } }]]
          }
        }
      }
    ]
  }
}

if (currentTask == "devFast") {
  config.devtool = "source-map"
  cssConfig.use.unshift("style-loader")
  config.output = {
    filename: "bundled.js",
    publicPath: "http://localhost:3000/"
  }
  config.devServer = {
    before: function (app, server) {
      // server._watch(["./**/*.php", "./**/*.js"])
      server._watch(["./**/*.php", "!./functions.php"])
    },
    public: "http://localhost:3000",
    publicPath: "http://localhost:3000/",
    disableHostCheck: true,
    contentBase: path.join(__dirname),
    contentBasePublicPath: "http://localhost:3000/",
    hot: true,
    port: 3000,
    headers: {
      "Access-Control-Allow-Origin": "*"
    }
  }
  config.mode = "development"
}

if (currentTask == "build" || currentTask == "buildWatch") {
  cssConfig.use.unshift(MiniCssExtractPlugin.loader)
  postCSSPlugins.push(require("cssnano"))
  config.output = {
    publicPath: "/wp-content/themes/workshop_01/bundled-assets/",
    filename: "[name].[chunkhash].js",
    chunkFilename: "[name].[chunkhash].js",
    path: path.resolve(__dirname, "bundled-assets")
  }
  config.mode = "production"
  config.optimization = {
    splitChunks: { chunks: "all" }
  }
  config.plugins.push(new CleanWebpackPlugin(), new MiniCssExtractPlugin({ filename: "styles.[chunkhash].css" }), new WebpackManifestPlugin({ publicPath: "" }), new RunAfterCompile())
}

module.exports = config

For anyone else having a similar issue involving the css-loader package, I downgraded css-loader to 5.2.7, with help from Hardik Sisodia's question and Karl Hill's workaround here: stackoverflow.com/a/68472983/2758448 — Krys
– Krys, Commented Aug 16, 2021 at 9:59
Thanks for sharing your solution! It helped me find a solution that doesn't require downgrading. — targumon
– targumon, Commented Dec 1, 2021 at 14:12
Did you get a chance to try it too? (I posted it as an answer in case you missed it ^_^) — targumon
– targumon, Commented Dec 6, 2021 at 18:05
I haven't tried it yet, but I will definitely keep this on my dial for future use. Cheers! — Krys
– Krys, Commented Dec 7, 2021 at 8:54

targumon · Accepted Answer · 2021-12-01 14:12:36Z

1

Change the rule for handling css files from:

{
  test: /\.css$/i,
  use: ["css-loader?url=false", ...other loaders...]
}

to:

{
  test: /\.css$/i,
  use: [{loader: 'css-loader', options: {url: false}}, ...other loaders...]
}

(I faced the same error with css-loader?modules=true)

answered Dec 1, 2021 at 14:12

targumon

1,10112 silver badges27 bronze badges

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

Collectives™ on Stack Overflow

Webpack NPM module build failed ValidationError: CSS Loader ...does not match the API schema

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related