Get 2024 Templates Mega Bundle!$1000 worth of 19 Bootstrap HTML, Vue & React Templates + 3 Vector Sets for just $99
Get for 99$

Laravel Select2 is not working Metronic V038


I have integrated metronic 028 into my laravel project, all default build.

My select2 works like the one below. The CSS doesn't work properly.
<img src="https://prnt.sc/Sox5oRACe5HY"></img


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


1) Most of the files above are referred to the node_modules folder.

2) This is the alias path. It refers to the src folder in the demo.


require("@/src/...);


For example;


window.FormValidation = require("@/src/plugins/formvalidation/dist/js/FormValidation.full.min.js");


/metronic_v8.1.6/html/demo1/src/plugins/formvalidation/dist/js/FormValidation.full.min.js


Thanks



You can refer to the existing Metronic Laravel for these 2 files. The select2 plugin is imported at these files;


resources/assets/core/plugins/plugins.js
resources/assets/core/plugins/plugins.scss


Thanks



I integrated metronic into my existing laravel project using the metronic HTML version. There are a lot of files that can't be located. Could you please help?


//
// 3rd-Party Plugins JavaScript Includes
//


//////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////
//// Mandatory Plugins Includes(do not remove or change order!) ////
//////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////

// Jquery - jQuery is a popular and feature-rich JavaScript library. Learn more: https://jquery.com/
window.jQuery = window.$ = require("jquery");

// Bootstrap - The most popular framework uses as the foundation. Learn more: http://getbootstrap.com
window.bootstrap = require("bootstrap");

// Popper.js - Tooltip & Popover Positioning Engine used by Bootstrap. Learn more: https://popper.js.org
window.Popper = require("@popperjs/core");

// Wnumb - Number & Money formatting. Learn more: https://refreshless.com/wnumb/
window.wNumb = require("wnumb");

// Moment - Parse, validate, manipulate, and display dates and times in JavaScript. Learn more: https://momentjs.com/
window.moment = require("moment");

// ES6-Shim - ECMAScript 6 compatibility shims for legacy JS engines. Learn more: https://github.com/paulmillr/es6-shim
require("es6-shim/es6-shim.min.js");

//////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////
/// Optional Plugins Includes(you can remove or add) ///////////////
//////////////////////////////////////////////////////////////////////
//////////////////////////////////////////////////////////////////////

// Apexcharts - mBdern charting library that helps developers to create beautiful and interactive visualizations for web pages: https://apexcharts.com/
window.ApexCharts = require("apexcharts/dist/apexcharts.min.js");

// FormValidation - Best premium validation library for JavaScript. Zero dependencies. Learn more: https://formvalidation.io/
window.FormValidation = require("@/src/plugins/formvalidation/dist/js/FormValidation.full.min.js");
window.FormValidation.plugins.Bootstrap5 = require("@/src/plugins/formvalidation/dist/amd/plugins/Bootstrap5.js").default;

// Date Range Picker - A JavaScript component for choosing date ranges, dates and times: https://www.daterangepicker.com/
require("bootstrap-daterangepicker/daterangepicker.js");

// Bootstrap Maxlength - This plugin integrates by default with Twitter bootstrap using badges to display the maximum length of the field where the user is inserting text: https://github.com/mimo84/bootstrap-maxlength
require("bootstrap-maxlength/src/bootstrap-maxlength.js");
require("@/src/plugins/bootstrap-multiselectsplitter/bootstrap-multiselectsplitter.min.js");

// Select2 - Select2 is a jQuery based replacement for select boxes: https://select2.org/
require("~select2/dist/js/select2.full.js");
require("../../../../resources/src/js/vendors/plugins/select2.init.js");

// Flatpickr - is a lightweight and powerful datetime picker.
require("flatpickr/dist/flatpickr.min.js");
require("@/src/js/vendors/plugins/flatpickr.init.js");

// Inputmask - is a javascript library which creates an input mask: https://github.com/RobinHerbots/Inputmask
require("inputmask/dist/inputmask.js");
require("inputmask/dist/bindings/inputmask.binding.js");

// noUiSlider - is a lightweight range slider with multi-touch support and a ton of features. It supports non-linear ranges, requires no external dependencies: https://refreshless.com/nouislider/
window.noUiSlider = require("nouislider/dist/nouislider.min.js");

// The autosize - function accepts a single textarea element, or an array or array-like object (such as a NodeList or jQuery collection) of textarea elements: https://www.jacklmoore.com/autosize/
window.autosize = require("autosize/dist/autosize.min.js");

// Clipboard - Copy text to the clipboard shouldn"t be hard. It shouldn"t require dozens of steps to configure or hundreds of KBs to load: https://clipboardjs.com/
window.ClipboardJS = require("clipboard/dist/clipboard.min.js");

// DropzoneJS - is an open source library that provides drag"n"drop file uploads with image previews: https://www.dropzonejs.com/
window.Dropzone = require("dropzone/dist/min/dropzone.min.js").default;
require("@/src/js/vendors/plugins/dropzone.init.js");

// Quill - is a free, open source WYSIWYG editor built for the modern web. Completely customize it for any need with its modular architecture and expressive API: https://quilljs.com/
window.Quill = require("quill/dist/quill.js");

// Tagify - Transforms an input field or a textarea into a Tags component, in an easy, customizable way, with great performance and small code footprint, exploded with features: https://github.com/yairEO/tagify
require("@yaireo/tagify/dist/tagify.polyfills.min.js");
window.Tagify = require("@yaireo/tagify/dist/tagify.min.js");

// Toastr - is a Javascript library for non-blocking notifications. jQuery is required. The goal is to create a simple core library that can be customized and extended: https://github.com/CodeSeven/toastr
window.toastr = require("@/src/plugins/toastr/build/toastr.min.js");

// Bootstrap Session Timeout - Session timeout and keep-alive control with a nice Bootstrap warning dialog: https://github.com/orangehill/bootstrap-session-timeout
window.sessionTimeout = require("@/src/plugins/bootstrap-session-timeout/dist/bootstrap-session-timeout.min.js");

// JQuery Idletimer - provides you a way to monitor user activity with a page: https://github.com/thorst/jquery-idletimer
require("@/src/plugins/jquery-idletimer/idle-timer.min.js");

// ES6 Promise Polyfill - This is a polyfill of the ES6 Promise: https://github.com/lahmatiy/es6-promise-polyfill
require("es6-promise-polyfill/promise.min.js");

// Sweetalert2 - a beautiful, responsive, customizable and accessible (WAI-ARIA) replacement for JavaScript"s popup boxes: https://sweetalert2.github.io/
window.Swal = window.swal = require("sweetalert2/dist/sweetalert2.min.js");
require("@/src/js/vendors/plugins/sweetalert2.init.js");

// CountUp.js - is a dependency-free, lightweight JavaScript class that can be used to quickly create animations that display numerical data in a more interesting way.
window.countUp = require("countup.js/dist/countUp.withPolyfill.min.js");

// Chart.js - Simple yet flexible JavaScript charting for designers & developers
window.Chart = require("chart.js/dist/chart.js");

// Tiny slider - for all purposes, inspired by Owl Carousel.
window.tns = require("tiny-slider/src/tiny-slider.js").tns;

// A lightweight script to animate scrolling to anchor links
window.SmoothScroll = require("smooth-scroll/dist/smooth-scroll.js");



Do you integrate the HTML version into your own existing Laravel project?
Have you imported these JS and SCSS files for select2?

JS

"node_modules/select2/dist/js/select2.full.js",
"resources/assets/core/js/vendors/plugins/select2.init.js",


SCSS

@import "~select2/src/scss/core.scss";


Thanks



Yes. HTML version.

And how and where to integrate them. Please explain.



Same here. I build the CSS and JS with gulp but i still cant use select2. Help!



What about select2?



Hi Istiyak Sheyam,

Sorry for the delay. Could you please try to change tagify in package.json to


"@yaireo/tagify": "4.16.4",


Remove yarn.lock file, then retry.

There is issue with the latest version.

https://github.com/yairEO/tagify/issues/461

Thanks



I solved these problems using @import and added the mapping and variable files. But still, select2 has the same issue. A lot of built-in js functionalities are working.
I need the solution ASAP.



I got those issue while building assets

ERROR in ./resources/src/sass/plugins.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined mixin.
â•·
48 │ @include placeholder($input-placeholder-color);
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
resources/src/sass/vendors/plugins/_select2.scss 48:4 @import
resources/src/sass/vendors/plugins/_plugins.scss 8:9 @import
resources/src/sass/plugins.scss 16:9 root stylesheet
at processResult (app/node_modules/webpack/lib/NormalModule.js:758:19)
at app/node_modules/webpack/lib/NormalModule.js:860:5
at app/node_modules/loader-runner/lib/LoaderRunner.js:400:11
at app/node_modules/loader-runner/lib/LoaderRunner.js:252:18
at context.callback (app/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
at Object.loader (app/node_modules/sass-loader/dist/index.js:69:5)

ERROR in ./resources/src/sass/style.scss
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined mixin.
â•·
55 │ @include svg-icon-size(24px);
│ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^
╵
resources/src/sass/components/_card.scss 55:21 @import
resources/src/sass/components/components.scss 54:9 @import
resources/src/sass/style.scss 12:9 root stylesheet
at processResult (app/node_modules/webpack/lib/NormalModule.js:758:19)
at app/node_modules/webpack/lib/NormalModule.js:860:5
at app/node_modules/loader-runner/lib/LoaderRunner.js:400:11
at app/node_modules/loader-runner/lib/LoaderRunner.js:252:18
at context.callback (app/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
at Object.loader (app/node_modules/sass-loader/dist/index.js:69:5)

2 ERRORS in child compilations (Use 'stats.children: true' resp. '--stats-children' for more details)
webpack compiled with 4 errors
error Command failed with exit code 1.

info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.



Also in my project tagify doesn't work.



screenshot
https://prnt.sc/Sox5oRACe5HY


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