Next.js Discord

Discord Forum

Vercel ignores node_modules?

Unanswered
Cinnamon posted this in #help-forum
Open in Discord
CinnamonOP
Hey all, I am trying to deploy my project.
I can get it up fine, but nothing from my node modules works.
For example, I have AOS and Flowbite installed via NPM. Locally, there is animation, and FlowBite allows the navbar dropdown functionality to work.
Once deployed to Vercel, there is no animation, and the functionality on the navbar no longer works.

Let me know what I need to send over to get this sorted, thanks for the help in advance guys! 🙂

91 Replies

CinnamonOP
Project tree
node_modules
src
-index.html
-styles.css
-tailwind.css
bs-config.js
package-lock.json
package.json
tailwind.config.js
Bengal
vercel should be given a build step that it runs, not the pure node_modules etc.
so liike your npm run build should create the thingo, and vercel runs that to get ur node_modules
+ if ur using git maybe u have it .gitignore'd?
CinnamonOP
im importing it into my index.html like this:
<script src="/node_modules/flowbite/dist/flowbite.min.js"></script>
<script src="/node_modules/aos/dist/aos.js"></script>
@Bengal + if ur using git maybe u have it .gitignore'd?
CinnamonOP
nothing in my gitignore 😔
Bengal
in ur browser
inspect element
and try command click the /node_modules/flowbite/dist/flowbite.min,js
this checks to see if the node modules is sent as a bundle
CinnamonOP
this may be why its not working?
clicking on it gives a vercel 404
Bengal
yeah exactly haha
it's not being sent w ur stuff
CinnamonOP
this is my file tree
Bengal
oop
check here to see if its in ur static assets?
CinnamonOP
and these are my build settings
Bengal
scroll down from home page
CinnamonOP
its not
@Cinnamon this is my file tree
Bengal
ok here
delete ur node_modules and package lock.json
and run npm run build
or
actually
cuz idt the stuff in ur node modules is in ur package.json
CinnamonOP
done
nah its fine already committed haha
Bengal
ok sick
and does it recreate ur node modules and packagelock?
locally
@Cinnamon done
Bengal
.
CinnamonOP
ah im getting an errrir
Bengal
once u fix wtv error u have there, when u push to vercel itll work
CinnamonOP
ty man, ill let you know what happens next haha
Bengal
easy gl 🙂
CinnamonOP
my stuff all deploys fine locally - same issue again on vercel though
its gotta be the output directory maybe?
or maybe the root directory?
@Bengal Click to see attachment
Bengal
check here again
CinnamonOP
Bengal
show build logs
@Cinnamon or maybe the root directory?
Bengal
if ur node_modules is in the same level as ur index.html it shld be fine
CinnamonOP
[00:45:45.407] Running build in Washington, D.C., USA (East) – iad1
[00:45:45.528] Cloning github.com/codepulsedigital/html_template (Branch: main, Commit: 981c673)
[00:45:46.980] Cloning completed: 1.453s
[00:45:49.364] Restored build cache
[00:45:49.504] Running "vercel build"
[00:45:53.081] Vercel CLI 34.2.7
[00:45:53.670] Running "install" command: `npm install`...
[00:45:55.346] 
[00:45:55.347] up to date, audited 314 packages in 863ms
[00:45:55.347] 
[00:45:55.347] 42 packages are looking for funding
[00:45:55.347]   run `npm fund` for details
[00:45:55.348] 
[00:45:55.348] found 0 vulnerabilities
[00:45:55.714] 
[00:45:55.714] > html_template@1.0.0 build
[00:45:55.714] > npx tailwindcss build -i src/tailwind.css -o src/tailwind.css
[00:45:55.714] 
[00:45:56.579] 
[00:45:56.580] Rebuilding...
[00:45:56.814] 
[00:45:56.814] Done in 327ms.
[00:45:56.846] Build Completed in /vercel/output [3s]
[00:45:56.870] Deploying outputs...
[00:45:57.269] Injected preview comments middleware, you can disable this in your project settings.
[00:45:57.586] 
[00:45:57.840] Deployment completed
[00:46:00.973] Uploading build cache [8.64 MB]...
[00:46:01.476] Build cache uploaded: 502.479ms
its not
Bengal
oh
ohh
yeah
CinnamonOP
haha
Bengal
ur pushing the src folder not ur project folder
i think
CinnamonOP
project folder is root right?
Bengal
yeah
CinnamonOP
am i changing output directory?
or root directory?
Bengal
uh u can either play around with the vercel stuff (i don't recommend) or change the git repo
@Cinnamon or root directory?
Bengal
honestly don't know
cuz rn ur git is tracking the src folder, even in real-world projects u'd want to be tracking from the project root
like where all the .config and .json files are
CinnamonOP
Bengal
oh
CinnamonOP
my git has everything
lol
@Cinnamon Click to see attachment
Bengal
ight yeah u right haha
somewhere something here
CinnamonOP
nahh its gotta be deployment settings
because if the git repo has everything
okay cool so ive got it working - kind of
https://html-hello-world-dqoqnxvt3-codepulse-digital.vercel.app/src/index.html - page with working node_modules
how can i get it to start from src index?
Bengal
maybe here?
or u changed it already?
CinnamonOP
ive done that and redeployed -it worked but now i have the same issue if nothing working again 😭
thank you for all of ur help so f ar btw!
Bengal
ok wait
what does npm run build do
CinnamonOP
npm run build just creates tailwind.css
Bengal
yeahh ok so typically ur build step compiles everything into a giant blob in some /out folder where providers like vercel see it and then deploy that whole thing ur src/ is ur dev space
u cld just make ur npm run build copy all ur folders into a single /out and then point the root directory in vercel there to /out instead of /src
@Bengal u cld just make ur npm run build copy all ur folders into a single /out and then point the root directory in vercel there to /out instead of /src
Bengal
like ask chatgpt to write you a bash script that does this or google sth up
OR
u could just move everything out of your src directory (or even easier, maybe move the node_modules into your src directory and ur tailwind.css into it as well?)
like the problem rn is the directory structure, that it isn't flattened
/out usually solves that by having everything flat