Invalid options object. HTML Loader

[ayelsew]

• electron-builder: 22.4.1

• Linux kubuntu: 18.04

Hello developers.
I'm trying to run electron-webpack as dev, on my package.json has a script "dev": "electron-webpack dev", But when it initing to build dev, the process broken and follow error is outputted:

ERROR in ./dist/.renderer-index-template.html (./node_modules/html-loader/dist/cjs.js?minimize=false&url=false!./dist/.renderer-index-template.html)
Module build failed (from ./node_modules/html-loader/dist/cjs.js):
ValidationError: Invalid options object. HTML Loader has been initialized using an options object that does not match the API schema.

My setup is very simple, I don't add plugin or customs webpack files.

My directory structure:

--myProject
  |----src
       \----main / index.js
       \----view / index.js   
  |----electron-webpack.json
  |----package.json 

package.json:

{
  "name": "project",
  "version": "1.0.0",
  "description": "",
  "scripts": {
    "dev": "electron-webpack dev",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "electron": "^8.1.1",
    "electron-builder": "^22.4.1",
    "electron-webpack": "^2.7.4",
    "webpack": "^4.42.0"
  }
}

main / index.js
Are empty.

view / index.js
Are empty.

electron-webpack.json

{
    "title": "Caixa",
    "main": {
        "sourceDirectory": "src/main"
    },
    "renderer": {
        "sourceDirectory": "src/view"
    }
}

I downloaded the "electron-webpack-quick-start" for test here link, but it has the same error.

output error (full):

leydev@burguesa:~/Desktop/project$ npm run dev

> project@1.0.0 dev /home/leydev/Desktop/project
> electron-webpack dev

┏ Main -----------------------

  Hash: d16cbab28f9b85dd56f5
  Version: webpack 4.42.0
  Time: 233ms
  Built at: 03/19/2020 11:46:12 PM
    Asset      Size  Chunks             Chunk Names
  main.js  33.5 KiB    main  [emitted]  main
  Entrypoint main = main.js
  [0] multi ./node_modules/electron-webpack/out/electron-main-hmr/main-hmr ./src/main/index.js 40 bytes {main} [built]
  [./node_modules/electron-webpack/out/electron-main-hmr/main-hmr.js] 582 bytes {main} [built]
  [./src/main/index.js] 42 bytes {main} [built]
  [electron-webpack/out/electron-main-hmr/HmrClient] external "electron-webpack/out/electron-main-hmr/HmrClient" 42 bytes {main} [built]
  [source-map-support/source-map-support.js] external "source-map-support/source-map-support.js" 42 bytes {main} [built]

┗ ----------------------------
┏ Renderer -------------------

  ℹ ｢wds｣: Project is running at http://localhost:35651/

┗ ----------------------------
┏ Renderer -------------------

  ℹ ｢wds｣: webpack output is served from /
  ℹ ｢wds｣: Content not from webpack is served from /home/leydev/Desktop/project/static, /home/leydev/Desktop/project/dist/renderer-dll

┗ ----------------------------
┏ Renderer -------------------

  ✖ ｢wdm｣: Hash: 558d537ad4100fc2e25f
  Version: webpack 4.42.0
  Time: 1221ms
  Built at: 03/19/2020 11:46:14 PM
   2 assets
  Entrypoint renderer = renderer.js
  [0] multi (webpack)-dev-server/client?http://localhost:35651 (webpack)/hot/dev-server.js css-hot-loader/hotModuleReplacement ./src/view/index.js 64 bytes {renderer} [built]
  [./node_modules/css-hot-loader/hotModuleReplacement.js] 3.05 KiB {renderer} [built]
  [./node_modules/css-hot-loader/node_modules/normalize-url/index.js] 3.85 KiB {renderer} [built]
  [./node_modules/lodash/debounce.js] 5.96 KiB {renderer} [built]
  [./node_modules/strip-ansi/index.js] 161 bytes {renderer} [built]
  [./node_modules/webpack-dev-server/client/index.js?http://localhost:35651] (webpack)-dev-server/client?http://localhost:35651 4.29 KiB {renderer} [built]
  [./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {renderer} [built]
  [./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {renderer} [built]
  [./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.91 KiB {renderer} [built]
  [./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {renderer} [built]
  [./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {renderer} [built]
  [./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {renderer} [built]
  [./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {renderer} [built]
  [./node_modules/webpack/hot/dev-server.js] (webpack)/hot/dev-server.js 1.59 KiB {renderer} [built]
  [./src/view/index.js] 0 bytes {renderer} [built]
      + 35 hidden modules
  
  ERROR in   Error: Child compilation failed:
    Module build failed (from ./node_modules/html-loader/dist/cjs.js):
    ValidationError: Invalid options object. HTML Loader has been initialized usin  g an options object that does not match the API schema.
     - options has an unknown property 'url'. These properties are valid:
       object { preprocessor?, attributes?, minimize?, esModule? }
    
    - validate.js:85 validate
      [project]/[schema-utils]/dist/validate.js:85:11
    
    
    - ValidationError: Invalid options object. HTML Loader has been initialized us    ing an options object that does not match the API schema.
    
    - - options has an unknown property 'url'. These properties are valid:
    
    - object { preprocessor?, attributes?, minimize?, esModule? }
    
    - compiler.js:79 childCompiler.runAsChild
      [project]/[html-webpack-plugin]/lib/compiler.js:79:16
    
    - Compiler.js:343 compile
      [project]/[webpack]/lib/Compiler.js:343:11
    
    - Compiler.js:681 hooks.afterCompile.callAsync.err
      [project]/[webpack]/lib/Compiler.js:681:15
    
    
    - Hook.js:154 AsyncSeriesHook.lazyCompileHook
      [project]/[tapable]/lib/Hook.js:154:20
    
    - Compiler.js:678 compilation.seal.err
      [project]/[webpack]/lib/Compiler.js:678:31
    
    
    - Hook.js:154 AsyncSeriesHook.lazyCompileHook
      [project]/[tapable]/lib/Hook.js:154:20
    
    - Compilation.js:1423 hooks.optimizeAssets.callAsync.err
      [project]/[webpack]/lib/Compilation.js:1423:35
    
    
    - Hook.js:154 AsyncSeriesHook.lazyCompileHook
      [project]/[tapable]/lib/Hook.js:154:20
    
    - Compilation.js:1414 hooks.optimizeChunkAssets.callAsync.err
      [project]/[webpack]/lib/Compilation.js:1414:32
    
    
    - Hook.js:154 AsyncSeriesHook.lazyCompileHook
      [project]/[tapable]/lib/Hook.js:154:20
    
    - Compilation.js:1409 hooks.additionalAssets.callAsync.err
      [project]/[webpack]/lib/Compilation.js:1409:36
    
    
  
  Child html-webpack-plugin for "index.html":
       1 asset
      Entrypoint undefined = index.html
      [./node_modules/html-loader/dist/cjs.js?minimize=false&url=false!./dist/.renderer-index-template.html] 555 bytes {0} [built] [failed] [1 error]
      
      ERROR in ./dist/.renderer-index-template.html (./node_modules/html-loader/dist/cjs.js?minimize=false&url=false!./dist/.renderer-index-template.html)
      Module build failed (from ./node_modules/html-loader/dist/cjs.js):
      ValidationError: Invalid options object. HTML Loader has been initialized using an options object that does not match the API schema.
       - options has an unknown property 'url'. These properties are valid:
         object { preprocessor?, attributes?, minimize?, esModule? }
          at validate (/home/leydev/Desktop/project/node_modules/schema-utils/dist/validate.js:85:11)
          at Object.htmlLoader (/home/leydev/Desktop/project/node_modules/html-loader/dist/index.js:22:28)

┗ ----------------------------
┏ Renderer -------------------

  ℹ ｢wdm｣: Failed to compile.

┗ ----------------------------

[0916dhkim]

I think I found the cause of this error.
electron-webpack depends on html-loader package, and there was some breaking changes in html-loader when they were upgrading from v1.0.0-alpha.0 to v1.0.0

Below is the diff of src/options.json between v1.0.0 and v1.0.0-alpha.0

diff --git a/src/options.json b/src/options.json
index 70ae501..d4ce35d 100644
--- a/src/options.json
+++ b/src/options.json
@@ -1,27 +1,65 @@
 {
   "type": "object",
+  "definitions": {
+    "Attribute": {
+      "type": "object",
+      "properties": {
+        "tag": {
+          "type": "string",
+          "minLength": 1
+        },
+        "attribute": {
+          "type": "string",
+          "minLength": 1
+        },
+        "type": {
+          "enum": ["src", "srcset"]
+        },
+        "filter": {
+          "instanceof": "Function"
+        }
+      },
+      "required": ["tag", "attribute", "type"],
+      "additionalProperties": false
+    },
+    "AttributeList": {
+      "type": "array",
+      "items": {
+        "$ref": "#/definitions/Attribute"
+      },
+      "minItems": 1,
+      "uniqueItems": true
+    }
+  },
   "properties": {
-    "url": {
-      "anyOf": [
-        { "type": "string" },
-        { "type": "boolean" },
-        { "instanceof": "RegExp" },
-        { "instanceof": "Function" }
-      ]
+    "preprocessor": {
+      "instanceof": "Function"
     },
-    "import": {
+    "attributes": {
       "anyOf": [
-        { "type": "string" },
         { "type": "boolean" },
-        { "instanceof": "RegExp" },
-        { "instanceof": "Function" }
+        {
+          "type": "object",
+          "properties": {
+            "list": {
+              "$ref": "#/definitions/AttributeList"
+            },
+            "urlFilter": {
+              "instanceof": "Function"
+            },
+            "root": {
+              "type": "string"
+            }
+          },
+          "additionalProperties": false
+        }
       ]
     },
-    "template": {
-      "type": [ "boolean", "string" ]
-    },
     "minimize": {
-      "type": [ "boolean", "object" ]
+      "anyOf": [{ "type": "boolean" }, { "type": "object" }]
+    },
+    "esModule": {
+      "type": "boolean"
     }
   },
   "additionalProperties": false

You can see that url property is not available anymore. Seems like electron-webpack is still using that url property, and webpack is complaining about "schema mismatch".

electron-webpack/packages/electron-webpack/src/targets/RendererTarget.ts

Line 218 in be61137

return `!!html-loader?minimize=false&url=false!${filePath}`

[phloose]

I can confirm this! Some days ago the electron-webpack-quick-start was working as expected.

I got it working by fixing the html-loader 1.0.0-alpha.0 version in package.json:

npm install html-loader@1.0.0-alpha.0 --save-dev.

This should work as a workaround for all that are stumbling over this issue until electron-webpack adapts to the changes made in html-loader version 1.0.0.

[ayelsew]

Cool.
I have been tried here, and it's worked.
Now the electron window are opening, with electron-webpack-quick-start at least. But in my project, I think that's a wrong configuration. Becuse the message of error is missing but the window not opening.
Thank you, you're amazing!

[michaelbayday]

@phloose this worked for us thank you

[b-zurg]

Alternatively for yarn you can add a module resolution. e.g.

  "resolutions": {
    "js-yaml": "^3.13.1",
    "html-loader": "1.0.0-alpha.0"
  },

note: js-yaml was included to remove a severe vulnerability in that package which is required by html-loader < 1.0.0. Once we can use the latest version of html-loader then that won't be an issue either.

[loopmode]

Great reporting everyone, thanks a lot!