Get 2024 Templates Mega Bundle!14 Bootstrap, Vue & React Templates + 3 Vector Sets
Get for 99$
Problem with JS and icons
I am using Keen v2.1.1 demo5 template in Laravel.
The js plugins don't work and none of the icon libraries work, any solution?
I attach my package.json and my webpack.mix.js
const mix = require("laravel-mix");
const rimraf = require("rimraf");
const path = require("path");
/*
|--------------------------------------------------------------------------
| 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.
|
*/
// 3rd party plugins css/js
mix.sass("resources/plugins/plugins.scss", "public/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/plugins/plugins.js"], "public/plugins/global/plugins.bundle.js");
mix.sass("resources/sass/app.scss", "public/css");
mix.js("resources/js/app.js", "public/js").react();
// copy images folder into laravel public folder
//mix.copyDirectory("resources/demo5/src/media", "public/assets/media");
// Global jquery
//mix.autoload({
//"jquery": ["$", "jQuery"],
//Popper: ["popper.js", "default"],
//});
/**
* plugins specific issue workaround for webpack
* @see https://github.com/morrisjs/morris.js/issues/697
* @see https://stackoverflow.com/questions/33998262/jquery-ui-and-webpack-how-to-manage-it-into-module
*/
mix.webpackConfig({
resolve: {
alias: {
"morris.js": "morris.js/morris.js",
jQuery: path.resolve(__dirname, "node_modules/jquery"),
},
},
stats: {
children: true,
}
});{
"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"
},
"dependencies": {
"@ckeditor/ckeditor5-alignment": "^35.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.1",
"@fullcalendar/bootstrap": "^4.4.2",
"@fullcalendar/core": "^4.4.2",
"@fullcalendar/daygrid": "4.4.2",
"@fullcalendar/google-calendar": "^4.4.0",
"@fullcalendar/interaction": "^4.4.2",
"@fullcalendar/list": "^4.4.2",
"@fullcalendar/timegrid": "^4.4.2",
"@shopify/draggable": "^1.0.0-beta.8",
"@uppy/core": "^1.14.0",
"@uppy/progress-bar": "^1.3.21",
"@uppy/tus": "^1.7.9",
"@yaireo/tagify": "^4.16.4",
"acorn": "^8.0.4",
"animate.css": "^4.1.1",
"apexcharts": "^3.35.5",
"autoprefixer": "10.4.5",
"autosize": "^4.0.2",
"block-ui": "^2.70.1",
"bootstrap": "4.6.0",
"bootstrap-datepicker": "^1.9.0",
"bootstrap-daterangepicker": "^3.1.0",
"bootstrap-markdown": "^2.10.0",
"bootstrap-maxlength": "^1.10.0",
"bootstrap-notify": "^3.1.3",
"bootstrap-select": "^1.13.18",
"bootstrap-switch": "3.3.0",
"bootstrap-timepicker": "^0.5.2",
"bootstrap-touchspin": "^4.2.5",
"chart.js": "^2.9.4",
"clipboard": "^2.0.4",
"counterup": "^1.0.2",
"cropperjs": "^1.5.6",
"datatables.net": "^1.10.22",
"datatables.net-autofill-bs4": "^2.3.5",
"datatables.net-bs4": "^1.12.1",
"datatables.net-buttons-bs4": "^1.6.3",
"datatables.net-colreorder-bs4": "^1.5.2",
"datatables.net-fixedcolumns-bs4": "^3.3.2",
"datatables.net-fixedheader-bs4": "^3.1.7",
"datatables.net-keytable-bs4": "^2.5.3",
"datatables.net-responsive-bs4": "^2.2.6",
"datatables.net-rowgroup-bs4": "^1.1.2",
"datatables.net-rowreorder-bs4": "^1.2.7",
"datatables.net-scroller-bs4": "^2.0.3",
"datatables.net-select-bs4": "^1.3.1",
"dropzone": "^5.7.2",
"dual-listbox": "1.4.0-alpha3",
"es6-promise": "^4.2.8",
"es6-promise-polyfill": "^1.2.0",
"es6-shim": "^0.35.6",
"esri-leaflet": "^2.5.1",
"esri-leaflet-geocoder": "^2.3.3",
"flot": "^4.2.1",
"gmaps": "^0.4.25",
"handlebars": "^4.7.7",
"inputmask": "^5.0.5",
"ion-rangeslider": "^2.3.1",
"jkanban": "^1.2.3",
"jquery": "^3.4.1",
"jquery-mask-plugin": "^1.14.16",
"jquery.repeater": "^1.2.1",
"jqvmap": "^1.0.1",
"jstree": "^3.3.10",
"jszip": "^3.5.0",
"leaflet": "^1.7.1",
"line-awesome": "^1.3.0",
"markdown": "^0.5.0",
"moment": "^2.29.1",
"morris.js": "^0.5.0",
"nouislider": "^14.6.2",
"owl.carousel": "^2.3.4",
"pace": "0.0.4",
"pace-js": "^1.0.2",
"pdfmake": "^0.1.68",
"perfect-scrollbar": "^1.5.0",
"popper.js": "^1.16.1",
"prismjs": "^1.22.0",
"quill": "^1.3.7",
"react-beautiful-dnd": "^13.1.0",
"react-dropzone": "^11.4.2",
"react-select": "^4.3.1",
"rimraf": "^3.0.2",
"select2": "^4.0.13",
"socicon": "^3.0.5",
"sticky-js": "^1.3.0",
"summernote": "^0.8.18",
"sweetalert2": "^10.16.9",
"tempusdominus-bootstrap-4": "^5.1.2",
"tinymce": "^5.5.1",
"toastr": "^2.1.4",
"typeahead.js": "^0.11.1",
"uppy": "^3.0.1",
"waypoints": "^4.0.1",
"wnumb": "^1.2.0"
},
"devDependencies": {
"@babel/preset-react": "^7.18.6",
"axios": "^0.21",
"laravel-mix": "^6.0.6",
"lodash": "^4.17.19",
"postcss": "^8.1.14",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"resolve-url-loader": "^3.1.3",
"sass": "^1.54.9",
"sass-loader": "^12.6.0"
}
}
Replies (1)
Hi Francisco Guadarrama
install this plugin laravel package.json
yarn add --dev replace-in-file-webpack-pluginPut this on top of
webpack.config.jsconst ReplaceInFileWebpackPlugin = require("replace-in-file-webpack-plugin");Then add below code in
mix.webpackConfigmix.webpackConfig({
plugins: new ReplaceInFileWebpackPlugin([
{
// rewrite font paths
dir: path.resolve(`public/${demo}/plugins/global`),
test: /\.css$/,
rules: [
{
// fontawesome
search: /url\((\.\.\/)?webfonts\/(fa-.*?)"?\)/g,
replace: "url(./fonts/@fortawesome/$2)",
},
{
// lineawesome fonts
search: /url\(("?\.\.\/)?fonts\/(la-.*?)"?\)/g,
replace: "url(./fonts/line-awesome/$2)",
},
{
// bootstrap-icons
search: /url\(.*?(bootstrap-icons\..*?)"?\)/g,
replace: "url(./fonts/bootstrap-icons/$1)",
},
{
// fonticon
search: /url\(.*?(fonticon\..*?)"?\)/g,
replace: "url(./fonts/fonticon/$1)",
},
],
},
]),
});Thanks
