Home
Support Forums

Blank Page when deployed, issue with bundle.js

Netlify link: https://amazing-kowalevski-45e247.netlify.app
Github: GitHub - PreQL-by-MACK/pre-QL-website, repo branch being used is kyle-test-host

Not sure why the page isn’t loading. Publishing the directory to our dist folder. When I inspect the page, I get a 404 error, failed to load resource with our bundle.js file.

Any suggestions?

Hey there, @kyledkim :wave:

Thanks for reaching out, and welcome to the Netlify Forums! Sorry to hear you are encountering some obstacles.

Can you please share your most recent deploy log with us? That would be super helpful!

hi Hillary, here you go.2:11:08 PM: Build ready to start
2:11:10 PM: build-image version: 3bcb38c35508b42e9121d4badfe6d8c66fd7a3f0
2:11:10 PM: build-image tag: v4.3.2
2:11:10 PM: buildbot version: 5f1a3c6e77d89b95b77370734ae1aecf3a51e9c1
2:11:10 PM: Fetching cached dependencies
2:11:10 PM: Failed to fetch cache, continuing with build
2:11:10 PM: Starting to prepare the repo for build
2:11:10 PM: No cached dependencies found. Cloning fresh repo
2:11:10 PM: git clone GitHub - PreQL-by-MACK/pre-QL-website
2:11:14 PM: Preparing Git Reference refs/heads/kyle-test-host
2:11:15 PM: Parsing package.json dependencies
2:11:16 PM: Starting build script
2:11:16 PM: Installing dependencies
2:11:16 PM: Python version set to 2.7
2:11:17 PM: Downloading and installing node v16.12.0…
2:11:17 PM: Downloading https://nodejs.org/dist/v16.12.0/node-v16.12.0-linux-x64.tar.xz…
2:11:18 PM: Computing checksum with sha256sum
2:11:18 PM: Checksums matched!
2:11:21 PM: Now using node v16.12.0 (npm v8.1.0)
2:11:21 PM: Started restoring cached build plugins
2:11:21 PM: Finished restoring cached build plugins
2:11:21 PM: Attempting ruby version 2.7.2, read from environment
2:11:23 PM: Using ruby version 2.7.2
2:11:23 PM: Using PHP version 8.0
2:11:23 PM: Started restoring cached node modules
2:11:23 PM: Finished restoring cached node modules
2:11:24 PM: Installing NPM modules using NPM version 8.1.0
2:11:31 PM: npm WARN deprecated uuid@3.4.0: Please upgrade to version 7 or higher. Older versions may use Math.random() in certain circumstances, which is known to be problematic. See There’s Math.random(), and then there’s Math.random() Β· V8 for details.
2:11:33 PM: npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
2:11:36 PM: added 664 packages, and audited 665 packages in 12s
2:11:36 PM: 78 packages are looking for funding
2:11:36 PM: run npm fund for details
2:11:36 PM: found 0 vulnerabilities
2:11:36 PM: NPM modules installed
2:11:36 PM: Started restoring cached go cache
2:11:36 PM: Finished restoring cached go cache
2:11:37 PM: go version go1.16.5 linux/amd64
2:11:37 PM: go version go1.16.5 linux/amd64
2:11:37 PM: Installing missing commands
2:11:37 PM: Verify run directory
2:11:38 PM: ​
2:11:38 PM: ────────────────────────────────────────────────────────────────
2:11:38 PM: Netlify Build
2:11:38 PM: ────────────────────────────────────────────────────────────────
2:11:38 PM: ​
2:11:38 PM: ❯ Version
2:11:38 PM: @netlify/build 18.17.7
2:11:38 PM: ​
2:11:38 PM: ❯ Flags
2:11:38 PM: baseRelDir: true
2:11:38 PM: buildId: 6176f33cb251968d846c92ec
2:11:38 PM: deployId: 6176f33cb251968d846c92ee
2:11:38 PM: ​
2:11:38 PM: ❯ Current directory
2:11:38 PM: /opt/build/repo
2:11:38 PM: ​
2:11:38 PM: ❯ Config file
2:11:38 PM: /opt/build/repo/netlify.toml
2:11:38 PM: ​
2:11:38 PM: ❯ Context
2:11:38 PM: production
2:11:38 PM: ​
2:11:38 PM: ────────────────────────────────────────────────────────────────
2:11:38 PM: 1. build.command from netlify.toml
2:11:38 PM: ────────────────────────────────────────────────────────────────
2:11:38 PM: ​
2:11:38 PM: $ npm run build
2:11:39 PM: > pre-ql-website@1.0.0 build
2:11:39 PM: > webpack --mode production
2:11:48 PM: assets by status 11.5 KiB [cached] 1 asset
2:11:48 PM: asset bundle.js 162 KiB [compared for emit] [minimized] (name: main) 1 related asset
2:11:48 PM: asset index.html 641 bytes [compared for emit]
2:11:48 PM: orphan modules 91.1 KiB [orphan] 20 modules
2:11:48 PM: runtime modules 916 bytes 5 modules
2:11:48 PM: cacheable modules 315 KiB
2:11:48 PM: modules by path ./node_modules/ 224 KiB 23 modules
2:11:48 PM: modules by path ./src/ 90.9 KiB
2:11:48 PM: ./src/index.js + 18 modules 89.9 KiB [built] [code generated]
2:11:48 PM: ./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/styles.scss 1 KiB [built] [code generated]
2:11:48 PM: webpack 5.59.1 compiled successfully in 8258 ms
2:11:48 PM: ​
2:11:48 PM: (build.command completed in 9.7s)
2:11:48 PM: ​
2:11:48 PM: ────────────────────────────────────────────────────────────────
2:11:48 PM: 2. Functions bundling
2:11:48 PM: ────────────────────────────────────────────────────────────────
2:11:48 PM: ​
2:11:48 PM: The Netlify Functions setting targets a non-existing directory: built-lambda
2:11:48 PM: ​
2:11:48 PM: (Functions bundling completed in 2ms)
2:11:48 PM: ​
2:11:48 PM: ────────────────────────────────────────────────────────────────
2:11:48 PM: 3. Deploy site
2:11:48 PM: ────────────────────────────────────────────────────────────────
2:11:48 PM: ​
2:11:48 PM: Starting to deploy site from β€˜dist’
2:11:48 PM: Creating deploy tree
2:11:48 PM: Creating deploy upload records
2:11:48 PM: 0 new files to upload
2:11:48 PM: 0 new functions to upload
2:11:48 PM: Site deploy was successfully initiated
2:11:48 PM: ​
2:11:48 PM: (Deploy site completed in 121ms)
2:11:48 PM: ​
2:11:48 PM: ────────────────────────────────────────────────────────────────
2:11:48 PM: Netlify Build Complete
2:11:48 PM: ────────────────────────────────────────────────────────────────
2:11:48 PM: ​
2:11:48 PM: (Netlify Build completed in 9.9s)
2:11:48 PM: Starting post processing
2:11:48 PM: Post processing - HTML
2:11:48 PM: Post processing - header rules
2:11:48 PM: Post processing - redirect rules
2:11:48 PM: Post processing done
2:11:48 PM: Site is live :sparkles:
2:11:48 PM: Caching artifacts
2:11:48 PM: Started saving node modules
2:11:48 PM: Finished saving node modules
2:11:48 PM: Started saving build plugins
2:11:48 PM: Finished saving build plugins
2:11:48 PM: Started saving pip cache
2:11:48 PM: Finished saving pip cache
2:11:48 PM: Started saving emacs cask dependencies
2:11:49 PM: Finished saving emacs cask dependencies
2:11:49 PM: Started saving maven dependencies
2:11:49 PM: Finished saving maven dependencies
2:11:49 PM: Started saving boot dependencies
2:11:49 PM: Finished saving boot dependencies
2:11:49 PM: Started saving rust rustup cache
2:11:49 PM: Finished saving rust rustup cache
2:11:49 PM: Started saving go dependencies
2:11:49 PM: Finished saving go dependencies
2:11:51 PM: Build script success
2:12:15 PM: Finished processing build request in 1m5.052629482s

Hi @kyledkim

The file bundle.js is not in /dist/ it is in the root of your project /bundle.js.

2 Likes

Could you elaborate? In our webpack.config we configure our output bundle.js file to be stored in /dist. Why would it be in the root?

EDIT: This worked! Thank you! But I’m still confused as to why we we designate the src as root.

I`m new to programming and faced this problem too. I don’t understand why put bundle.js in root? I just don’t fully understand how it works.

Hi, @kyledkim and @cristinaragland56. This all has to do with how HTTP paths and file systems on Linux/Unix systems work.

When a build starts in the build image at Netlify, the working directory is this:

/opt/build/repo

Your repository is then cloned to this directory and the build command is run. Once the build command exits and returns control to the build image, the contents of the publish directory are deployed.

For many static site generators, the output directory for the build (what Netlify calls the β€œpublish directory”) is dist.

Your β€œdefault page” for any site will be index.html. If your site is example.netlify.app and you visit the URL https://example.netlify.app/ you are viewing the content of /index.html.

So, when the site build is finished the location of that file is this:

/opt/build/repo/dist/index.html

However, after the deploy, the location is just this:

/index.html

This is why you must remove the β€˜dist’ prefix. For bundle.js, it’s location after the build is this:

/opt/build/repo/dist/bundle.js

If you are working in the build directory (/opt/build/repo/) then the relative path is:

dist/bundle.js

However, after the deploy everything below the publish directory (dist) is gone and the path is just this:

/bundle.js

That is why dist must be removed. If there are other questions about this, please let us know.