Search code examples
javascriptlaravelnpmlaravel-mixbootstrap-tags-input

Using npm installed JS/CSS lib on a Laravel application

I'm actually experimenting with Laravel and npm, and i struggle to use Bootstrap Tags Input lib inside my app (also as any other npm installed lib).

It seems pretty easy but i'm missing something here.

What i did:

Install dependencie

位 npm i bootstrap-tagsinput

npm WARN [email protected] requires a peer of node-sass@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of fibers@>= 3.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\watchpack\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ [email protected]
added 1 package from 2 contributors and audited 1088 packages in 4.143s
found 2 vulnerabilities (1 low, 1 high)
  run `npm audit fix` to fix them, or `npm audit` for details

位 npm install

npm WARN [email protected] requires a peer of node-sass@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of fibers@>= 3.1.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\watchpack\node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

audited 1088 packages in 3.31s
found 2 vulnerabilities (1 low, 1 high)
  run `npm audit fix` to fix them, or `npm audit` for details

Link the lib to my current source files

Inside my /resources/js/app.js file :

require('bootstrap-tagsinput/src/bootstrap-tagsinput');

I've tried stuff like window.BootstrapTagsInput = require('bootstrap-tagsinput/src/bootstrap-tagsinput'); Did not work any better.

Inside my resources/css/app.scss file :

// Bootstrap-tagsinput
@import '~bootstrap-tagsinput/src/bootstrap-tagsinput.css';
@import '~bootstrap-tagsinput/src/bootstrap-tagsinput-typeahead.css';

In my resources/views/layout/app.blade.php :

<div id="app" class="h-100">
    <input type="text" value="Amsterdam,Washington,Sydney,Beijing,Cairo" data-role="tagsinput" />
</div>

Compile

npm run watch

 DONE  Compiled successfully in 4475ms                                                                                                                                                                                                                                                                             12:39:08 AM

       Asset     Size   Chunks             Chunk Names
/css/app.css  179 KiB  /js/app  [emitted]  /js/app
  /js/app.js  1.4 MiB  /js/app  [emitted]  /js/app

Result

What i have

https://i.sstatic.net/PXMd4.png

What i'm supposed to have:

https://i.sstatic.net/0wZz0.png

Conclusion

I've searched the answer to my question on many posts already, but nothing seems to work on my case. Many thanks to anybody who will try to help me on this, really appreciate 馃檹.

Update

Ok, turns out that the installation process was good, everything is finally working well, sorry for your time 馃檹.

Solution

  • Turns out that the installation process of the plugin was good, and I simply had a minor issue in my dev environment.