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

Npm run build for Metronic Blazor gives me an error


Hello, when i execute npm run build for Metronic in blazor it gives my this error

[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.

I followed this guide https://preview.keenthemes.com/blazor/metronic/docs/getting-started

Thank you


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 (10)


I appreciate your understanding, and I apologize for the inconvenience you've encountered. It seems that you are using Windows, and there is a known issue with this configuration on Windows systems. To resolve this, please follow the provided workaround:

Open the file located at /blazor/Starterkit/_keenthemes/tools/webpack.config.js within your project.

Find the section of code (line 114) that corresponds to the following lines:

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

Replace these lines with the code snippet from this Gist.

https://gist.github.com/KeenthemesHub/9bb8c1cb3e111adca7bd6df1b4272e20#file-webpack-config-js-L114-L116

Save the file after applying this change. Try running the npm run build command once more.

If you encounter any further difficulties or have additional questions, please feel free to reach out. Your patience and cooperation are greatly appreciated.



Hello, thank you for your response but after make the changes it gives me another error

[webpack-cli] Failed to load 'E:\El Proyecto\ManaZor\ManaZor\_keenthemes\tools\webpack.config.js' config
[webpack-cli] E:\El Proyecto\ManaZor\ManaZor\_keenthemes\tools\node_modules\picomatch\lib\parse.js:329
*/ 0.0107253 -0.245 0.180645
^^^^^^^^

SyntaxError: Unexpected number
at internalCompileFunction (node:internal/vm:73:18)
at wrapSafe (node:internal/modules/cjs/loader:1178:20)
at Module._compile (node:internal/modules/cjs/loader:1220:27)
at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
at Module.load (node:internal/modules/cjs/loader:1119:32)
at Module._load (node:internal/modules/cjs/loader:960:12)
at Module.require (node:internal/modules/cjs/loader:1143:19)
at require (node:internal/modules/cjs/helpers:119:18)
at Object. (E:\El Proyecto\ManaZor\ManaZor\_keenthemes\tools\node_modules\picomatch\lib\picomatch.js:5:15)
at Module._compile (node:internal/modules/cjs/loader:1256:14)



Hello, thank you for your response but after make the changes it gives me another error

[webpack-cli] Failed to load 'E:\El Proyecto\ManaZor\ManaZor\_keenthemes\tools\webpack.config.js' config
[webpack-cli] E:\El Proyecto\ManaZor\ManaZor\_keenthemes\tools\node_modules\picomatch\lib\parse.js:329
*/ 0.0107253 -0.245 0.180645
^^^^^^^^

SyntaxError: Unexpected number
at internalCompileFunction (node:internal/vm:73:18)
at wrapSafe (node:internal/modules/cjs/loader:1178:20)
at Module._compile (node:internal/modules/cjs/loader:1220:27)
at Module._extensions..js (node:internal/modules/cjs/loader:1310:10)
at Module.load (node:internal/modules/cjs/loader:1119:32)
at Module._load (node:internal/modules/cjs/loader:960:12)
at Module.require (node:internal/modules/cjs/loader:1143:19)
at require (node:internal/modules/cjs/helpers:119:18)
at Object.<anonymous> (E:\El Proyecto\ManaZor\ManaZor\_keenthemes\tools\node_modules\picomatch\lib\picomatch.js:5:15)
at Module._compile (node:internal/modules/cjs/loader:1256:14)



Hi,

Ensure that all required modules and dependencies for webpack are correctly installed. You can do this by running the following command in the tools directory containing package.json file:

Remove existing node_modules folder from the tools folder.


yarn

This command will install or update the necessary dependencies based on your project's package.json file.

Occasionally, cache issues can lead to unexpected errors. Try clearing the npm cache:

npm cache clean --force

After cleaning the cache, run yarn again

Ensure that you are using a relatively recent version of Node.js, as older versions may not be compatible with certain webpack configurations. Suggested version, please use Node.js version 18. Use "node -v" command to check the current version.


Thanks



Thank you for your solution but still not working, now it gives me this error:

D:\proyecto\Starterkit\_keenthemes\tools>npm run build

> keenthemes@1.0.0 build
> webpack

Source: D:/proyecto/themes/npm_version/html/src
Output: D:/proyecto/themes/npm_version/html/dist/assets
[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.


Node version is 18.18.0

D:\proyecto\Starterkit\_keenthemes\tools>node -v
v18.18.0



This is the same issue as before. As mentioned in my initial response, please check the workaround provided in my first reply above, ensuring that each step is followed accurately.

Feel free to ask any questions or provide further details, and we'll do our best to help you resolve the problem.

Thanks



Hello,

My line 114 in webpack.config.js looks like the workaround because I changed it when you sent me the fix. It looks like this:

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

I don't know why I'm still encountering the same error as before.

Thank you.



Apologise for the delay. This error can sometimes be caused by third-party plugin updates or changes in the configuration. Here is the temporary workaround you can follow.

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/72a59ac4c5ca4711b0304e0b79f253dc

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.



I have the same issue. I've bought the theme and now following the instructions above and in this post. Line 114 looks nothing like what is shown, so I assume that it's changed since this solution was originally posted. Yes, I am on a Windows PC. Changing the code to what you've recommended does not fix the issue.


(glob.sync(path.relative('./', srcPath) + '/js/custom/**/!(_)*.js') || [])
.filter(f => {
// exclude folder with bundle
return /\/bundle\/.*?\.js/.test(f) === false;
})
.forEach(file => {
entries['js/widgets.bundle'] = (glob.sync(path.relative('./', srcPath).replaceAll(/\\/g, '/') + '/js/widgets/**/!(_)*.js') || []).map(file => {
return file.replaceAll(/\\/g, '/');
});
});

// Widgets js
entries['js/widgets.bundle'] = (glob.sync(path.relative('./', srcPath) + '/js/widgets/**/!(_)*.js') || []);a




Here's what worked for me... line 107-123...


// Custom JS files from src folder
(glob.sync(path.relative('./', srcPath) + '/js/custom/**/!(_)*.js') || [])
.filter(f => {
// exclude folder with bundle
return /\/bundle\/.*?\.js/.test(f) === false;
})
.forEach(file => {
entries[file.replace(/.*js\/(.*?)\.js$/ig, 'js/$1')] = './' + file;
});

// Widgets js
let relPath = path.relative('./', srcPath);
let forwardSlashPath = relPath.replace(/\\/g, '/');

entries['js/widgets.bundle'] = (glob.sync(forwardSlashPath + '/js/widgets/**/!(_)*.js') || []).map(file => {
return file.replace(/\\/g, '/');
});


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  :(