Get 2024 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$

html gulp --demo1 error


got this error

file:///Users/lutfikhoir/Documents/metronic_v8.1.8/html/tools/gulp/helpers.js:16
import glob from "glob";
^^^^
SyntaxError: The requested module 'glob' does not provide an export named 'default'
at ModuleJob._instantiate (node:internal/modules/esm/module_job:123:21)
at async ModuleJob.run (node:internal/modules/esm/module_job:189:5)
at async Promise.all (index 0)
at async ESMLoader.import (node:internal/modules/esm/loader:530:24)
at async importModuleDynamicallyWrapper (node:internal/vm/module:438:15)


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


Hi,

The warning you're seeing is related to a deprecation in Bootstrap and how it handles CSS percentage units. It's not something that directly affects the functionality or appearance of your frontend view.

This warning is indicating that using percentage units with the abs() function in your SCSS code is deprecated in favor of using the CSS abs() function, which will be resolved by the browser in the future.

For now, you can safely ignore this warning, as it doesn't have any immediate impact on your website's functionality or appearance.

The warning is likely to be addressed in future updates or releases of Bootstrap or related libraries.

Thanks



Thank you for providing the additional information. It appears that you are using Node.js version 18 and npm version 10.1.0, which should be compatible.

Since you've confirmed that "type": "module" is already present in your package.json file, and your Node.js and npm versions seem appropriate, it's worth considering a few more steps to troubleshoot this issue:

Check for Other 'glob' Installations: Ensure that there are no conflicting installations of the 'glob' module globally or within your project. You can check for global installations using npm list -g glob. If there's a global installation, you can uninstall it using npm uninstall -g glob.

Clear npm Cache: Clear the npm cache to make sure there are no cached artifacts causing conflicts. Run the following command to clear the npm cache:

npm cache clean -f

Verify Dependencies: Double-check your project's dependencies to ensure there are no conflicting or outdated packages. Run the following commands to update and audit your project's dependencies:

npm update
npm audit

Remove node_modules: Try removing the node_modules directory and the package-lock.json or yarn.lock file (if present), and then reinstall the dependencies:

rm -rf node_modules
rm -f package-lock.json yarn.lock
yarn

Check Gulp Version: Verify that you have a compatible version of Gulp installed globally and locally in your project. You can check the version using gulp -v. If it's outdated, update Gulp using npm install -g gulp for the global version and npm install gulp for the local version.

After performing these steps, try running the HTML Gulp task again:

gulp

If you continue to encounter the same error, please let me know, and we can further investigate the issue.



It's same, and i'm try to figure out with read the glob doc, it's work
from -> import glob from "glob";
to -> import { glob } from "glob";

but I got another error, after run gulp

Deprecation Warning: 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

//
// Theme style
//

// Initialize
@import "init";

// Components
@import "components/components";


// Layout
@import "layout/base/layout";
@import "layout/layout";

../demo1/src/sass/style.bundle.css 1:1 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 32:3 @import
node_modules/bootstrap/scss/bootstrap.scss 20:9 @import
../demo1/src/sass/components/components.scss 9:9 @import
../demo1/src/sass/style.bundle.css 9:9 root stylesheet



Ensure that you are using a recent version of npm and use Node.js version 18. You can check your Node.js version by running node -v, and your npm version by running npm -v. If your Node.js or npm versions are outdated, consider updating them to the latest stable versions.



Node: v18.17.0
Npm: 10.1.0

I'm using fnm , does it matter?



It's possible that you may have switched to the Webpack build previously. To address this issue, please check if the `"type": "module"` configuration exists in your `package.json` file.

Open your package.json file.

Ensure that there's a "type": "module" line in the JSON, like this:

{
"type": "module",
// Other package.json settings...
}

Save the package.json file if you made any changes.

Try running the HTML Gulp build again.

Add "type": "module" to your package.json file tells. This should resolve the import issue you encountered.

If you continue to face problems or have any additional questions, please feel free to ask for further assistance.



Yes, it already there


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