Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$

[webpack-cli] Invalid configuration object


I tried running below command for HTML Metronic template. I am getting below error. I searched a lot for the answers, but could not get it to work with the suggested solutions.

npm run build --demo1

> metronic@8.2.0 build
> webpack

[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
- configuration[0].entry['js/widgets.bundle'] should be a non-empty array.
-> All modules are loaded upon startup. The last one is exported.


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (5)


I appologise for the inconvenience. This issue is specifically on Windows.

As workaround, you can try replacing some lines in the /tools/webpack.config.js file with the workaround code provided in this link [https://gist.github.com/KeenthemesHub/2189b96490016bc32f88b3091e446906#file-webpack-config-js-L113-L116]. This should help in resolving the configuration error.

If you continue to experience any difficulties or have further questions, please don't hesitate to reach out. Thank you for your patience, and we appreciate your understanding.


// Widgets js
entries["js/widgets.bundle"] = (glob.sync(path.relative("./", srcPath).replaceAll(/\\/g, "/") + "/js/widgets/**/!(_)*.js") || []).map(file => {
return file.replaceAll(/\\/g, "/");
});



Thank you for the response. I did what you mentioned. It ran this time. Below is the output I got.
======================================================
npm run build

> metronic@8.2.0 build
> webpack

>> Building npm_version bundle...
>> Failed to compile npm_version bundle!

resolve '@shopify/draggable/lib/draggable.bundle.js' in 'D:\metronic\html\metronic_html_v8.2.0_demo1\metronic_html_v8.2.0_demo1\tools\webpack\plugins\custom\draggable'
Parsed request is a module
using description file: D:\metronic\html\metronic_html_v8.2.0_demo1\metronic_html_v8.2.0_demo1\tools\package.json (relative path: ./webpack/plugins/custom/draggable)
Field 'browser' doesn't contain a valid alias configuration
resolve as module
D:\metronic\html\metronic_html_v8.2.0_demo1\metronic_html_v8.2.0_demo1\tools\webpack\plugins\custom\draggable\node_modules doesn't exist or is not a directory
D:\metronic\html\metronic_html_v8.2.0_demo1\metronic_html_v8.2.0_demo1\tools\webpack\plugins\custom\node_modules doesn't exist or is not a directory
D:\metronic\html\metronic_html_v8.2.0_demo1\metronic_html_v8.2.0_demo1\tools\webpack\plugins\node_modules doesn't exist or is not a directory
D:\metronic\html\metronic_html_v8.2.0_demo1\metronic_html_v8.2.0_demo1\tools\webpack\node_modules doesn't exist or is not a directory
looking for modules in D:\metronic\html\metronic_html_v8.2.0_demo1\metronic_html_v8.2.0_demo1\tools\node_modules
existing directory D:\metronic\html\metronic_html_v8.2.0_demo1\metronic_html_v8.2.0_demo1\tools\node_modules\@shopify\draggable
using description file: D:\metronic\html\metronic_html_v8.2.0_demo1\metronic_html_v8.2.0_demo1\tools\node_modules\@shopify\draggable\package.json (relative path: .)
using description file: D:\metronic\html\metronic_html_v8.2.0_demo1\metronic_html_v8.2.0_demo1\tools\node_modules\@shopify\draggable\package.json (relative path: ./lib/draggable.bundle.js)
no extension
Field 'browser' doesn't contain a valid alias configuration
D:\metronic\html\metronic_html_v8.2.0_demo1\metronic_html_v8.2.0_demo1\tools\node_modules\@shopify\draggable\lib\draggable.bundle.js doesn't exist
.js
Field 'browser' doesn't contain a valid alias configuration
D:\metronic\html\metronic_html_v8.2.0_demo1\metronic_html_v8.2.0_demo1\tools\node_modules\@shopify\draggable\lib\draggable.bundle.js.js doesn't exist
.scss
Field 'browser' doesn't contain a valid alias configuration
D:\metronic\html\metronic_html_v8.2.0_demo1\metronic_html_v8.2.0_demo1\tools\node_modules\@shopify\draggable\lib\draggable.bundle.js.scss doesn't exist
as directory
D:\metronic\html\metronic_html_v8.2.0_demo1\metronic_html_v8.2.0_demo1\tools\node_modules\@shopify\draggable\lib\draggable.bundle.js doesn't exist
D:\metronic\html\metronic_html_v8.2.0_demo1\metronic_html_v8.2.0_demo1\node_modules doesn't exist or is not a directory
D:\metronic\html\metronic_html_v8.2.0_demo1\node_modules doesn't exist or is not a directory
D:\metronic\html\node_modules doesn't exist or is not a directory
D:\metronic\node_modules doesn't exist or is not a directory
D:\node_modules doesn't exist or is not a directory
D:\Megalon\Projects\Gateway\node_modules doesn't exist or is not a directory
D:\Megalon\Projects\node_modules doesn't exist or is not a directory
D:\Megalon\node_modules doesn't exist or is not a directory
D:\node_modules doesn't exist or is not a directory
WARNING in ../demo1/src/sass/style.scss (../demo1/src/sass/style.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!../demo1/src/sass/style.scss)
Module Warning (from ./node_modules/sass-loader/dist/cjs.js):
Deprecation Passing percentage units to the global abs() function is deprecated.
In the future, this will emit a CSS abs() function to be resolved by the browser.
To preserve current behavior: math.abs(100%)
To emit a CSS abs() now: abs(#{100%})
More info: https://sass-lang.com/d/abs-percent

node_modules\bootstrap\scss\vendor\_rfs.scss 57:14 divide()
node_modules\bootstrap\scss\mixins\_grid.scss 59:12 row-cols()
node_modules\bootstrap\scss\mixins\_grid.scss 85:13 @content
node_modules\bootstrap\scss\mixins\_breakpoints.scss 68:5 media-breakpoint-up()
node_modules\bootstrap\scss\mixins\_grid.scss 72:5 make-grid-columns()
node_modules\bootstrap\scss\_grid.scss 38:3 @import
node_modules\bootstrap\scss\bootstrap.scss 20:9 @import
..\demo1\src\sass\components\components.scss 9:9 @import
..\demo1\src\sass\style.scss 9:9 root stylesheet


ERROR in ./webpack/plugins/custom/draggable/draggable.js 3:0-53
Module not found: Error: Can't resolve '@shopify/draggable/lib/draggable.bundle.js' in 'D:\metronic\html\metronic_html_v8.2.0_demo1\metronic_html_v8.2.0_demo1\tools\webpack\plugins\custom\draggable'

ERROR in ./webpack/plugins/custom/draggable/draggable.js 4:0-60
Module not found: Error: Can't resolve '@shopify/draggable/lib/draggable.bundle.legacy.js' in 'D:\metronic\html\metronic_html_v8.2.0_demo1\metronic_html_v8.2.0_demo1\tools\webpack\plugins\custom\draggable'

ERROR in ./webpack/plugins/custom/draggable/draggable.js 5:0-46
Module not found: Error: Can't resolve '@shopify/draggable/lib/draggable.js' in 'D:\metronic\html\metronic_html_v8.2.0_demo1\metronic_html_v8.2.0_demo1\tools\webpack\plugins\custom\draggable'

ERROR in ./webpack/plugins/custom/draggable/draggable.js 6:18-63
Module not found: Error: Can't resolve '@shopify/draggable/lib/sortable.js' in 'D:\metronic\html\metronic_html_v8.2.0_demo1\metronic_html_v8.2.0_demo1\tools\webpack\plugins\custom\draggable'

ERROR in ./webpack/plugins/custom/draggable/draggable.js 7:19-65
Module not found: Error: Can't resolve '@shopify/draggable/lib/droppable.js' in 'D:\metronic\html\metronic_html_v8.2.0_demo1\metronic_html_v8.2.0_demo1\tools\webpack\plugins\custom\draggable'

ERROR in ./webpack/plugins/custom/draggable/draggable.js 8:19-65
Module not found: Error: Can't resolve '@shopify/draggable/lib/swappable.js' in 'D:\metronic\html\metronic_html_v8.2.0_demo1\metronic_html_v8.2.0_demo1\tools\webpack\plugins\custom\draggable'

ERROR in ./webpack/plugins/custom/draggable/draggable.js 9:0-44
Module not found: Error: Can't resolve '@shopify/draggable/lib/plugins.js' in 'D:\metronic\html\metronic_html_v8.2.0_demo1\metronic_html_v8.2.0_demo1\tools\webpack\plugins\custom\draggable'

ERROR in ./webpack/plugins/custom/draggable/draggable.js 10:0-55
Module not found: Error: Can't resolve '@shopify/draggable/lib/plugins/collidable.js' in 'D:\metronic\html\metronic_html_v8.2.0_demo1\metronic_html_v8.2.0_demo1\tools\webpack\plugins\custom\draggable'

ERROR in ./webpack/plugins/custom/draggable/draggable.js 11:0-58
Module not found: Error: Can't resolve '@shopify/draggable/lib/plugins/resize-mirror.js' in 'D:\metronic\html\metronic_html_v8.2.0_demo1\metronic_html_v8.2.0_demo1\tools\webpack\plugins\custom\draggable'

ERROR in ./webpack/plugins/custom/draggable/draggable.js 12:0-54
Module not found: Error: Can't resolve '@shopify/draggable/lib/plugins/snappable.js' in 'D:\metronic\html\metronic_html_v8.2.0_demo1\metronic_html_v8.2.0_demo1\tools\webpack\plugins\custom\draggable'

ERROR in ./webpack/plugins/custom/draggable/draggable.js 13:0-59
Module not found: Error: Can't resolve '@shopify/draggable/lib/plugins/swap-animation.js' in 'D:\metronic\html\metronic_html_v8.2.0_demo1\metronic_html_v8.2.0_demo1\tools\webpack\plugins\custom\draggable'

webpack compiled with 11 errors and 1 warning
PS D:\metronic\html\metronic_html_v8.2.0_demo1\metronic_html_v8.2.0_demo1\tools>



This error can sometimes be caused by third-party plugin updates or changes in the configuration.

If you are not using the draggable plugin in your project, you can temporarily remove the `draggable` folder from your project as a workaround. This may resolve the issue until a more permanent solution is available.

Remove the `/tools/webpack/plugins/custom/draggable` folder from your project.

If the issue persists, you can try replacing your `/tools/webpack.config.js` file with an updated configuration file. You can find an example of an updated configuration file in this
https://gist.github.com/faizalmy/07c1ca0caa544e37735e2404e963c8f4

Download the updated webpack configuration file and replace your existing `/tools/webpack.config.js` file with it. Be sure to backup your existing configuration file before making any changes.

We greatly appreciate your patience and understanding.



Thank you Faizal. It worked this time. I removed the draggable folder and tried again. Below is the output. Appreciate your help.

=========================================================
npm run build

> metronic@8.2.0 build
> webpack

>> Building npm_version bundle...
>> Compiled npm_version bundle with warnings.

ModuleWarning: Module Warning (from ./node_modules/sass-loader/dist/cjs.js):
Deprecation Passing percentage units to the global abs() function is deprecated.
In the future, this will emit a CSS abs() function to be resolved by the browser.
To preserve current behavior: math.abs(100%)
To emit a CSS abs() now: abs(#{100%})
More info: https://sass-lang.com/d/abs-percent

node_modules\bootstrap\scss\vendor\_rfs.scss 57:14 divide()
node_modules\bootstrap\scss\mixins\_grid.scss 59:12 row-cols()
node_modules\bootstrap\scss\mixins\_grid.scss 85:13 @content
node_modules\bootstrap\scss\mixins\_breakpoints.scss 68:5 media-breakpoint-up()
node_modules\bootstrap\scss\mixins\_grid.scss 72:5 make-grid-columns()
node_modules\bootstrap\scss\_grid.scss 38:3 @import
node_modules\bootstrap\scss\bootstrap.scss 20:9 @import
..\demo1\src\sass\components\components.scss 9:9 @import
..\demo1\src\sass\style.scss 9:9 root stylesheet
WARNING in ../demo1/src/sass/style.scss (../demo1/src/sass/style.scss.webpack[javascript/auto]!=!./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[2].use[2]!../demo1/src/sass/style.scss)
Module Warning (from ./node_modules/sass-loader/dist/cjs.js):
Deprecation Passing percentage units to the global abs() function is deprecated.
In the future, this will emit a CSS abs() function to be resolved by the browser.
To preserve current behavior: math.abs(100%)
To emit a CSS abs() now: abs(#{100%})
More info: https://sass-lang.com/d/abs-percent

node_modules\bootstrap\scss\vendor\_rfs.scss 57:14 divide()
node_modules\bootstrap\scss\mixins\_grid.scss 59:12 row-cols()
node_modules\bootstrap\scss\mixins\_grid.scss 85:13 @content
node_modules\bootstrap\scss\mixins\_breakpoints.scss 68:5 media-breakpoint-up()
node_modules\bootstrap\scss\mixins\_grid.scss 72:5 make-grid-columns()
node_modules\bootstrap\scss\_grid.scss 38:3 @import
node_modules\bootstrap\scss\bootstrap.scss 20:9 @import
..\demo1\src\sass\components\components.scss 9:9 @import
..\demo1\src\sass\style.scss 9:9 root stylesheet


webpack compiled with 1 warning
PS D:\metronic\html\metronic_html_v8.2.0_demo1\metronic_html_v8.2.0_demo1\tools>



To address the Bootstrap warning related to the abs() function, you can update Bootstrap to version 5.3.2 using either npm or yarn. Here are the commands to update Bootstrap:

Using npm:
npm install bootstrap@5.3.2

Using yarn:
yarn add bootstrap@5.3.2

This fix also will be included soon.

Thanks


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(