React component fails to load on deployed site but works locally

Support
1

Hi - first time poster here, so will try to do this right!

I have deployed my site, which was built using React+Vite, and I’m not getting any errors. I have a specific component which is accessed using the “Opportunities” link. This is supposed to load a list of job opportunities, and each one has a grey star which is used to toggle the job ad as favourite for the user.

The codebase is here and login instructions are in the readme. The specific issue is coming from src/components/Opportunities.jsx (line 161: displayFavouriteIcon function). I don’t want to be so specific as I know it’s not your job to review my code but I also give you the information as mentioned in the help guide.

Here’s what’s happening - if I access the page mentioned when using the local development server, it works completely fine. But on the deployed site, the page crashes and the console provides this error:

react-dom-B-QKN3I2.js:16 TypeError: Cannot read properties of undefined (reading ‘createElement’)

As the file reference which is throwing the error is from the minified code, I can’t debug exactly what the issue is.

Here are some of the steps I have attempted to resolve the issue (note the favourite status is dependent upon the component having access to the current user object, one of the properties of which is listingsFavourites:

  • if condition in code to only render the component if the user object is not null or undefined
  • Changed the favourites variable to be stored as a state object (faveData)
  • Added a loading state object which would provide a temporary div to be shown while loading is true
  • Tried React’s Suspense and lazy loading feature (in App.jsx) to force a Loading component to be shown while waiting for the Opportunities component to become available
  • Accessed website through BrowserStack (tried Safari, Chrome, Edge - all with the same result)
  • Tried changing Node.js version to 18.20.3 (using npx in terminal and updating Netlify dependency settings in browser)
  • Added environment variables and set up Netlify CLI so that I could run a Netlify development server to test the issue (note: the site works fine using this dev server and does not throw the type error)
  • Updated React/React Dom version in package.json to match version number shown in npm list (now 18.3.1 - was 18.2.1)

I was going to include a zip file showing the most recent deploy log, but the system won’t allow me to include any attachments. I’m not sure if this is necessary as there are no errors, but if so let me know and I can paste it.

Packages installed:
fuse.js
ionicons
tailwindcss
react/react-dom/react-router-dom
vite/vitest
jsdom
pexels (images)

Thanks in advance,
Kelly

2

Did you specifically run vite build && vite preview locally? Or did you just run vite dev?

3

Before I installed Netlify CLI, I used the command npm run dev to test and debug locally

4

Did you run the above commands though?

5

No, I have never run those commands. I just tried it and got an error:

zsh: command not found: vite

6

Try npm run build && npm run preview then.

7

Yes, I have used npm run build before which works. I also just tried npm run preview. Am I looking for something in particular?

8

@krd81 What you’re looking for, is if it works or not.

Vite doesn’t do exactly the same thing when running its development server as it does when it produces a production build.

This frequently leads to people saying “my project works locally but doesn’t work when deployed”.

But the issue isn’t the deployment, or Netlify, it’s that the build is quite literally different.

Often the first time people notice is when they’re deploying to Netlify, because it’s the first time they view the output of the build.

Running npm run build && npm run preview performs your actual build, producing it to the dist folder, and then serves it so you can view it.

1 Like
9

Hi @nathanmartin, thanks for this info - it’s has helped my understanding of what’s going on. Annoyingly, I have an issue with null/undefined token when trying to access the website in the preview. But I’ll keep working on it. Thanks for your insight.