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

npm run dev is showing error on existing Laravel Project


Hello, I did everything described here: https://preview.keenthemes.com/html/metronic/docs/getting-started/integration/laravel.

Except for the part: The default dev dependency laravel-mixis required for next steps, you should leave it in the npm/package.json.(I am not sure what it means.)

Then I run npm install to install all dependencies and update all the dependencies. (Since I already had some updated dependencies)

I got the following error.:


Error [ERR_REQUIRE_ESM]: require() of ES Module [laravelApp]/node_modules/del/index.js from [laravelApp]/webpack.mix.js not supported.
Instead change the require of index.js in [laravelApp]/webpack.mix.js to a dynamic import() which is available in all CommonJS modules.


Also if change require to import.
Then I get mix.options is not a function. (basically none of the mix function are getting called.)

My package.json



{
 "private": true,
 "scripts": {
 "dev": "npm run development",
 "development": "mix",
 "watch": "mix watch",
 "watch-poll": "mix watch -- --watch-options-poll=1000",
 "hot": "mix watch --hot",
 "prod": "npm run production",
 "production": "mix --production",
 "devVite": "vite",
 "build": "vite build"
 },
 "devDependencies": {
 "@babel/plugin-syntax-jsx": "^7.18.6",
 "@babel/plugin-transform-modules-commonjs": "^7.13.8",
 "@babel/preset-react": "^7.18.6",
 "@babel/register": "^7.13.14",
 "@tailwindcss/forms": "^0.4.0",
 "@vitejs/plugin-react": "^2.2.0",
 "@vitejs/plugin-react-refresh": "^1.3.6",
 "alpinejs": "^3.7.1",
 "autoprefixer": "^10.4.2",
 "axios": "^0.24.0",
 "copy-webpack-plugin": "^8.1.0",
 "css-loader": "^5.2.0",
 "css-minimizer-webpack-plugin": "^4.2.2",
 "extract-loader": "^5.1.0",
 "file-loader": "^6.2.0",
 "fs-extra": "^10.0.0",
 "gulp": "^4.0.2",
 "gulp-clean-css": "^4.3.0",
 "gulp-concat": "^2.6.1",
 "gulp-connect": "^5.7.0",
 "gulp-dart-sass": "^1.0.2",
 "gulp-if": "^3.0.0",
 "gulp-rename": "^2.0.0",
 "gulp-rewrite-css": "^1.1.2",
 "gulp-rtlcss": "^2.0.0",
 "gulp-sourcemaps": "^3.0.0",
 "gulp-terser": "^2.0.1",
 "imports-loader": "^1.2.0",
 "laravel-mix": "^6.0.49",
 "laravel-vite-plugin": "^0.7.0",
 "lazypipe": "^1.0.2",
 "lodash": "^4.17.19",
 "merge-stream": "^2.0.0",
 "mini-css-extract-plugin": "^1.3.4",
 "postcss": "^8.4.5",
 "postcss-import": "^14.0.2",
 "postcss-loader": "^4.0.4",
 "pretty": "^2.0.0",
 "react": "^18.2.0",
 "react-dom": "^18.2.0",
 "replace-in-file-webpack-plugin": "^1.0.6",
 "resolve-url-loader": "^4.0.0",
 "rtlcss": "^3.5.0",
 "rtlcss-webpack-plugin": "^4.0.6",
 "sass": "^1.47.0",
 "sass-loader": "^10.1.0",
 "script-loader": "^0.7.2",
 "tailwindcss": "^3.1.0",
 "terser-webpack-plugin": "^5.0.3",
 "url-loader": "^4.1.1",
 "vite": "^3.2.3",
 "webpack": "^5.28.0",
 "webpack-cli": "^4.6.0",
 "webpack-dev-server": "^4.11.1",
 "webpack-exclude-assets-plugin": "^0.1.1",
 "webpack-merge-and-include-globally": "^2.3.4",
 "webpack-messages": "^2.0.4",
 "webpack-rtl-plugin": "^1.3.0",
 "yargs": "^16.2.0",
 "yarn-install": "^1.0.0"
 },
 "dependencies": {
 "@babel/core": "^7.20.2",
 "@babel/preset-env": "^7.20.2",
 "@ckeditor/ckeditor5-alignment": "^31.1.0",
 "@ckeditor/ckeditor5-build-balloon": "^23.1.0",
 "@ckeditor/ckeditor5-build-balloon-block": "^23.1.0",
 "@ckeditor/ckeditor5-build-classic": "^23.1.0",
 "@ckeditor/ckeditor5-build-decoupled-document": "^23.1.0",
 "@ckeditor/ckeditor5-build-inline": "^23.1.0",
 "@fortawesome/fontawesome-free": "^5.15.3",
 "@popperjs/core": "^2.11.6",
 "@shopify/draggable": "^1.0.0-beta.12",
 "@yaireo/tagify": "^4.9.2",
 "acorn": "^8.0.4",
 "apexcharts": "^3.30.0",
 "autosize": "^5.0.1",
 "axios": "^0.24.0",
 "bootstrap": "5.2.2",
 "bootstrap-cookie-alert": "^1.2.1",
 "bootstrap-daterangepicker": "^3.1.0",
 "bootstrap-icons": "^1.5.0",
 "bootstrap-maxlength": "^1.10.1",
 "bootstrap-multiselectsplitter": "^1.0.4",
 "chalk": "^4.1.0",
 "chart.js": "^3.6.0",
 "clipboard": "^2.0.8",
 "countup.js": "^2.0.7",
 "cropperjs": "^1.5.12",
 "datatables.net": "^1.10.25",
 "datatables.net-bs5": "^1.10.25",
 "datatables.net-buttons": "^1.7.1",
 "datatables.net-buttons-bs5": "^1.7.1",
 "datatables.net-colreorder": "^1.5.4",
 "datatables.net-colreorder-bs5": "^1.5.4",
 "datatables.net-datetime": "^1.1.0",
 "datatables.net-fixedcolumns": "^3.3.3",
 "datatables.net-fixedcolumns-bs5": "^3.3.3",
 "datatables.net-fixedheader": "^3.1.9",
 "datatables.net-fixedheader-bs5": "^3.1.9",
 "datatables.net-plugins": "^1.10.24",
 "datatables.net-responsive": "^2.2.9",
 "datatables.net-responsive-bs5": "^2.2.9",
 "datatables.net-rowgroup": "^1.1.3",
 "datatables.net-rowgroup-bs5": "^1.1.3",
 "datatables.net-rowreorder": "^1.2.8",
 "datatables.net-rowreorder-bs5": "^1.2.8",
 "datatables.net-scroller": "^2.0.4",
 "datatables.net-scroller-bs5": "^2.0.4",
 "datatables.net-select": "^1.3.3",
 "datatables.net-select-bs5": "^1.3.3",
 "del": "^7.0.0",
 "dropzone": "^5.9.2",
 "es6-promise": "^4.2.8",
 "es6-promise-polyfill": "^1.2.0",
 "es6-shim": "^0.35.5",
 "esri-leaflet": "^3.0.2",
 "esri-leaflet-geocoder": "^3.0.0",
 "flatpickr": "^4.6.9",
 "flot": "^4.2.2",
 "fslightbox": "^3.3.0-2",
 "fullcalendar": "^5.8.0",
 "glob": "^8.0.3",
 "handlebars": "^4.7.7",
 "inputmask": "^5.0.6",
 "jkanban": "^1.3.1",
 "jquery": "3.6.0",
 "jquery-ui-dist": "^1.13.2",
 "jquery.repeater": "^1.2.1",
 "jstree": "^3.3.11",
 "jszip": "^3.6.0",
 "leaflet": "^1.7.1",
 "line-awesome": "^1.3.0",
 "moment": "^2.29.1",
 "moment-with-locales-es6": "^1.0.1",
 "nouislider": "^15.2.0",
 "npm": "^9.1.1",
 "npm-install-all": "^1.1.6",
 "pdfmake": "^0.2.0",
 "prism-themes": "^1.7.0",
 "prismjs": "^1.24.1",
 "quill": "^1.3.7",
 "replace-in-file-webpack-plugin": "^1.0.6",
 "rimraf": "^3.0.2",
 "select2": "^4.1.0-rc.0",
 "smooth-scroll": "^16.1.3",
 "sweetalert2": "^11.0.18",
 "tiny-slider": "^2.9.3",
 "tinymce": "^5.8.2",
 "toastr": "^2.1.4",
 "ts-loader": "^9.4.1",
 "typed.js": "^2.0.12",
 "vis-timeline": "^7.4.9",
 "wnumb": "^1.2.0"
 }
}



My webpack.mix.js:


const mix = require("laravel-mix");
const glob = require("glob");
const path = require("path");
const ReplaceInFileWebpackPlugin = require("replace-in-file-webpack-plugin");
const rimraf = require("rimraf");
const del = require("del");
const fs = require("fs");

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel applications. By default, we are compiling the CSS
 | file for the application as well as bundling up all the JS files.
 |
 */

// arguments/params from the line command
const args = getParameters();

mix.options({
 cssNano: {
 discardComments: false,
 }
});

// Remove existing generated assets from public folder
del.sync(["public/css/*", "public/js/*", "public/media/*", "public/plugins/*",]);

// Build 3rd party plugins css/js
mix.sass(`resources/src/webpack/plugins/plugins.scss`, `public/assets/plugins/global/plugins.bundle.css`).then(() => {
 // remove unused preprocessed fonts folder
 rimraf(path.resolve("public/fonts"), () => {
 });
 rimraf(path.resolve("public/images"), () => {
 });
}).sourceMaps(!mix.inProduction())
 // .setResourceRoot("./")
 .options({processCssUrls: false}).js([`resources/src/webpack/plugins/plugins.js`], `public/assets/plugins/global/plugins.bundle.js`);

// Build extended plugin styles
mix.sass(`resources/src/sass/plugins.scss`, `public/assets/plugins/global/plugins-custom.bundle.css`);

mix.sass(`resources/src/sass/style.scss`, `public/assets/css/style.bundle.css`, {sassOptions: {includePaths: ["node_modules"]}})
 // .options({processCssUrls: false})
 .js([`resources/src/webpack/scripts.js`], `public/assets/js/scripts.bundle.js`);

mix.js("./resources/src/js/widgets/**/!(_)*.js", "public/assets/js/widgets.bundle.js");


// Dark skin mode css files
if (args.indexOf("dark_mode") !== -1) {
 mix.sass(`resources/src/plugins/plugins.dark.scss`, `public/assets/plugins/global/plugins.dark.bundle.css`);
 mix.sass(`resources/src/sass/plugins.dark.scss`, `public/assets/plugins/global/plugins-custom.dark.bundle.css`);
 mix.sass(`resources/src/sass/style.dark.scss`, `public/assets/css/style.dark.bundle.css`, {sassOptions: {includePaths: ["node_modules"]}});
}


// Build custom 3rd party plugins
(glob.sync(`resources/src/plugins/custom/**/*.js`) || []).forEach(file => {
 mix.js(file, `public/assets/${file.replace(`resources/src/`, "").replace(".js", ".bundle.js")}`);
});
(glob.sync(`resources/src/plugins/custom/**/*.scss`) || []).forEach(file => {
 mix.sass(file, `public/assets/${file.replace(`resources/src/`, "").replace(".scss", ".bundle.css")}`);
});

(glob.sync(`resources/src/sass/pages/**/!(_)*.scss`) || []).forEach(file => {
 file = file.replace(/[\\\/]+/g, "/");
 mix.sass(file, file.replace(`resources/src/sass`, `public/assets/css`).replace(/\.scss$/, ".css"));
});

var extendedFiles = [];
// Extend custom js files for laravel
(glob.sync("resources/src/extended/js/**/*.js") || []).forEach(file => {
 var output = `public/assets/${file.replace("resources/src/extended/", "")}`;
 mix.js(file, output);
 extendedFiles.push(output);
});

(glob.sync("resources/src/js/custom/**/*.js") || []).forEach(file => {
 var output = `public/assets/${file.replace("resources/src/", "")}`;
 if (extendedFiles.indexOf(output) === -1) {
 mix.js(file, output);
 }
});

mix.copyDirectory("resources/src/media", `public/assets/media`);
mix.copyDirectory(`resources/src/media`, `public/assets/media`);

(glob.sync(`resources/src/sass/themes/**/!(_)*.scss`) || []).forEach(file => {
 file = file.replace(/[\\\/]+/g, "/");
 mix.sass(file, file.replace(`resources/src/sass`, `public/assets/css`).replace(/\.scss$/, ".css"));
});

let plugins = [
 new ReplaceInFileWebpackPlugin([
 {
 // rewrite font paths
 dir: path.resolve(`public/assets/plugins/global`),
 test: /\.css$/,
 rules: [
 {
 // fontawesome
 search: /url\((\.\.\/)?webfonts\/(fa-.*?)"?\)/g,
 replace: "url(./fonts/@fortawesome/$2)",
 },
 {
 // flaticon
 search: /url\(("?\.\/)?font\/(Flaticon\..*?)"?\)/g,
 replace: "url(./fonts/flaticon/$2)",
 },
 {
 // flaticon2
 search: /url\(("?\.\/)?font\/(Flaticon2\..*?)"?\)/g,
 replace: "url(./fonts/flaticon2/$2)",
 },
 {
 // keenthemes fonts
 search: /url\(("?\.\/)?(Ki\..*?)"?\)/g,
 replace: "url(./fonts/keenthemes-icons/$2)",
 },
 {
 // lineawesome fonts
 search: /url\(("?\.\.\/)?fonts\/(la-.*?)"?\)/g,
 replace: "url(./fonts/line-awesome/$2)",
 },
 {
 // socicons
 search: /url\(("?\.\.\/)?font\/(socicon\..*?)"?\)/g,
 replace: "url(./fonts/socicon/$2)",
 },
 {
 // bootstrap-icons
 search: /url\(.*?(bootstrap-icons\..*?)"?\)/g,
 replace: "url(./fonts/bootstrap-icons/$1)",
 },
 ],
 },
 ]),
];

mix.webpackConfig({
 plugins: plugins,
 ignoreWarnings: [{
 module: /esri-leaflet/,
 message: /version/,
 }],
 resolve: {
 alias: {
 "@": path.resolve(__dirname, "resources/"),
 "handlebars": "handlebars/dist/handlebars.js",
 },
 extensions: [".js", ".scss"],
 fallback: {
 util: false,
 },
 }
});

// Webpack.mix does not copy fonts, manually copy
(glob.sync(`resources/src/plugins/**/*.+(woff|woff2|eot|ttf)`) || []).forEach(file => {
 var folder = file.match(/resources\/src\/plugins\/(.*?)\//)[1];
 mix.copy(file, `public/assets/plugins/global/fonts/${folder}/${path.basename(file)}`);
});
(glob.sync("node_modules/+(@fortawesome|socicon|line-awesome|bootstrap-icons)/**/*.+(woff|woff2|eot|ttf)") || []).forEach(file => {
 var folder = file.match(/node_modules\/(.*?)\//)[1];
 mix.copy(file, `public/assets/plugins/global/fonts/${folder}/${path.basename(file)}`);
});

// Raw plugins
(glob.sync(`resources/src/plugins/custom/**/*.js.json`) || []).forEach(file => {
 let filePaths = JSON.parse(fs.readFileSync(file, "utf-8"));
 const fileName = path.basename(file).replace(".js.json", "");
 mix.scripts(filePaths, `public/assets/plugins/custom/${fileName}/${fileName}.bundle.js`);
});

function getParameters() {
 var possibleArgs = [
 "dark_mode"
 ];
 for (var i = 0; i <= 13; i++) {
 possibleArgs.push("demo" + i);
 }

 var args = [];
 possibleArgs.forEach(function (key) {
 if (process.env["npm_config_" + key]) {
 args.push(key);
 }
 });

 return args;
}


user
Istiyak Sheyam 2 years ago
Webpack Laravel HTML
9 Answers
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 (9)

user
david kane 4 months ago

If I remove the webpack del line and the need del comment. and remove every file from the public/penalty shooters 2


user
Faizal Author2 years ago

Hi,

Usually, this error appears if there is this option in the package.json. Could you try to remove it if any?


"type": "module",


Thanks


user
Faizal Author2 years ago

Hi

The scripts.js file should exist in resources/assets/demo1/js/scripts.js. Do you not use the existing Metronic Laravel? May I know if you are integrating the HTML version into the new Laravel?

Please check the existing Metronic Laravel, you should find the file resources/assets/demo1/js/scripts.js and all assets are already integrated into the webpack mix.

Thanks


user
Istiyak Sheyam 2 years ago

No, I am integrating it into my existing laravel project.


user
Faizal Author2 years ago

Hi Istiyak Sheyam,

Could you please try to remove the node_modules folder? Then use yarn to install instead of using npm. Use below commands.


npm i -g yarn
yarn
npm run dev


Thanks


user
Istiyak Sheyam 2 years ago

Still get the same error

[webpack-cli] Error [ERR_REQUIRE_ESM]: require() of ES Module [app]/node_modules/del/index.js from [app]/webpack.mix.js not supported.
Instead change the require of index.js in [app]/webpack.mix.js to a dynamic import() which is available in all CommonJS modules.
at Object.<anonymous> ([app]/webpack.mix.js:6:13)
at module.exports ([app]/node_modules/laravel-mix/setup/webpack.config.js:11:5)
at loadConfigByPath ([app]/node_modules/webpack-cli/lib/webpack-cli.js:1439:37)
at async Promise.all (index 0)
at async WebpackCLI.loadConfig ([app]/node_modules/webpack-cli/lib/webpack-cli.js:1454:35)
at async WebpackCLI.createCompiler ([app]/node_modules/webpack-cli/lib/webpack-cli.js:1785:22)
at async WebpackCLI.runWebpack ([app]/node_modules/webpack-cli/lib/webpack-cli.js:1890:20)
at async Command.<anonymous> ([app]/node_modules/webpack-cli/lib/webpack-cli.js:912:21)
at async Promise.all (index 1)
at async Command.<anonymous> ([app]/node_modules/webpack-cli/lib/webpack-cli.js:1372:13) {
code: 'ERR_REQUIRE_ESM'
}


user
Istiyak Sheyam 2 years ago

If I comment out require del, and del line from webpack. And delete all the files in public/asset/

and then run npm run dev. The mix runs with the following error.

: $weight: Passing a number without unit % (100) is deprecated.

To preserve current behavior: $weight * 1%

More info: https://sass-lang.com/d/function-units

â•·
201 │ @return mix(rgba($foreground, 1), $background, opacity($foreground) * 100);
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
node_modules/bootstrap/scss/_functions.scss 201:11 opaque()
node_modules/bootstrap/scss/mixins/_table-variants.scss 4:28 table-variant()
node_modules/bootstrap/scss/_tables.scss 147:3 @import
resources/src/sass/components/components.scss 12:9 @import
resources/src/sass/style.scss 9:9 root stylesheet

ERROR in /assets/js/scripts.bundle
Module not found: Error: Can't resolve
app/resources/src/webpack/scripts.js' in 'app'

webpack compiled with 1 error


user
Istiyak Sheyam 2 years ago

So basically scripts.js is missing. But I do have scripts.demo1.js


user
Istiyak Sheyam 2 years ago

And if I change change scripts.js to scripts.demo1.js the mix compiles with the following error.


: Found no color leading to 4.5:1 contrast ratio against #feffff...
 node_modules/bootstrap/scss/_functions.scss 168:3 color-contrast()
 node_modules/bootstrap/scss/mixins/_table-variants.scss 4:13 table-variant()
 node_modules/bootstrap/scss/_tables.scss 147:3 @import
 resources/src/sass/components/components.scss 12:9 @import
 resources/src/sass/style.scss 9:9 root stylesheet


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