Netlify Build Error - React

My site is melissamackie.dev
username is wolfaholic

I dont know where the build error is occuring. I can see that it is happening near my home component but nothing has changed there really other than some new elements, but that shouldn’t cause an error.

I’d like help in puzzling this out but also to learn how to read this better in the future.

6:14:44 PM: Netlify Build                                                 
6:14:44 PM: ────────────────────────────────────────────────────────────────
6:14:44 PM: ​
6:14:44 PM: ❯ Version
6:14:44 PM:   @netlify/build 29.24.0
6:14:44 PM: ​
6:14:44 PM: ❯ Flags
6:14:44 PM:   baseRelDir: true
6:14:44 PM:   buildId: 653db1f22f372417c0657e5b
6:14:44 PM:   deployId: 653db1f22f372417c0657e5d
6:14:44 PM: ​
6:14:44 PM: ❯ Current directory
6:14:44 PM:   /opt/build/repo
6:14:44 PM: ​
6:14:44 PM: ❯ Config file
6:14:44 PM:   No config file was defined: using default values.
6:14:44 PM: ​
6:14:44 PM: ❯ Context
6:14:44 PM:   production
6:14:44 PM: ​
6:14:44 PM: Build command from Netlify app                                
6:14:44 PM: ────────────────────────────────────────────────────────────────
6:14:44 PM: ​
6:14:44 PM: $ npm run build
6:14:45 PM: > mackie_portfolio@0.1.0 build
6:14:45 PM: > react-scripts build
6:14:46 PM: Creating an optimized production build...
6:14:46 PM: Failed to compile.
6:14:46 PM: 
6:14:46 PM: Module not found: Error: Can"t resolve "./Components/home/Home" in "/opt/build/repo/src"
6:14:46 PM: ​
6:14:46 PM: "build.command" failed                                        
6:14:46 PM: ────────────────────────────────────────────────────────────────
6:14:46 PM: ​
6:14:46 PM:   Error message
6:14:46 PM:   Command failed with exit code 1: npm run build (https://ntl.fyi/exit-code-1)
6:14:46 PM: ​
6:14:46 PM:   Error location
6:14:46 PM:   In Build command from Netlify app:
6:14:46 PM:   npm run build
6:14:46 PM: ​
6:14:46 PM:   Resolved config
6:14:46 PM:   build:
6:14:46 PM:     command: npm run build
6:14:46 PM:     commandOrigin: ui
6:14:46 PM:     publish: /opt/build/repo/build
6:14:46 PM:     publishOrigin: ui
6:14:47 PM: Failed during stage "building site": Build script returned non-zero exit code: 2
6:14:47 PM: Build failed due to a user error: Build script returned non-zero exit code: 2
6:14:47 PM: Failing build: Failed to build site
6:14:47 PM: Finished processing build request in 19.771s

The error is related to what you’ve guessed at, which is your Home component.

6:14:46 PM: Module not found: Error: Can"t resolve “./Components/home/Home” in “/opt/build/repo/src”

However as it says, it’s not that there’s an error in that file, but that it cannot resolve that file.

So you should look for “what’s trying to load it” then double check the path, specifically for case-sensitivity, as I can see from Components/home/Home that you’re playing fast and loose with case.

I had partially followed a tutorial and that is where the case wierdness comes from. I have corrected it to all lowercase for now, but am still seeing the same error. I don’t know how to begin to debug this as when I pull it up locally, it loads fine.

11:49:47 PM: Netlify Build                                                 
11:49:47 PM: ────────────────────────────────────────────────────────────────
11:49:47 PM: ​
11:49:47 PM: ❯ Version
11:49:47 PM:   @netlify/build 29.24.0
11:49:47 PM: ​
11:49:47 PM: ❯ Flags
11:49:47 PM:   baseRelDir: true
11:49:47 PM:   buildId: 653e006c8f5f72000857e438
11:49:47 PM:   deployId: 653e006c8f5f72000857e43a
11:49:47 PM: ​
11:49:47 PM: ❯ Current directory
11:49:47 PM:   /opt/build/repo
11:49:47 PM: ​
11:49:47 PM: ❯ Config file
11:49:47 PM:   No config file was defined: using default values.
11:49:47 PM: ​
11:49:47 PM: ❯ Context
11:49:47 PM:   production
11:49:47 PM: ​
11:49:47 PM: Build command from Netlify app                                
11:49:47 PM: ────────────────────────────────────────────────────────────────
11:49:47 PM: ​
11:49:47 PM: $ npm run build
11:49:48 PM: > mackie_portfolio@0.1.0 build
11:49:48 PM: > react-scripts build
11:49:49 PM: Creating an optimized production build...
11:49:49 PM: Failed to compile.
11:49:49 PM: 
11:49:49 PM: Module not found: Error: Can"t resolve "./components/home/home" in "/opt/build/repo/src"
11:49:49 PM: ​
11:49:49 PM: "build.command" failed                                        
11:49:49 PM: ────────────────────────────────────────────────────────────────
11:49:49 PM: ​
11:49:49 PM:   Error message
11:49:49 PM:   Command failed with exit code 1: npm run build (https://ntl.fyi/exit-code-1)
11:49:49 PM: ​
11:49:49 PM:   Error location
11:49:49 PM:   In Build command from Netlify app:
11:49:49 PM:   npm run build
11:49:49 PM: ​
11:49:49 PM:   Resolved config
11:49:49 PM:   build:
11:49:49 PM:     command: npm run build
11:49:49 PM:     commandOrigin: ui
11:49:49 PM:     publish: /opt/build/repo/build
11:49:49 PM:     publishOrigin: ui
11:49:50 PM: Build failed due to a user error: Build script returned non-zero exit code: 2
11:49:50 PM: Failing build: Failed to build site
11:49:50 PM: Finished processing build request in 19.434s
11:49:50 PM: Failed during stage "building site": Build script returned non-zero exit code: 2

This is my home.jsx to which it is referring.

// Imports
import './home.css';
import CallToAction from './calltoaction/calltoaction'
import HeaderSocials from './headersocials';
import CyberSpace from '../../assets/img/cyberspace.png';
 

const Home = () => {
    return (
         <header>
          
                <div className="name_container">
                    <h1>Hello, I am <span className="name_highlight">Melissa</span>,</h1>
                    <h3>Full-Stack Webdeveloper</h3>
                    <p>I create beautiful things. I am a passionate creator and I beleive that life is a journey of continued learning.</p>
                    <CallToAction />
                </div>
               
                <div className="image_container">
                    
                    <img src={CyberSpace} alt="woman staring into a cyberspace setting" />
                    <p className="quote">
                        "Failure is apart of the process. You just learn to pick yourself back up." - Michelle Obama
                    </p>
                </div>
                
                <HeaderSocials />
                <a href="#contact" className="scroll__down">Scroll Down</a>
           
         </header>
    )
}

export default Home;

I already provided an indication of how to debug it, and you’ve provided the contents of your home.jsx file.

The error indicates that something is trying to load ./components/home/home and that it cannot find it.

As previously mentioned, you should be looking for “what’s trying to load it”.

So…
If you know where the component is being loaded, check the file paths to make sure they’re correct.

If you don’t know where it’s being loaded, search your code to find where it’s being loaded, then check the file paths to make sure they’re correct.

My apologies. I was not understanding what you initially meant. I will look to find where it is loading and let you know what I find.

Thank You for your help so far. I do appreciate it.

Okay, so it was a pathing issue. I had to start my project over and re-link it to actually fix it and get the error to go away and publish. But my paths are properly named and all match in case.

1 Like