Build fail due to image file paths but no issue on local dev server

I made changes to an already deployed SPA react web page, which included copying code from a component, changing it’s markup and images. The changes work on Vite’s local dev server with no issues. But when I push this to github and Netlify rebuilds, it fails. Full log below.

I have been able to run the build command and create a new build dist folder with no issues locally. I have checked file extensions, I have made no changes elsewhere to configurations. Why would an issue exist when creating a build folder but isn’t an issue on the local dev server? What things should I try?

Full build log below:

9:49:12 AM: build-image version: 0c5695ad82eb9b0111196b4ab87e76fc88dfb543 (focal)
9:49:12 AM: buildbot version: 44bdaa9bbaa9912838fe50ed0826ccd09db9f453
9:49:12 AM: Fetching cached dependencies
9:49:12 AM: Failed to fetch cache, continuing with build
9:49:12 AM: Starting to prepare the repo for build
9:49:12 AM: No cached dependencies found. Cloning fresh repo
9:49:12 AM: git clone --filter=blob:none GitHub - T-J-D-Cavey/my-portfolio-site: My portfolio, a demo of front end web development and a summary of previous projects.
9:49:12 AM: Preparing Git Reference refs/heads/main
9:49:14 AM: Starting to install dependencies
9:49:14 AM: Python version set to 3.8
9:49:15 AM: Attempting Ruby version 2.7.2, read from environment
9:49:15 AM: Using Ruby version 2.7.2
9:49:16 AM: Started restoring cached go cache
9:49:16 AM: Finished restoring cached go cache
9:49:16 AM: go version go1.19.13 linux/amd64
9:49:16 AM: Using PHP version 8.0
9:49:17 AM: v18.18.2 is already installed.
9:49:17 AM: Now using node v18.18.2 (npm v9.8.1)
9:49:17 AM: Enabling Node.js Corepack
9:49:17 AM: Started restoring cached build plugins
9:49:17 AM: Finished restoring cached build plugins
9:49:17 AM: Started restoring cached corepack dependencies
9:49:17 AM: Finished restoring cached corepack dependencies
9:49:18 AM: No npm workspaces detected
9:49:18 AM: Started restoring cached node modules
9:49:18 AM: Finished restoring cached node modules
9:49:18 AM: Installing npm packages using npm version 9.8.1
9:49:22 AM: added 175 packages, and audited 436 packages in 4s
9:49:22 AM: 46 packages are looking for funding
9:49:22 AM: run npm fund for details
9:49:22 AM: 4 vulnerabilities (3 moderate, 1 critical)
9:49:22 AM: To address all issues, run:
9:49:22 AM: npm audit fix
9:49:22 AM: Run npm audit for details.
9:49:22 AM: npm packages installed
9:49:22 AM: Install dependencies script success
9:49:22 AM: Starting build script
9:49:23 AM: Detected 1 framework(s)
9:49:23 AM: “vite” at version “2.9.16”
9:49:23 AM: Section completed: initializing
9:49:25 AM: ​
9:49:25 AM: Netlify Build
9:49:25 AM: ────────────────────────────────────────────────────────────────
9:49:25 AM: ​
9:49:25 AM: ❯ Version
9:49:25 AM: @netlify/build 29.23.4
9:49:25 AM: ​
9:49:25 AM: ❯ Flags
9:49:25 AM: baseRelDir: true
9:49:25 AM: buildId: 653390814f5bf400088a4584
9:49:25 AM: deployId: 653390814f5bf400088a4586
9:49:25 AM: ​
9:49:25 AM: ❯ Current directory
9:49:25 AM: /opt/build/repo
9:49:25 AM: ​
9:49:25 AM: ❯ Config file
9:49:25 AM: No config file was defined: using default values.
9:49:25 AM: ​
9:49:25 AM: ❯ Context
9:49:25 AM: production
9:49:25 AM: ​
9:49:25 AM: Build command from Netlify app
9:49:25 AM: ────────────────────────────────────────────────────────────────
9:49:25 AM: ​
9:49:25 AM: $ npm run build
9:49:25 AM: > my-portfolio-site@0.3.2 build
9:49:25 AM: > vite build
9:49:25 AM: vite v2.9.16 building for production…
9:49:25 AM: transforming…
9:49:26 AM: Failed during stage “building site”: Build script returned non-zero exit code: 2
9:49:26 AM: ✓ 73 modules transformed.
9:49:26 AM: Could not resolve “…/…/assets/wedding4.png” from src/components/projects/WeddingSite.jsx
9:49:26 AM: error during build:
9:49:26 AM: Error: Could not resolve “…/…/assets/wedding4.png” from src/components/projects/WeddingSite.jsx
9:49:26 AM: at error (/opt/build/repo/node_modules/rollup/dist/shared/rollup.js:198:30)
9:49:26 AM: at ModuleLoader.handleResolveId (/opt/build/repo/node_modules/rollup/dist/shared/rollup.js:22464:24)
9:49:26 AM: at /opt/build/repo/node_modules/rollup/dist/shared/rollup.js:22427:26
9:49:26 AM: ​
9:49:26 AM: “build.command” failed
9:49:26 AM: ────────────────────────────────────────────────────────────────
9:49:26 AM: ​
9:49:26 AM: Error message
9:49:26 AM: Command failed with exit code 1: npm run build (Search results for '"non-zero exit code: 1"' - Netlify Support Forums)
9:49:26 AM: ​
9:49:26 AM: Error location
9:49:26 AM: In Build command from Netlify app:
9:49:26 AM: npm run build
9:49:26 AM: ​
9:49:26 AM: Resolved config
9:49:26 AM: build:
9:49:26 AM: command: npm run build
9:49:26 AM: commandOrigin: ui
9:49:26 AM: publish: /opt/build/repo/dist
9:49:26 AM: publishOrigin: ui
9:49:26 AM: Build failed due to a user error: Build script returned non-zero exit code: 2
9:49:26 AM: Failing build: Failed to build site
9:49:26 AM: Finished processing build request in 14.71s

1 Like

Thank you, @hrishikesh - you were spot on.

The images were originally a .PNG format. I committed this to github with it was working locally and the build worked locally.

When pushed to github and netlify attempted to re-build, those errors showed up. When changing the image format, I assume your suggestion was correct, that Github didn’t recognise the change in case sensitivity as a change.

To fix this, remove the images, commit and push. re-add the images, commit and push. It all works.

thanks for sharing this with the community.