Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Andreas94's avatar

Proper method for using npm packages

I want to learn how to manage installed plugins via npm, but I don't understand how to call up the resource in the blade.

Let's say I want to install fontawesome, so I do:

npm install --save @fortawesome/fontawesome-free

Adesso ho i file in:

node_modules\@fortawesome\fontawesome-free

What is now the correct method to be able to get the files:

node_modules@fortawesome\fontawesome-free\css\fontawesome.min.css

node_modules@fortawesome\fontawesome-free\js\fontawesome.min.js

And put them into my blade?

0 likes
2 replies
martinbean's avatar

What is now the correct method to be able to get the files… And put them into my blade?

@andreas94 You don’t. If you’re importing an NPM module, you’re usually importing it into something like your resources/js/app.js file.

With something like FontAwesome, it’s probably better to just use the CDN-hosted version until you‘re familiar with modules. FontAwesome is quite difficult with it having both JavaScript and CSS. Maybe try working with a JS-only module first, getting that into your app.js file and working with its contents first.

Andreas94's avatar

@martinbean I understand that it is difficult to integrate fontawesome even just because they are complex files with images and fonts, so let's do the example with LightGallery(lightgalleryjs.com), I want to understand the logic how it works... I couldn't find any guides online.

Execution:

npm install lightgallery

So I have the files in:

node_modules\lightgallery\lightgallery.umd.js node_modules\lightgallery\css\lightgallery-bundle.min.css

From what I understand then, I now have to integrate these into my webpack (looking at projects on github):

    mix.postCss('resources/css/gallery.css', 'public/css', [
        require("lightgallery")
    ]);

I'm doing something wrong, though, because I'm getting the error:

ERROR in ./resources/css/app.css
Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):
ReferenceError: window is not defined
    at C:\xampp\htdocs\LaraveLProject\node_modules\lightgallery\lightgallery.umd.js:163:13
    at initLgPolyfills (C:\xampp\htdocs\LaraveLProject\node_modules\lightgallery\lightgallery.umd.js:176:11)
    at $LG (C:\xampp\htdocs\LaraveLProject\node_modules\lightgallery\lightgallery.umd.js:532:9)
    at new LightGallery (C:\xampp\htdocs\LaraveLProject\node_modules\lightgallery\lightgallery.umd.js:856:25)
    at lightGallery (C:\xampp\htdocs\LaraveLProject\node_modules\lightgallery\lightgallery.umd.js:2727:16)
    at LazyResult.runOnRoot (C:\xampp\htdocs\LaraveLProject\node_modules\postcss\lib\lazy-result.js:339:16)
    at LazyResult.runAsync (C:\xampp\htdocs\LaraveLProject\node_modules\postcss\lib\lazy-result.js:393:26)
    at LazyResult.async (C:\xampp\htdocs\LaraveLProject\node_modules\postcss\lib\lazy-result.js:221:30)
    at LazyResult.then (C:\xampp\htdocs\LaraveLProject\node_modules\postcss\lib\lazy-result.js:206:17)
    at processResult (C:\xampp\htdocs\LaraveLProject\node_modules\webpack\lib\NormalModule.js:758:19)
    at C:\xampp\htdocs\LaraveLProject\node_modules\webpack\lib\NormalModule.js:860:5
    at C:\xampp\htdocs\LaraveLProject\node_modules\loader-runner\lib\LoaderRunner.js:400:11
    at C:\xampp\htdocs\LaraveLProject\node_modules\loader-runner\lib\LoaderRunner.js:252:18
    at context.callback (C:\xampp\htdocs\LaraveLProject\node_modules\loader-runner\lib\LoaderRunner.js:124:13)
    at Object.loader (C:\xampp\htdocs\LaraveLProject\node_modules\postcss-loader\dist\index.js:142:7)

ERROR in /js/app
Module not found: Error: Can't resolve 'C:\xampp\htdocs\LaraveLProject\resources\css\gallery.css' in 'C:\xampp\htdocs\LaraveLProject'

I would like to learn how to manage npm packages...

Please or to participate in this conversation.