My deployment was successful, but I keep getting an 'Uncaught SyntaxError: Unexpected token '<'' error

Support
, ,
1

Hello, I deployed my single-page application (SPA) project using vanilla JavaScript.

Although it was successfully deployed,

I keep encountering an error message that says ‘Uncaught SyntaxError: Unexpected token ‘<’.’

I’ve checked the source files, and everything seems to be in order.

However, the deployed site doesn’t seem to be importing any other pages or CSS files.

Can you please help me with this issue?

netlify site url : https://jihee-vinterior.netlify.app

github : https://github.com/iamjiheehan/vanilla-interior.git

This is the log file that shows the deployment process

1:17:02 AM: build-image version: c1f0e3189beff44ebec7048bf7ab2e75cb09660b (focal)
1:17:02 AM: buildbot version: c1f0e3189beff44ebec7048bf7ab2e75cb09660b
1:17:02 AM: Fetching cached dependencies
1:17:02 AM: Starting to download cache of 134.1MB
1:17:03 AM: Finished downloading cache in 938ms
1:17:03 AM: Starting to extract cache
1:17:04 AM: Finished extracting cache in 698ms
1:17:04 AM: Finished fetching cache in 1.686s
1:17:04 AM: Starting to prepare the repo for build
1:17:04 AM: Preparing Git Reference refs/heads/main
1:17:05 AM: Parsing package.json dependencies
1:17:06 AM: Different publish path detected, going to use the one specified in the Netlify configuration file: 'dist' versus 'build' in the Netlify UI
1:17:07 AM: Starting build script
1:17:07 AM: Installing dependencies
1:17:07 AM: Python version set to 2.7
1:17:07 AM: Started restoring cached Node.js version
1:17:07 AM: Finished restoring cached Node.js version
1:17:08 AM: v16.19.1 is already installed.
1:17:08 AM: Now using node v16.19.1 (npm v8.19.3)
1:17:08 AM: Enabling Node.js Corepack
1:17:08 AM: Started restoring cached build plugins
1:17:08 AM: Finished restoring cached build plugins
1:17:08 AM: Attempting Ruby version 2.7.2, read from environment
1:17:09 AM: Using Ruby version 2.7.2
1:17:09 AM: Using PHP version 8.0
1:17:09 AM: Started restoring cached corepack dependencies
1:17:09 AM: Finished restoring cached corepack dependencies
1:17:09 AM: No npm workspaces detected
1:17:09 AM: Started restoring cached node modules
1:17:09 AM: Finished restoring cached node modules
1:17:09 AM: Installing npm packages using npm version 8.19.3
1:17:10 AM: up to date, audited 714 packages in 813ms
1:17:10 AM: 53 packages are looking for funding
1:17:10 AM:   run `npm fund` for details
1:17:10 AM: found 0 vulnerabilities
1:17:10 AM: npm packages installed
1:17:10 AM: Started restoring cached go cache
1:17:10 AM: Finished restoring cached go cache
1:17:10 AM: go version go1.19.6 linux/amd64
1:17:11 AM: Detected 0 framework(s)
1:17:11 AM: Section completed: initializing
1:17:12 AM: ​
1:17:12 AM:   Netlify Build                                                 
1:17:12 AM: ────────────────────────────────────────────────────────────────
1:17:12 AM: ​
1:17:12 AM: ❯ Version
1:17:12 AM:   @netlify/build 29.5.8
1:17:12 AM: ​
1:17:12 AM: ❯ Flags
1:17:12 AM:   baseRelDir: true
1:17:12 AM:   buildId: 6404c07d6c3ed4000757fe4b
1:17:13 AM:   deployId: 6404c07d6c3ed4000757fe4d
1:17:13 AM: ​
1:17:13 AM: ❯ Current directory
1:17:13 AM:   /opt/build/repo
1:17:13 AM: ​
1:17:13 AM: ❯ Config file
1:17:13 AM:   /opt/build/repo/netlify.toml
1:17:13 AM: ​
1:17:13 AM: ❯ Context
1:17:13 AM:   production
1:17:13 AM: ​
1:17:13 AM:   1. build.command from netlify.toml                            
1:17:13 AM: ────────────────────────────────────────────────────────────────
1:17:13 AM: ​
1:17:13 AM: $ npm run build
1:17:13 AM: > vanilla-project@1.0.0 build
1:17:13 AM: > babel public --out-dir dist --copy-files
1:17:13 AM: Successfully compiled 6 files with Babel (420ms).
1:17:13 AM: ​
1:17:13 AM: (build.command completed in 807ms)
1:17:14 AM: Starting post processing
1:17:13 AM: ​
1:17:13 AM:   2. Deploy site                                                
1:17:13 AM: ────────────────────────────────────────────────────────────────
1:17:14 AM: Post processing - HTML
1:17:13 AM: ​
1:17:13 AM: Starting to deploy site from 'dist'
1:17:13 AM: Calculating files to upload
1:17:14 AM: Post processing - header rules
1:17:13 AM: 1 new files to upload
1:17:13 AM: 0 new functions to upload
1:17:14 AM: Section completed: deploying
1:17:14 AM: Post processing - redirect rules
1:17:14 AM: Site deploy was successfully initiated
1:17:14 AM: ​
1:17:14 AM: (Deploy site completed in 255ms)
1:17:14 AM: ​
1:17:14 AM: Post processing done
1:17:14 AM:   Netlify Build Complete                                        
1:17:14 AM: ────────────────────────────────────────────────────────────────
1:17:14 AM: ​
1:17:14 AM: Section completed: postprocessing
1:17:14 AM: (Netlify Build completed in 1s)
1:17:14 AM: Caching artifacts
1:17:14 AM: Started saving node modules
1:17:14 AM: Finished saving node modules
1:17:14 AM: Started saving build plugins
1:17:14 AM: Finished saving build plugins
1:17:14 AM: Started saving corepack cache
1:17:14 AM: Finished saving corepack cache
1:17:14 AM: Started saving pip cache
1:17:14 AM: Finished saving pip cache
1:17:14 AM: Started saving emacs cask dependencies
1:17:14 AM: Finished saving emacs cask dependencies
1:17:15 AM: Site is live ✨
1:17:14 AM: Started saving maven dependencies
1:17:14 AM: Finished saving maven dependencies
1:17:14 AM: Started saving boot dependencies
1:17:14 AM: Finished saving boot dependencies
1:17:14 AM: Started saving rust rustup cache
1:17:14 AM: Finished saving rust rustup cache
1:17:14 AM: Started saving go dependencies
1:17:14 AM: Finished saving go dependencies
1:17:14 AM: Build script success
1:17:14 AM: Section completed: building
1:17:15 AM: Uploading Cache of size 134.2MB
1:17:16 AM: Section completed: cleanup
1:17:16 AM: Finished processing build request in 13.44s
2

@pizza The runtime error is happening because your /public/index.js file doesn’t contain JavaScript, it contains HTML…

image
image1025×474 130 KB

You can also confirm it by navigating directly to the file:
https://jihee-vinterior.netlify.app/public/index.js

3

Thank you for checking. I’m not sure what might be causing the error,

since I thought that the <script> tag would allow the file to contain JavaScript.

I don’t know where to start looking for the problem.

Do you have any suggestions for what I could check next?

4

@pizza When you encounter issues like this, you can debug locally.

To do so run your build (in this case npm run build), then go into the dist folder and see what you’ve output. If you want to see it in a browser you can run npx serve in the folder.

As far as I can tell, your main issue is that you do not want /public/ in your file paths.
Since you’re copying those files from /public/ into /dist/ as part of the build.

So the files don’t end up at…

/dist/public/css/index.css
/dist/public/img/logo.png
/dist/public/index.js

They end up at…

/dist/css/index.css
/dist/img/logo.png
/dist/index.js

You can see this by looking inside your /dist folder…

image
image326×707 98.7 KB

Since you’re deploying that /dist folder that portion of the path becomes the root, so your index.js file can be found at:
https://jihee-vinterior.netlify.app/index.js

Your css file is at:
https://jihee-vinterior.netlify.app/css/index.css

Your logo is at:
https://jihee-vinterior.netlify.app/img/logo.png

The reason that the /public/index.js file is returning html appears to be because you have a redirect set that is returning the index file for everything, which includes files that do not exist…

/* /index.html 200

Example:
https://jihee-vinterior.netlify.app/this/file/does/not/exist.js

As an additional tip, you should add a .gitignore file to the root of your repository that contains node_modules, to prevent all the dependencies being uploaded to your repository.

1 Like
5

Thank you very much! I followed your advice and did some additional research, and now the deployment has been successful without any errors. yay :heart_hands:

6

thanks for confirming you found a solution! Nice work. (:

1 Like