Getting a blank page after deploying my site

Support
1

My site URL: https://test--benevolent-licorice-2c20eb.netlify.app/

I have deployed my React weather app to Netlify, but all I’m seeing on the site is a blank page with this error in the console:

Uncaught TypeError: Failed to resolve module specifier “react”. Relative references must start with either “/”, “./”, or “…/”.

For extra reference, I’ve also gotten these errors below upon first loading the page, but they disappeared when I refreshed. However, the above error still remains.

extra_errors
extra_errors701×209 12.6 KB

I’m using my GitHub repository to deploy the site, via my “test” branch. As you will see, the package.json file is located in the root directory, so I don’t understand why it’s not recognizing the file.

Here are my build settings:

Runtime: Not set

Base directory: .

Package directory: Not set

Build command: vite build

Publish directory: ./build/

Functions directory: ./netlify/functions

Deploy log visibility: Logs are public

Build status: Active

At first, I had the base directory field empty, but I added a period for more specification. That didn’t seem to have any impact, though. The build command was also “npm run build”, but I changed it to “vite build” to see if that would help. It didn’t.

If anyone notices any other problems with my site or repository besides what’s causing the error, please let me know.

2

@fantasy-thrill You’re deploying source files:

image
image861×401 84.5 KB

As evidenced by:
https://test–benevolent-licorice-2c20eb.netlify.app/config.js

It’s occuring because your Build settings are incorrect.

If you run your Build command locally (npm run build, which runs vite build) you’ll see:

image
image797×632 155 KB

Your project generates its content into the default Vite directory of dist

You currently have your Publish directory set to ./build/ (which is a source directory).

Change your Build settings to:

Base directory = (empty this value, use Netlify's default)
Package directory = (empty this value, use Netlify's default)
Build command = npm run build
Publish directory = dist
Functions directory = (empty this value, use Netlify's default)

Once you do this you may still find that your project doesn’t work.
If that’s the case you should debug locally using npm run build && npm run preview
It will perform Vite’s build, then host that output, (a more accurate comparison of what occurs on Netlify)

3

@nathanmartin Thank you. The solution worked and I’m no longer seeing a blank page.

However, this may be off topic, but the API I’m using for my site isn’t working because the data is being fetched from an unsecure (HTTP) resource, when the URL of my site is HTTPS. I was wondering oof there was any way around this.

I’ve heard of setting up a proxy server and I can do that with Netlify, but I tried it and it didn’t work.

4

@fantasy-thrill It is how you could work around the issue, so it’s likely that you made a mistake in the implementation and you should give it another try.

The documentation is here:
https://docs.netlify.com/routing/redirects/rewrites-proxies/#proxy-to-another-service

If that still doesn’t work, provide some more information regarding how it’s failing, what error you’re seeing etc.

5

@nathanmartin In the SearchCities.tsx file in my repository’s components folder, an API call was originally made to http://api.geonames.org/ to fetch a list of city names. Since this didn’t work because of the unsecure HTTP and secure HTTPS conflict between my site and the API site, I tried implementing a proxy-fetch.js file within my netlify/functions directory to handle the API call and adding this line to my _redirects file:

/api/* http://api.geonames.org/* 200

However, that was unsuccessful as well. Here’s the link to the proxy-fetch.js file for reference. And yes, I did install the node-fetch package.

6

@fantasy-thrill I’ve not looked at your proxy-fetch.js file since I believe it to be unnecessary.

All that should be required is the proxy in your _redirects and for you to change any API requests from api.geonames.org/... to /api/...

There are several basic reasons your _redirects didn’t work:

1. Wrong Location

You have the _redirects file in the root of your repository:

image
image1233×539 91.8 KB

It must be in your Publish directory, not the root of your repository:
https://docs.netlify.com/routing/redirects/

Save a plain text file called _redirects without a file extension to the publish directory of your site.

Run your build locally (npm run build) and look into the dist folder:

image
image140×138 6.95 KB

As you’re working with Vite, you’ll want to put the _redirects file within the public folder.

Once you’ve done that, running your build will result in:

image
image152×170 9.22 KB

2. Incorrect rule order

The Rule processing order is important

https://docs.netlify.com/routing/redirects/#rule-processing-order

The redirects engine will process the first matching rule it finds, reading from top to bottom. Rules in the _redirects file are always processed first, followed by rules in the Netlify configuration file.

You have the rules specified as:
https://github.com/fantasy-thrill/weather-app/blob/test/_redirects

/* /index.html 200
/api/* http://api.geonames.org/* 200

The second rule will never occur as the top rule will always execute instead.
You should reverse their order so the more specific rule comes first:

/api/* http://api.geonames.org/* 200
/* /index.html 200

3. Incorrect use of asterisk/wildcard/splat

Revisit the documentation here:
https://docs.netlify.com/routing/redirects/redirect-options/#splats

Instead of:

/api/* http://api.geonames.org/* 200

What you actually want is:

/api/* http://api.geonames.org/:splat 200
1 Like
7

@nathanmartin It appears your solution has worked for now. Thank you! I’ll let you know if I run into any more issues.