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