Deployed website has reference errors

Support
,
1

Hi,

This is my first solo project, I have created a Weather App as a portfolio project. The app uses Google Places and Maps to get a location from a search bar and uses a free weather API to display weather data.

I have been using Parcel 2.12 to create my project and has been working with no problems in the dev environment (npm run start).

I have finally bundled my Project and I am getting reference error when I am searching for a location. referenceError place is not defined.

This works fine in the dev environment and the App works as intended with no errors. I am wondering if I have something set up incorrectly with Parcel as the issue only happens after being built and deployed, or if a doing something incorrect with my code.

The site will build and deploy with no issues in the log. Also some SVG images are displayed weirdly.

I am new to this, and have only followed step by step Udemy tutorials so far, so advice would really be appreciated.

built and deployed site (error):
https://weatherapp-joncodes95.netlify.app/

I have also deployed manually using the ‘dist’ folder without building and the app worked no problem:
https://weatherapp-joncodes95-nobuild.netlify.app/

build log:
7:40:51 PM: build-image version: fcb0c1b3ada6d25c1cb58e8bc514f5f23cc14f15 (focal)
7:40:51 PM: buildbot version: 5d9cbb75e9a22173e43831f5d661d8faaf2933ce
7:40:51 PM: Fetching cached dependencies
7:40:51 PM: Starting to download cache of 201.0MB
7:40:52 PM: Finished downloading cache in 1.591s
7:40:52 PM: Starting to extract cache
7:40:54 PM: Finished extracting cache in 1.878s
7:40:54 PM: Finished fetching cache in 3.523s
7:40:54 PM: Starting to prepare the repo for build
7:40:55 PM: Preparing Git Reference refs/heads/master
7:40:59 PM: Starting to install dependencies
7:41:02 PM: Python version set to 3.8
7:41:02 PM: Attempting Ruby version 2.7.2, read from environment
7:41:03 PM: Using Ruby version 2.7.2
7:41:04 PM: Started restoring cached go cache
7:41:04 PM: Finished restoring cached go cache
7:41:05 PM: go version go1.19.13 linux/amd64
7:41:06 PM: Using PHP version 8.0
7:41:07 PM: Started restoring cached Node.js version
7:41:08 PM: Finished restoring cached Node.js version
7:41:09 PM: v18.19.1 is already installed.
7:41:09 PM: Now using node v18.19.1 (npm v10.2.4)
7:41:09 PM: Enabling Node.js Corepack
7:41:09 PM: Started restoring cached build plugins
7:41:09 PM: Finished restoring cached build plugins
7:41:09 PM: Started restoring cached corepack dependencies
7:41:09 PM: Finished restoring cached corepack dependencies
7:41:09 PM: No npm workspaces detected
7:41:09 PM: Started restoring cached node modules
7:41:09 PM: Finished restoring cached node modules
7:41:09 PM: Installing npm packages using npm version 10.2.4
7:41:10 PM: up to date, audited 202 packages in 540ms
7:41:10 PM: 88 packages are looking for funding
7:41:10 PM: run npm fund for details
7:41:10 PM: found 0 vulnerabilities
7:41:10 PM: npm packages installed
7:41:11 PM: Successfully installed dependencies
7:41:11 PM: Starting build script
7:41:13 PM: Detected 1 framework(s)
7:41:13 PM: “parcel” at version “2.12.0”
7:41:13 PM: Section completed: initializing
7:41:15 PM: ​
7:41:15 PM: Netlify Build
7:41:15 PM: ────────────────────────────────────────────────────────────────
7:41:15 PM: ​
7:41:15 PM: ❯ Version
7:41:15 PM: @netlify/build 29.36.3
7:41:15 PM: ​
7:41:15 PM: ❯ Flags
7:41:15 PM: baseRelDir: true
7:41:15 PM: buildId: 65ef5e38a5e1560008bc9e79
7:41:15 PM: deployId: 65ef5e38a5e1560008bc9e7b
7:41:15 PM: ​
7:41:15 PM: ❯ Current directory
7:41:15 PM: /opt/build/repo
7:41:15 PM: ​
7:41:15 PM: ❯ Config file
7:41:15 PM: No config file was defined: using default values.
7:41:15 PM: ​
7:41:15 PM: ❯ Context
7:41:15 PM: production
7:41:15 PM: ​
7:41:15 PM: Build command from Netlify app
7:41:15 PM: ────────────────────────────────────────────────────────────────
7:41:15 PM: ​
7:41:15 PM: $ parcel build index.html --dist-dir ./dist
7:41:15 PM: Building…
7:41:16 PM: Bundling…
7:41:16 PM: Packaging & Optimizing…
7:41:17 PM: Starting post processing
7:41:17 PM: Skipping form detection
7:41:17 PM: Post processing - header rules
7:41:17 PM: Post processing - redirect rules
7:41:17 PM: Post processing done
7:41:17 PM: Section completed: postprocessing
7:41:17 PM: :sparkles: Built in 1.86s
7:41:17 PM: dist/index.html 3.61 KB 818ms
7:41:17 PM: dist/bookmarks-outline.a3479892.svg 417 B 463ms
7:41:17 PM: dist/index.e566dfc0.css 7.5 KB 372ms
7:41:17 PM: dist/index.d2ed8fda.css 5.49 KB 527ms
7:41:17 PM: dist/index.6b4ad2e5.js 113.47 KB 751ms
7:41:17 PM: dist/cloudy-day-1.948bdec5.svg 2.05 KB 466ms
7:41:17 PM: dist/cloudy-day-2.e1cf6743.svg 2.05 KB 395ms
7:41:17 PM: dist/cloudy-day-3.59b81e92.svg 2.05 KB 588ms
7:41:17 PM: dist/cloudy-night-1.1d16b33b.svg 2.69 KB 781ms
7:41:17 PM: dist/cloudy-night-2.4836c60c.svg 2.69 KB 467ms
7:41:17 PM: dist/cloudy-night-3.2a78d23f.svg 2.69 KB 395ms
7:41:17 PM: dist/cloudy.b6439e68.svg 5.6 KB 588ms
7:41:17 PM: dist/day.03fdc7ff.svg 5.24 KB 780ms
7:41:17 PM: dist/night.23240a97.svg 5.46 KB 466ms
7:41:17 PM: dist/rainy-1.5b7c37ba.svg 2.35 KB 394ms
7:41:17 PM: dist/rainy-2.2ec6f775.svg 1.81 KB 588ms
7:41:17 PM: dist/rainy-3.50cc91cc.svg 2.33 KB 780ms
7:41:17 PM: dist/rainy-4.b582daf4.svg 1.17 KB 466ms
7:41:17 PM: dist/rainy-5.370b3a6a.svg 1.62 KB 395ms
7:41:17 PM: dist/rainy-6.c70f4a99.svg 1.79 KB 588ms
7:41:17 PM: dist/rainy-7.208ff41c.svg 1.8 KB 781ms
7:41:17 PM: dist/snowy-1.213864c2.svg 3.45 KB 466ms
7:41:17 PM: dist/snowy-2.08d69b52.svg 2.91 KB 395ms
7:41:17 PM: dist/snowy-3.698db061.svg 3.61 KB 588ms
7:41:17 PM: dist/snowy-4.35301142.svg 1.54 KB 781ms
7:41:17 PM: dist/snowy-5.b31fa220.svg 2.53 KB 466ms
7:41:17 PM: dist/snowy-6.abf350b8.svg 3.41 KB 395ms
7:41:17 PM: dist/clouds-placeholder.02ead717.webp 90.39 KB 67ms
7:41:17 PM: dist/thunder.ca1d0911.svg 2.31 KB 781ms
7:41:17 PM: dist/bookmark-outline.fc13f04a.svg 266 B 461ms
7:41:17 PM: dist/bookmark.80c72edb.svg 243 B 393ms
7:41:17 PM: dist/90-ring.ae64277a.svg 372 B 588ms
7:41:17 PM: dist/close-outline.5bb8175d.svg 225 B 780ms
7:41:17 PM: dist/search-outline.01264ec0.svg 376 B 462ms
7:41:17 PM: dist/index.runtime.b2f766a0.js 2.18 KB 178ms
7:41:17 PM: ​
7:41:17 PM: (build.command completed in 2.1s)
7:41:17 PM: ​
7:41:17 PM: Deploy site
7:41:17 PM: ────────────────────────────────────────────────────────────────
7:41:17 PM: ​
7:41:17 PM: Starting to deploy site from “dist”
7:41:17 PM: Calculating files to upload
7:41:17 PM: 30 new files to upload
7:41:17 PM: 0 new functions to upload
7:41:17 PM: Section completed: deploying
7:41:17 PM: Site deploy was successfully initiated
7:41:17 PM: ​
7:41:17 PM: (Deploy site completed in 404ms)
7:41:17 PM: ​
7:41:17 PM: Netlify Build Complete
7:41:17 PM: ────────────────────────────────────────────────────────────────
7:41:17 PM: ​
7:41:17 PM: (Netlify Build completed in 2.6s)
7:41:18 PM: Site is live :sparkles:
7:41:18 PM: Caching artifacts
7:41:18 PM: Started saving node modules
7:41:18 PM: Finished saving node modules
7:41:18 PM: Started saving build plugins
7:41:18 PM: Finished saving build plugins
7:41:18 PM: Started saving corepack cache
7:41:18 PM: Finished saving corepack cache
7:41:18 PM: Started saving pip cache
7:41:18 PM: Finished saving pip cache
7:41:18 PM: Started saving emacs cask dependencies
7:41:18 PM: Finished saving emacs cask dependencies
7:41:18 PM: Started saving maven dependencies
7:41:18 PM: Finished saving maven dependencies
7:41:18 PM: Started saving boot dependencies
7:41:18 PM: Finished saving boot dependencies
7:41:18 PM: Started saving rust rustup cache
7:41:18 PM: Finished saving rust rustup cache
7:41:18 PM: Started saving go dependencies
7:41:18 PM: Finished saving go dependencies
7:41:18 PM: Build script success
7:41:18 PM: Section completed: building
7:41:23 PM: Uploading Cache of size 205.8MB
7:41:24 PM: Section completed: cleanup
7:41:24 PM: Finished processing build request in 33.122s

Many Many Thanks

Jon

2

@JonCodes95 I’m not sure what you mean by without building, I presume you mean deploying the output that came with the tutorial. If you’ve made changes, that’s not a particularly helpful comparison, since you’re comparing “apples & oranges”.

Try running your build command locally (I can see you have parcel build index.html --dist-dir ./dist) and then serve it with serve.

So try parcel build index.html --dist-dir ./dist && npx serve -s dist

You should see exactly the same thing as on Netlify.

If it’s a tutorial, your best bet would be to return back to the tutorial.

3

Hi, thanks for your response. I have done this and I am still getting the reference error on both local and network.

By ‘without building’ I mean I have ran ‘npm run start’ which is ‘parcel index.html’ to develop the website.

I have then dragged the ‘dist’ folder in Netlify which has hosted the site and that works no problem, but when I build with the ‘parcel build…’ command, I get the errors.

I hope this makes more sense. I am also not following a tutorial, this is my first solo project.

I appreciate you try helping me.

Many Thanks
Jon

4

@JonCodes95 You said:

I have also deployed manually using the ‘dist’ folder without building and the app worked no problem

I have then dragged the ‘dist’ folder in Netlify which has hosted the site and that works no problem

But you’ve also said:

By ‘without building’ I mean I have ran ‘npm run start’ which is ‘parcel index.html’ to develop the website.

but when I build with the ‘parcel build…’ command, I get the errors.

Most systems don’t produce a dist folder that can be deployed unless the build command is run.

Hence my confusion at where the dist folder that “works” comes from, and how it differs from the one that “doesn’t work”. Investigating that line of thinking may reveal what is wrong.

^ This proves the issue is with your project configuration/code and unrelated to Netlify.

This forum doesn’t provide project debugging, it’s for assistance with Netlify’s products so somewhere more generic would be your best bet for getting an answer.

On the off chance a community member here could take a look, you’d need to provide a public repo.

5

thanks for your help, I will look elsewhere