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.
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
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>
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 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>
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, "/");
});