Home
Support Forums

Help with failed deploy

Hello,

My deploy is failing for my site inventory-dash.netlify.app. The error I am getting is “build.command” failed. This is a React project and includes an API request which will not currently work as I have not set up environment variables yet. However, I’m not sure if that is causing the build error. I would expect the site to deploy without the API response.

Here is the deploy log:

10:15:32 AM:   1. Build command from Netlify app                             
10:15:32 AM: ────────────────────────────────────────────────────────────────
10:15:32 AM: ​
10:15:32 AM: $ npm run build
10:15:32 AM: > inventory-dash@0.1.0 build /opt/build/repo
10:15:32 AM: > react-scripts build
10:15:34 AM: Creating an optimized production build...
10:15:43 AM: 
10:15:43 AM: Treating warnings as errors because process.env.CI = true.
10:15:43 AM: Most CI servers set it automatically.
10:15:43 AM: 
10:15:43 AM: Failed to compile.
10:15:43 AM: 
10:15:43 AM: src/Product.js
10:15:43 AM:   Line 31:6:  React Hook useEffect has a missing dependency: 'fetchData'. Either include it or remove the dependency array  react-hooks/exhaustive-deps
10:15:43 AM: npm ERR! code ELIFECYCLE
10:15:43 AM: npm ERR! errno 1
10:15:43 AM: npm ERR! inventory-dash@0.1.0 build: `react-scripts build`
10:15:43 AM: npm ERR! Exit status 1
10:15:43 AM: npm ERR!
10:15:43 AM: npm ERR! Failed at the inventory-dash@0.1.0 build script.
10:15:43 AM: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
10:15:43 AM: npm ERR! A complete log of this run can be found in:
10:15:43 AM: npm ERR!     /opt/buildhome/.npm/_logs/2021-08-06T17_15_43_814Z-debug.log
10:15:43 AM: ​
10:15:43 AM: ────────────────────────────────────────────────────────────────
10:15:43 AM:   "build.command" failed                                        
10:15:43 AM: ────────────────────────────────────────────────────────────────
10:15:43 AM: ​
10:15:43 AM:   Error message
10:15:43 AM:   Command failed with exit code 1: npm run build
10:15:43 AM: ​
10:15:43 AM:   Error location
10:15:43 AM:   In Build command from Netlify app:
10:15:43 AM:   npm run build
10:15:43 AM: ​
10:15:43 AM:   Resolved config
10:15:43 AM:   build:
10:15:43 AM:     command: npm run build
10:15:43 AM:     commandOrigin: ui
10:15:43 AM:     publish: /opt/build/repo/build
10:15:43 AM:     publishOrigin: ui
10:15:44 AM: Caching artifacts
10:15:44 AM: Started saving node modules
10:15:44 AM: Finished saving node modules
10:15:44 AM: Started saving build plugins
10:15:44 AM: Finished saving build plugins
10:15:44 AM: Started saving pip cache
10:15:44 AM: Finished saving pip cache
10:15:44 AM: Started saving emacs cask dependencies
10:15:44 AM: Finished saving emacs cask dependencies
10:15:44 AM: Started saving maven dependencies
10:15:44 AM: Finished saving maven dependencies
10:15:44 AM: Started saving boot dependencies
10:15:44 AM: Finished saving boot dependencies
10:15:44 AM: Started saving rust rustup cache
10:15:44 AM: Finished saving rust rustup cache
10:15:44 AM: Started saving go dependencies
10:15:44 AM: Finished saving go dependencies
10:15:46 AM: Build failed due to a user error: Build script returned non-zero exit code: 2
10:15:46 AM: Creating deploy upload records
10:15:46 AM: Failing build: Failed to build site
10:15:46 AM: Failed during stage 'building site': Build script returned non-zero exit code: 2
10:15:46 AM: Finished processing build request in 59.111153985s

Thanks for your help.

Best,
Adam

You can check the error in the log:

10:15:43 AM: src/Product.js
10:15:43 AM:   Line 31:6:  React Hook useEffect has a missing dependency: 'fetchData'. Either include it or remove the dependency array  react-hooks/exhaustive-deps

you’re using React.useEffect but missing the dependency array in src/Product.js

You probably need a code like this:

React.useEffect(() =>{}, [fetchData])

Thanks for reply. I noticed this warning but figured that since it works fine as is on my local host that it would not cause an issue with deployment.

I tried both removing the array dependency as well as adding fetchData inside the array like you suggest. Both result in errors.

Removing the dependency array resulted in the error below:

Access to fetch at 'https://api.shipbob.com/1.0/inventory/4058379' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

I only want the state to render once on load, which is what I was trying to accomplish with the empty dependency array. It works find on my local host despite throwing the missing dependency error, hence why I’m confused.

Not sure where I’m going wrong here :confused:

You probably just need to change the build command to CI= npm run build.

Thanks. This was indeed the issue, albeit the solution not as straight forward as adding fetchData to useEffect array dependency. It required that I move my fetchData function inside useEffect then add prop Inventory ID. So in the end it worked like this:

useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(`${API_ENDPOINT}${Inventory_ID}`, REQUEST_OPTIONS);
        const data = await response.json();
        setData(data);
      } catch (e) {
        console.error(e);
      }
    }
    fetchData();
  }, [Inventory_ID]);
1 Like

try to read about CORS and its middleware.

Frequently, the problem on CORS issues are responsibility of the API. I don’t know your case, but try to change the back-end to use CORS middleware. (if the api is using express package, its so easy to enable whitelist and include your IP)

1 Like