1
I’m looking for a solution to run; Electron and React following an MVC structure. I found the Electron-webpack module that apparently extends over standard webpack.
Following the documentation I set up the electron-webpack.json and executed the command electron-webpack dev. The expected behavior was for the Electron window to open, but the following error was issued on the console:
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? }
I thought it was a mistake on my part to set up. So I downloaded the "Quick-start" of the project, installed the dependencies: npm i and tried to run again: electron-webpack dev. The same error occurred.
Follow the file settings:
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"
}
}
Electron-webpack.json
{
"title": "Caixa",
"main": {
"sourceDirectory": "src/main"
},
"renderer": {
"sourceDirectory": "src/view"
}
}
Full output:
> [email protected] dev /home/leydev/Desktop/project
> electron-webpack dev
┏ Main -----------------------
Hash: d16cbab28f9b85dd56f5
Version: webpack 4.42.0
Time: 278ms
Built at: 03/20/2020 9:23:03 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:9080/
┗ ----------------------------
┏ 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: a83e02f87f1da754da63
Version: webpack 4.42.0
Time: 1164ms
Built at: 03/20/2020 9:23:06 PM
2 assets
Entrypoint renderer = renderer.js
[0] multi (webpack)-dev-server/client?http://localhost:9080 (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:9080] (webpack)-dev-server/client?http://localhost:9080 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.
┗ ----------------------------
Project structure:
--myProject
|----src
\----main / index.js
\----view / index.js
|----electron-webpack.json
|----package.json
I didn’t find related Internet in the project repository, or outside it.