Need lots of help

[StHavenHarris]

https://www.stephen-havenharris.com/

Hello there! I am new to this so any help would be appreciated!

First, I registered my domain with Google and keep getting " 404. That’s an error.
The requested URL was not found on this server. That’s all we know." Am I doing something wrong?

Also, as seen above my website works fine on VS Cose, but when I try to deploy it I get this:
7:44:24 PM: $ npm start

7:44:24 PM: > react-portfolio@0.1.0 start

7:44:24 PM: > react-scripts start

7:44:26 PM: (node:1410) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: ‘onAfterSetupMiddleware’ option is deprecated. Please use the ‘setupMiddlewares’ option.

7:44:26 PM: (Use node --trace-deprecation ... to show where the warning was created)

7:44:26 PM: (node:1410) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: ‘onBeforeSetupMiddleware’ option is deprecated. Please use the ‘setupMiddlewares’ option.

7:44:26 PM: Starting the development server…

7:44:26 PM:

7:44:31 PM: Failed to compile.

7:44:31 PM:

7:44:31 PM: Module not found: Error: Can’t resolve ‘C:/Users/Owner/Desktop/New folder/Portfolio/src/images/Stephen-Haven Harris (2).jpg’ in ‘/opt/build/repo/src/Components’
WARNING in [eslint]

7:44:31 PM: src/Components/Contact.js

7:44:31 PM: Line 57:15: The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: eslint-plugin-jsx-a11y/anchor-is-valid.md at 93f78856655696a55309440593e0948c6fb96134 · jsx-eslint/eslint-plugin-jsx-a11y · GitHub jsx-a11y/anchor-is-valid

7:44:31 PM: src/Components/Navbar.js

7:44:31 PM: Line 8:9: The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: eslint-plugin-jsx-a11y/anchor-is-valid.md at 93f78856655696a55309440593e0948c6fb96134 · jsx-eslint/eslint-plugin-jsx-a11y · GitHub jsx-a11y/anchor-is-valid

7:44:31 PM: ERROR in ./src/Components/About.js 5:0-103

7:44:31 PM: Module not found: Error: Can’t resolve ‘C:/Users/Owner/Desktop/New folder/Portfolio/src/images/Stephen-Haven Harris (2).jpg’ in ‘/opt/build/repo/src/Components’

7:44:31 PM: ERROR in ./src/Components/Projects.js 6:0-92

7:44:31 PM: Module not found: Error: Can’t resolve ‘C:/Users/Owner/Desktop/New folder/Portfolio/src/data.js’ in ‘/opt/build/repo/src/Components’

7:44:31 PM: ERROR in ./src/Components/Projects.js 7:0-98

7:44:31 PM: Module not found: Error: Can’t resolve ‘C:/Users/Owner/Desktop/New folder/Portfolio/src/images/Vending Application.png’ in ‘/opt/build/repo/src/Components’

7:44:31 PM: ERROR in ./src/Components/Projects.js 8:0-96

7:44:31 PM: Module not found: Error: Can’t resolve ‘C:/Users/Owner/Desktop/New folder/Portfolio/src/images/TEnmo Application.png’ in ‘/opt/build/repo/src/Components’

7:44:31 PM: webpack compiled with 4 errors and 1 warning

[jasiqli]

@StHavenHarris

First, I registered my domain with Google and keep getting " 404. That’s an error.
The requested URL was not found on this server. That’s all we know." Am I doing something wrong?

stephen-havenharris.com is currently using the default Google nameservers. Information about configuring a domain is available in the documentation and these helpful support guides

[Support Guide] DNS Quick Start - How to set up DNS

Last reviewed: August 2023 Note: All options discussed in this guide assume you have already added your custom domain to your Netlify site. Hi there! Need to get your site up and running with DNS? Start here with either Newly purchased domain or Existing domain that you’ve already used. Newly purchased domain If you have a brand new domain purchased from a registrar such as Namecheap or GoDaddy, and you want to quickly get your DNS set up, you have two options: External DNS - Create these …

[Support Guide] How can I manage my DNS with Netlify if I used another vendor to purchase my domain?

Last reviewed and updated by Netlify Support on Aug 2023 You are well on your way already - cool! Let’s get this figured out. This will be a three-step process but don’t worry, it’s not that hard. Open an app you use to take some notes or grab a piece of paper if you are old-school like me. If you’d prefer a TL:DR; in the form of a video, check this out: [CONFIGURING NETLIFY DNS (DOMAIN PURCHASED EXTERNALLY) - Netlify] (Link to our topic on propagation as discussed in the video) …

The error below is possibly due to an incorrectly named import possibly due to case sensitivity

@StHavenHarris

Module not found: Error: Can’t resolve ‘C:/Users/Owner/Desktop/New folder/Portfolio/src/images/Stephen-Haven Harris (2).jpg’ in ‘/opt/build/repo/src/Components’

And this error

@StHavenHarris

Line 57:15: The href attribute is required for an anchor to be keyboard accessible.

suggests there is an anchor <a> somewhere without a href="" attribute.

[StHavenHarris]

Thank you so much for answering!! I will read the documentation and see if I can fix this

[StHavenHarris]

So i was able to fix Data.Js but I can’t fix the last three:

8:32:16 PM: $ npm start

8:32:17 PM: > react-portfolio@0.1.0 start

8:32:17 PM: > react-scripts start

8:32:18 PM: (node:4094) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: ‘onAfterSetupMiddleware’ option is deprecated. Please use the ‘setupMiddlewares’ option.

8:32:18 PM: (Use node --trace-deprecation ... to show where the warning was created)

8:32:18 PM: (node:4094) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: ‘onBeforeSetupMiddleware’ option is deprecated. Please use the ‘setupMiddlewares’ option.

8:32:18 PM: Starting the development server…

8:32:18 PM:

8:32:23 PM: Failed to compile.

8:32:23 PM:

8:32:23 PM: Module not found: Error: Can’t resolve ‘…/ProfilePic.jpg’ in ‘/opt/build/repo/src/Components’
WARNING in [eslint]

8:32:23 PM: src/Components/Contact.js

8:32:23 PM: Line 57:15: The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: eslint-plugin-jsx-a11y/anchor-is-valid.md at 93f78856655696a55309440593e0948c6fb96134 · jsx-eslint/eslint-plugin-jsx-a11y · GitHub jsx-a11y/anchor-is-valid

8:32:23 PM: src/Components/Navbar.js

8:32:23 PM: Line 8:9: The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles. Learn more: eslint-plugin-jsx-a11y/anchor-is-valid.md at 93f78856655696a55309440593e0948c6fb96134 · jsx-eslint/eslint-plugin-jsx-a11y · GitHub jsx-a11y/anchor-is-valid

8:32:23 PM: ERROR in ./src/Components/About.js 5:0-37

8:32:23 PM: Module not found: Error: Can’t resolve ‘…/ProfilePic.jpg’ in ‘/opt/build/repo/src/Components’

8:32:23 PM: ERROR in ./src/Components/Projects.js 7:0-45

8:32:23 PM: Module not found: Error: Can’t resolve ‘…/VendingApplication.png’ in ‘/opt/build/repo/src/Components’

8:32:23 PM: ERROR in ./src/Components/Projects.js 8:0-43

8:32:23 PM: Module not found: Error: Can’t resolve ‘…/TEnmoApplication.png’ in ‘/opt/build/repo/src/Components’

8:32:23 PM: webpack compiled with 3 errors and 1 warning

I tried lowercase and uppercase but I still get these errors.

[jasiqli]

Can you share the repository you are deploying from?

[StHavenHarris]

GitHub - StHavenHarris/Portfolio: Website portfolio

Here you go!

[jasiqli]

In src/Components/Projects.js there are two import statements that won’t work because the Netlify build system runs on Linux, not Windows

import img2 from "C:/Users/Owner/Desktop/Port/Portfolio/src/Images/VendingApplication.png"
import img3 from "C:/Users/Owner/Desktop/Port/Portfolio/src/Images/TEnmoApplication.png"

Instead try using

import img2 from "../Images/VendingApplication.png"
import img3 from "../Images/TEnmoApplication.png"

Same goes for src/Components/About.js.

[StHavenHarris]

@jasiqli

"../Images/TEnmoApplication.png"

Thank you so much! It says it was published, but I am still getting the “page not found error” even though my custom domains have check marks and my site is HTTP enabled any advice?

[StHavenHarris]

Here is the DNS for my Google Domain if that helps!

[jasiqli]

What are the build settings you have used? What is the publish directory set to?

This is not a DNS issue.

[StHavenHarris]

Oh, I have it set to “src”, should I change it?

[StHavenHarris]

[jasiqli]

As noted in the Create React App Getting Started documentation npm run build

Builds the app for production to the build folder.

This is also mentioned in the Netlify Create React App documentation, as well as the Create React App Deploy to Netlify documentation.

So yes, you need to change the publish directory to build.