Level 63
You can import the needed packages in the app.js file.
import { whatYouNeed } from 'package'
Nov 22, 2022
11
Level 4
How to use NPM packages with Laravel
I'm currently in the middle of developing a project. Lately, I found myself having the need to hookup some npm packages on my system. But I have been lucky with finding composer packages instead.
But I think its better to learn how to implement these npm packages myself because I will surely need some of them in the future.
I've tried searching from time to time how to fix this specific error Uncaught ReferenceError: require is not defined that I'm getting but I can't find an answer that works for me.
I don't really work with JS that much, I only use them for very basic stuff. So, I think I need to properly understand how this works.
So basically, I'm trying to install a package then on the guide it requires me to do this:
const zipcodes = require('zipcodes-ph');
then I need to link the js file like this <script src="path/to/zipcodes-ph/build/index.umd.min.js"></script> so this file is located in a folder in the node_modules directory.
With composer its easy because we just need to composer install then publish some files then we can use it right away I'm not really sure with what I'm doing with these npm packages.
I'm not really getting anything by searching or I'm just looking at the wrong place, so your help will pretty much be appreciated, thanks!
Level 4
@vincent15000 I don't know what's missing but it's still not working, is it possible that some npm packages are not compatible with laravel like some old ones? or is it not the case?
I imported it exactly how you told me import zipcodes from 'zipcodes-ph' then on my blade view I tried to use it like this console.log(zipcodes.find(6000)) then it's giving me the error zipcodes in not defined.
1 like
Level 75
@kramsuiluj the package would have instructions.
1 like
Level 4
@jlrdw yes it does, but it works different on laravel right?
the instruction on the npm package was only these two:
const zipcodes = require('zipcodes-ph');
//then link the js file on the HTML
<script src="path/to/zipcodes-ph/build/index.umd.min.js"></script>
1 like
Level 63
@kramsuiluj What have you put in your code instead of this ?
<script src="path/to/zipcodes-ph/build/index.umd.min.js"></script>
Level 4
@vincent15000 this one @vite('resources/js/app.js')
1 like
Level 63
@kramsuiluj Can you show the code you have wrote ? I mean the code to import the zipcodes.
Level 4
@vincent15000 this is the code on my app.js
import './bootstrap';
import zipcodes from 'zipcodes-ph';
the code on my bootstrap.js is the default code I was trying the package on a newly installed laravel project.
1 like
Level 63
@kramsuiluj Find the node_modules folder in your project folder, and find inside it the zipcodes-ph folder.
Then add the script in the head tags.
<script src="path/to/zipcodes-ph/build/index.umd.min.js"></script> // replace path/to/... with your path
1 like
Level 4
@vincent15000 Ok, so this is what I have done so far:
app.js
import './bootstrap';
import zipcodes from 'zipcodes-ph';
test.blade.php
// head
<script src="node_modules/zipcodes-ph/build/index.umd.min.js"></script>
// then on the body
<script>
console.log(zipcodes.find(6000);
</script>
Then im getting two errors on the console:
// First
GEThttp://localhost:8000/node_modules/zipcodes-ph/build/index.umd.min.js
[HTTP/1.1 404 Not Found 182ms]
Loading failed for the <script> with source “http://localhost:8000/node_modules/zipcodes-ph/build/index.umd.min.js”.
// Second
Uncaught ReferenceError: zipcodes is not defined
Level 29
import zipcodes from 'zipcodes-ph';
This import does not mean you can access it globally. Please refer to the way Laravel does it.
Please or to participate in this conversation.