Deployment Issue: NPM dependency 404s (Vanilla JS site)

Support
,
1

Netlify site name: https://parkadoo.netlify.app/

The Problem:

  • I’m trying to deploy my first site but I get 404s when I try to load scripts from my npm packages. It seems either my node_modules folder is not getting installed or it’s being installed somewhere else and that’s throwing the relative file paths for my scripts off.
  • When I download my Netlify deployment there is no node_module folder

I’m confused because in Manage Dependencies Documentation it mentions that npm install will be run which I expected to install my dependencies. I already had a package.json and also added a .nvrmc file to specify the node version as suggested in this Netlify blog article.

By default, if your site’s base directory does not include a yarn.lock file (more information below), we will run npm install to install the dependencies listed in your package.json file.

Here’s the logs from that deploy:

4:05:07 PM: Build ready to start
4:05:09 PM: build-image version: 0582042f4fc261adc7bd8333f34884959c577302
4:05:09 PM: build-image tag: v3.7.6
4:05:09 PM: buildbot version: f7cf745bf3815a7749b6e76276061ab74dee3220
4:05:09 PM: Fetching cached dependencies
4:05:10 PM: Starting to download cache of 5.1MB
4:05:10 PM: Finished downloading cache in 400.492604ms
4:05:10 PM: Starting to extract cache
4:05:10 PM: Finished extracting cache in 117.113525ms
4:05:10 PM: Finished fetching cache in 519.5585ms
4:05:10 PM: Starting to prepare the repo for build
4:05:11 PM: Preparing Git Reference refs/heads/master
4:05:12 PM: Parsing package.json dependencies
4:05:12 PM: No build steps found, continuing to publishing
4:05:12 PM: Starting to deploy site from '/'
4:05:12 PM: Creating deploy tree 
4:05:12 PM: Creating deploy upload records
4:05:12 PM: 1 new files to upload
4:05:12 PM: 0 new functions to upload
4:05:13 PM: Starting post processing
4:05:13 PM: Post processing - HTML
4:05:13 PM: Post processing - header rules
4:05:13 PM: Post processing - redirect rules
4:05:13 PM: Post processing done
4:05:13 PM: Site is live ✨
4:05:13 PM: Finished processing build request in 4.099939215s

Next I tried adding a build script to my package.json. I named it “netlify-build” as it was recommended not to name it “build” under #5 in this support post.

Based on the logs this seems to result in the npm dependencies being installed but the 404s still persist and I don’t see the node_modules folder when I download the deployment files.

I also don’t understand why Ruby and Python are being installed in the logs but that’s a different question lol.

Here’s the logs from this deployment:

10:20:09 AM: Build ready to start
10:20:12 AM: build-image version: 0582042f4fc261adc7bd8333f34884959c577302
10:20:12 AM: build-image tag: v3.7.6
10:20:12 AM: buildbot version: 3352c8b27c9ddee0301e494de800235be05ef095
10:20:12 AM: Fetching cached dependencies
10:20:12 AM: Starting to download cache of 5.1MB
10:20:12 AM: Finished downloading cache in 225.211657ms
10:20:12 AM: Starting to extract cache
10:20:12 AM: Finished extracting cache in 122.489452ms
10:20:12 AM: Finished fetching cache in 349.495299ms
10:20:12 AM: Starting to prepare the repo for build
10:20:13 AM: Preparing Git Reference refs/heads/master
10:20:14 AM: Parsing package.json dependencies
10:20:14 AM: Starting build script
10:20:14 AM: Installing dependencies
10:20:14 AM: Python version set to 2.7
10:20:15 AM: Attempting node version 'v16.0.0' from .nvmrc
10:20:15 AM: Downloading and installing node v16.0.0...
10:20:16 AM: Downloading https://nodejs.org/dist/v16.0.0/node-v16.0.0-linux-x64.tar.xz...
10:20:16 AM: Computing checksum with sha256sum
10:20:16 AM: Checksums matched!
10:20:20 AM: Now using node v16.0.0 (npm v7.10.0)
10:20:20 AM: Started restoring cached build plugins
10:20:20 AM: Finished restoring cached build plugins
10:20:20 AM: Attempting ruby version 2.7.1, read from environment
10:20:22 AM: Using ruby version 2.7.1
10:20:22 AM: Using PHP version 5.6
10:20:22 AM: Started restoring cached node modules
10:20:22 AM: Finished restoring cached node modules
10:20:22 AM: Installing NPM modules using NPM version 7.10.0
10:20:33 AM: added 27 packages, and audited 28 packages in 11s
10:20:33 AM: 7 vulnerabilities (3 low, 4 high)
10:20:33 AM: To address issues that do not require attention, run:
10:20:33 AM:   npm audit fix
10:20:33 AM: To address all issues (including breaking changes), run:
10:20:33 AM:   npm audit fix --force
10:20:33 AM: Run `npm audit` for details.
10:20:33 AM: NPM modules installed
10:20:34 AM: Started restoring cached go cache
10:20:34 AM: Finished restoring cached go cache
10:20:34 AM: go version go1.14.4 linux/amd64
10:20:34 AM: go version go1.14.4 linux/amd64
10:20:34 AM: Installing missing commands
10:20:34 AM: Verify run directory
10:20:34 AM: ​
10:20:34 AM: ────────────────────────────────────────────────────────────────
10:20:34 AM:   Netlify Build                                                 
10:20:34 AM: ────────────────────────────────────────────────────────────────
10:20:34 AM: ​
10:20:34 AM: ❯ Version
10:20:34 AM:   @netlify/build 12.0.1
10:20:34 AM: ​
10:20:34 AM: ❯ Flags
10:20:34 AM:   deployId: 60c38d39ac97c000075dd92c
10:20:34 AM: ​
10:20:34 AM: ❯ Current directory
10:20:34 AM:   /opt/build/repo
10:20:34 AM: ​
10:20:34 AM: ❯ Config file
10:20:34 AM:   No config file was defined: using default values.
10:20:34 AM: ​
10:20:34 AM: ❯ Context
10:20:34 AM:   production
10:20:34 AM: ​
10:20:34 AM: ────────────────────────────────────────────────────────────────
10:20:34 AM:   1. Build command from Netlify app                             
10:20:34 AM: ────────────────────────────────────────────────────────────────
10:20:34 AM: ​
10:20:35 AM: $ npm run netlify-build
10:20:35 AM: > parkadoo@1.0.0 netlify-build
10:20:35 AM: > npm install --production
10:20:36 AM: up to date, audited 3 packages in 835ms
10:20:36 AM: found 0 vulnerabilities
10:20:36 AM: ​
10:20:36 AM: (build.command completed in 1.3s)
10:20:36 AM: ​
10:20:36 AM: ────────────────────────────────────────────────────────────────
10:20:36 AM:   2. Deploy site                                                
10:20:36 AM: ────────────────────────────────────────────────────────────────
10:20:36 AM: ​
10:20:36 AM: Starting to deploy site from ''
10:20:36 AM: Creating deploy tree 
10:20:36 AM: Creating deploy upload records
10:20:36 AM: 2 new files to upload
10:20:36 AM: 0 new functions to upload
10:20:36 AM: Site deploy was successfully initiated
10:20:36 AM: ​
10:20:36 AM: (Deploy site completed in 346ms)
10:20:36 AM: ​
10:20:36 AM: ────────────────────────────────────────────────────────────────
10:20:36 AM:   Netlify Build Complete                                        
10:20:36 AM: ────────────────────────────────────────────────────────────────
10:20:36 AM: ​
10:20:36 AM: (Netlify Build completed in 1.7s)
10:20:36 AM: Starting post processing
10:20:36 AM: Post processing - HTML
10:20:36 AM: Post processing - header rules
10:20:36 AM: Post processing - redirect rules
10:20:37 AM: Caching artifacts
10:20:37 AM: Started saving node modules
10:20:37 AM: Finished saving node modules
10:20:37 AM: Post processing done
10:20:37 AM: Started saving build plugins
10:20:37 AM: Finished saving build plugins
10:20:37 AM: Started saving pip cache
10:20:37 AM: Finished saving pip cache
10:20:37 AM: Started saving emacs cask dependencies
10:20:37 AM: Finished saving emacs cask dependencies
10:20:37 AM: Started saving maven dependencies
10:20:37 AM: Finished saving maven dependencies
10:20:37 AM: Started saving boot dependencies
10:20:37 AM: Finished saving boot dependencies
10:20:37 AM: Started saving rust rustup cache
10:20:37 AM: Finished saving rust rustup cache
10:20:37 AM: Started saving go dependencies
10:20:37 AM: Finished saving go dependencies
10:20:37 AM: Site is live ✨
10:20:40 AM: Build script success
10:20:56 AM: Finished processing build request in 44.06482901s

Here’s a snippet of my package.json showing the scripts and dependencies I’m trying to install:

{
...

  "scripts": {
    "netlify-build": "npm install --production",
    "start:dev": "http-server -c-1 -p 8081"
  },

...

  "dependencies": {
    "dompurify": "^2.0.17",
    "focus-visible": "^5.1.0"
  },
  "devDependencies": {
    "http-server": "^0.11.1"
  }
}

I also have a index.html file as suggested as a common deploy problem in this support post

I’m stuck. Any help or pointers to useful links would be appreciated.

2

Hi @hypetay

Welcome to the Netlify Community

What you are downloading are the deployed static HTML/CSS/JS files which the Netlify build system has built using the build command with NPM modules specified in your dependencies.

Edit:
Rather than using the node dependency, try linking the script from CDNJS.

1 Like
3

Apart from what @coelmay suggested, what you’re probably looking for is a JavaScript bundler like Webpack. Then you can import JS in your files and the bundler will package that into one file for you.

2 Likes
4

Thanks, this is my first deployment using npm dependencies so I didn’t realize the need for a bundler. I’ll give snowpack a go.

1 Like