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.

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

screenshot
https://prnt.sc/Sox5oRACe5HY

Also in my project tagify doesn't work.

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.

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.

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

What about select2?

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!

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

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