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

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 (1)

Hi Francisco Guadarrama

install this plugin laravel package.json

yarn add --dev replace-in-file-webpack-plugin

Put this on top of webpack.config.js

const ReplaceInFileWebpackPlugin = require('replace-in-file-webpack-plugin');

Then add below code in mix.webpackConfig

mix.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

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