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;
}

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)

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

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. ([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. ([app]/node_modules/webpack-cli/lib/webpack-cli.js:912:21)
at async Promise.all (index 1)
at async Command. ([app]/node_modules/webpack-cli/lib/webpack-cli.js:1372:13) {
code: 'ERR_REQUIRE_ESM'
}

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

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

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

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

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

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