Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now

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


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • 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:
window.jQuery = window.$ = require("jquery");

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

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

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

// Moment - Parse, validate, manipulate, and display dates and times in JavaScript. Learn more:
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:
window.ApexCharts = require("apexcharts/dist/apexcharts.min.js");

// FormValidation - Best premium validation library for JavaScript. Zero dependencies. Learn more:
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:
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:
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:
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:
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:
window.ClipboardJS = require("clipboard/dist/clipboard.min.js");

// DropzoneJS - is an open source library that provides drag"n"drop file uploads with image previews:
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:
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:
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 for documentation about this command.



Also in my project tagify doesn't work.


Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(