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;
}
I tried changing the require to import. Adding type module in package.json, and all the other things I could find in the internet. It fails everytime.
