Local build was successful but build at Netlify is not working (React app)

Hello!
It’s my first time trying to deploy my website, it works fine on my localhost (Windows) but when I’m trying to deploy on Netlify I’m getting this error, what should I look for in here ? my react-icons are installed in package.json and I can’t find what’s the problem

> ERROR in ./src/components/Portfolio.js 14:0-72
> Module not found: Error: Can't resolve 'react-icons/SI' in '/opt/build/repo/src/components'
> resolve 'react-icons/SI' in '/opt/build/repo/src/components'
>   Parsed request is a module
>   using description file: /opt/build/repo/package.json (relative path: ./src/components)
>     Field 'browser' doesn't contain a valid alias configuration
>     resolve as module
>       /opt/build/repo/src/components/node_modules doesn't exist or is not a directory
>       /opt/build/repo/src/node_modules doesn't exist or is not a directory
>       looking for modules in /opt/build/repo/node_modules
>         existing directory /opt/build/repo/node_modules/react-icons
>           using description file: /opt/build/repo/node_modules/react-icons/package.json (relative path: .)
>             using description file: /opt/build/repo/node_modules/react-icons/package.json (relative path: ./SI)
>               no extension
>                 Field 'browser' doesn't contain a valid alias configuration
>                 /opt/build/repo/node_modules/react-icons/SI doesn't exist
>               .js
>                 Field 'browser' doesn't contain a valid alias configuration
>                 /opt/build/repo/node_modules/react-icons/SI.js doesn't exist
>               .json
>                 Field 'browser' doesn't contain a valid alias configuration
>                 /opt/build/repo/node_modules/react-icons/SI.json doesn't exist
>               .wasm
>                 Field 'browser' doesn't contain a valid alias configuration
>                 /opt/build/repo/node_modules/react-icons/SI.wasm doesn't exist
>               as directory
>                 /opt/build/repo/node_modules/react-icons/SI doesn't exist
>       /opt/build/node_modules doesn't exist or is not a directory
>       /opt/node_modules doesn't exist or is not a directory
>       /node_modules doesn't exist or is not a directory
>  @ ./src/components/App.js 5:0-36 27:17-26
>  @ ./src/index.js 2:0-35
> 
> ERROR in ./src/components/Portfolio.js 15:0-73
> Module not found: Error: Can't resolve 'react-icons/DI' in '/opt/build/repo/src/components'
> resolve 'react-icons/DI' in '/opt/build/repo/src/components'
>   Parsed request is a module
>   using description file: /opt/build/repo/package.json (relative path: ./src/components)
>     Field 'browser' doesn't contain a valid alias configuration
>     resolve as module
>       /opt/build/repo/src/components/node_modules doesn't exist or is not a directory
>       /opt/build/repo/src/node_modules doesn't exist or is not a directory
>       looking for modules in /opt/build/repo/node_modules
>         existing directory /opt/build/repo/node_modules/react-icons
>           using description file: /opt/build/repo/node_modules/react-icons/package.json (relative path: .)
>             using description file: /opt/build/repo/node_modules/react-icons/package.json (relative path: ./DI)
>               no extension
>                 Field 'browser' doesn't contain a valid alias configuration
>                 /opt/build/repo/node_modules/react-icons/DI doesn't exist
>               .js
>                 Field 'browser' doesn't contain a valid alias configuration
>                 /opt/build/repo/node_modules/react-icons/DI.js doesn't exist
>               .json
>                 Field 'browser' doesn't contain a valid alias configuration
>                 /opt/build/repo/node_modules/react-icons/DI.json doesn't exist
>               .wasm
>                 Field 'browser' doesn't contain a valid alias configuration
>                 /opt/build/repo/node_modules/react-icons/DI.wasm doesn't exist
>               as directory
>                 /opt/build/repo/node_modules/react-icons/DI doesn't exist
>       /opt/build/node_modules doesn't exist or is not a directory
>       /opt/node_modules doesn't exist or is not a directory
>       /node_modules doesn't exist or is not a directory
>  @ ./src/components/App.js 5:0-36 27:17-26
>  @ ./src/index.js 2:0-35
> 
> webpack 5.42.1 compiled with 2 errors in 11242 ms
> npm ERR! code ELIFECYCLE
> 2:52:55 PM: npm ERR! errno 1
> 2:52:55 PM: npm ERR! portfoliofrontend@1.0.0 build: `NODE_ENV=production webpack`
> 2:52:55 PM: npm ERR! Exit status 1
> 2:52:55 PM: npm ERR!
> 2:52:55 PM: npm ERR! Failed at the portfoliofrontend@1.0.0 build script.
> 2:52:55 PM: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
> 2:52:55 PM: npm ERR! A complete log of this run can be found in:
> 2:52:55 PM: npm ERR!     /opt/buildhome/.npm/_logs/2021-07-06T11_52_55_569Z-debug.log
> 2:52:55 PM: ​
> 2:52:55 PM: ────────────────────────────────────────────────────────────────
> 2:52:55 PM:   "build.command" failed                                        
> 2:52:55 PM: ────────────────────────────────────────────────────────────────
> 2:52:55 PM: ​
> 2:52:55 PM:   Error message
> 2:52:55 PM:   Command failed with exit code 1: npm run build
> 2:52:55 PM: ​
> 2:52:55 PM:   Error location
> 2:52:55 PM:   In Build command from Netlify app:
> 2:52:55 PM:   npm run build
> 2:52:55 PM: ​
> 2:52:55 PM:   Resolved config
> 2:52:55 PM:   build:
> 2:52:55 PM:     command: npm run build
> 2:52:55 PM:     commandOrigin: ui
> 2:52:55 PM:     publish: /opt/build/repo/dist
> 2:52:55 PM:     publishOrigin: ui
> 2:52:55 PM:   functions:
> 2:52:55 PM:     '*': {}
> 2:52:55 PM: Caching artifacts
> 2:52:55 PM: Started saving node modules
> 2:52:55 PM: Finished saving node modules
> 2:52:55 PM: Started saving build plugins
> 2:52:55 PM: Finished saving build plugins
> 2:52:55 PM: Started saving pip cache
> 2:52:56 PM: Finished saving pip cache
> 2:52:56 PM: Started saving emacs cask dependencies
> 2:52:56 PM: Finished saving emacs cask dependencies
> 2:52:56 PM: Started saving maven dependencies
> 2:52:56 PM: Finished saving maven dependencies
> 2:52:56 PM: Started saving boot dependencies
> 2:52:56 PM: Finished saving boot dependencies
> 2:52:56 PM: Started saving rust rustup cache
> 2:52:56 PM: Finished saving rust rustup cache
> 2:52:56 PM: Started saving go dependencies
> 2:52:56 PM: Finished saving go dependencies
> 2:52:58 PM: Build failed due to a user error: Build script returned non-zero exit code: 2
> 2:52:58 PM: Creating deploy upload records
> 2:52:58 PM: Failing build: Failed to build site
> 2:52:58 PM: Failed during stage 'building site': Build script returned non-zero exit code: 2
> 2:52:58 PM: Finished processing build request in 40.689998236s

Hi @baselboulos,

According to the documentation here: React Icons, it is react-icons/si and not react-icons/SI. Does changing that help?

That’s right…Thank you solved my problem quickly, you rock

1 Like