Gatsby Auth0 CSS problems on Netlify

Hey Community, thanks for having me!

I just recently connected my project on GitHub to Netlify and Contentful and everything deployed great. It is weird though because it looks like the netflify url only loads the index page. It looks like it cutts out the navbar and footer entirely. When I run my code locally it looks as it should. Is there something I am missing in my configuration?

  • DNS issues? Tell us the custom domain, tell us the error message! We can’t help if we don’t know your domain.
  • Build problems? Link or paste the FULL build log & build settings screenshot

The better the post - the faster the answer.

Update it worked only after I built the public directory on my machine and deployed that folder directly. This makes me think that something is going wrong during the npm run build on netlify. Is there something I need to configure to make this run in an automated way?

Hey there, welcome :slight_smile: Could you please share your Netlify url and a link to the weird, chopped off deploy? That’ll help us dig in further. At first glance/read, this does sound like an issue with asset paths during build… but we’ll be able to tell more when you send us that info!

https://weroast.coffee/ Is the one that chops off the top and bottom. It is a Gatsby application by the way. The link the deploy is https://app.netlify.com/sites/weroast/deploys. Everything runs fine it just doesn’t look how Im expecting it to look.

hey there,

i’m not exactly sure how it is supposed to look, obviously, but i am noticing this JS error in your console:

This is what the site is supposed to look like https://weroast.surge.sh/ I was initially using surge and a CDN but now I am looking to move over to netlify.

great, well, we’re excited to have you on netlify! I looked at both of these sites, though, and I do not believe these are the same site. the site on surge, for example, shows

body class="null" wheras the site on netlify shows

there are also differences in how the images look, etc. the site on surge only shows the coffee cups, the site on netlify seems to have a switcher or random image.

is it possible that you updated the code locally and didn’t add the files to a commit, or didn’t push the commit?

It’s weird because they both come from the same code base. When I run npm run build and deploy my public directory to surge it looks correct and it even works on netlify when I drag and drop my public folder in. The situation where it doesn’t work is when it deploys from merges to master and when the we hook fires off on updates in content full. I can’t tell if it has to do with the build process that happens on netlify or not.

interesting. do you have a link to a deploy with a build log that we can look at?

i wonder whether something in your build settings or even in your package.json isn’t set up quite right. that would explain why you can deploy via drag n drop but not with a build pipeline.

That is also what I suspect. Here is a link of a recent merge to master: https://app.netlify.com/sites/weroast/deploys/5eb9bb55f30aa79076154f8a
I double checked the environment variables too. I put my build command as npm run build which has never changed.

what i would probably do in your situation would actually be to download a copy of your deploy:

and take a look to see what we are actually building vs. what you are expecting us to build.

I did take a look at the log, but i am not seeing anything that really sticks out.

I’m hoping that by looking at the generated build, we’ll get some clues to keep poking at this.

It suddenly started working then stopped working once again! There must something cached that was messing with the built site

So I think I figured it out I looked around and found that some other people were having similar issues with netlify and auth0. I found that gatsby sites need to have environment variables prefaced with GATSBY_ for the browser to be able to reference them on the client. So I updated all my variable names and the references to them in my code and it seems to be working.

oh wow, what a great find! Thank you for sharing - that’ll surely help someone else a ton :fireworks:

Hopefully someone else who has this issue stumbles across this thread. Thanks for the extra set of eyes on this!

1 Like