Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
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 1 year ago
HTML Laravel Webpack
8 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 (8)

user
Faizal Author1 year 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 1 year 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 1 year 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 1 year ago

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


user
Istiyak Sheyam 1 year 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


user
Faizal Author1 year 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 1 year ago

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


user
Faizal Author1 year 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


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