Netlify not able to deploy when certain images are utilized

My website tcmarrocco.com/home is unable to be deployed properly when I add some images to the assets folder and use it in my code. I am not sure why certain images work but others do not. EG in my code, once I mark the ukotoa.jpg image not as a comment and attempt to utilize it, the build does not work.

Everything works when I test it locally.

This is the log of it when it fails.

9:06:00 AM: Netlify Build
9:06:00 AM: ────────────────────────────────────────────────────────────────
9:06:00 AM: ​
9:06:00 AM: ❯ Version
9:06:00 AM: @netlify/build 29.58.3
9:06:00 AM: ​
9:06:00 AM: ❯ Flags
9:06:00 AM: accountId: 6639847dd79e9e740451f091
9:06:00 AM: baseRelDir: true
9:06:00 AM: buildId: 678a71737bd8830008aa5a4e
9:06:00 AM: deployId: 678a71737bd8830008aa5a50
9:06:00 AM: ​
9:06:00 AM: ❯ Current directory
9:06:00 AM: /opt/build/repo/client
9:06:00 AM: ​
9:06:00 AM: ❯ Config file
9:06:00 AM: No config file was defined: using default values.
9:06:00 AM: ​
9:06:00 AM: ❯ Context
9:06:00 AM: deploy-preview
9:06:00 AM: ​
9:06:00 AM: Build command from Netlify app
9:06:00 AM: ────────────────────────────────────────────────────────────────
9:06:00 AM: ​
9:06:00 AM: $ npm run build
9:06:00 AM: > portfolio-vite-react-router@1.0.0 build
9:06:00 AM: > vite build
9:06:02 AM: vite v3.2.8 building for production…
9:06:02 AM: transforming…
9:06:03 AM: Failed during stage ‘building site’: Build script returned non-zero exit code: 2 (Search results for '"non-zero exit code: 2"' - Netlify Support Forums)
9:06:03 AM: Module level directives cause errors when bundled, ‘use client’ was ignored.
9:06:03 AM: Module level directives cause errors when bundled, ‘use client’ was ignored.
9:06:03 AM: Module level directives cause errors when bundled, ‘use client’ was ignored.
9:06:03 AM: Module level directives cause errors when bundled, ‘use client’ was ignored.
9:06:03 AM: Module level directives cause errors when bundled, ‘use client’ was ignored.
9:06:03 AM: Module level directives cause errors when bundled, ‘use client’ was ignored.
9:06:03 AM: Module level directives cause errors when bundled, ‘use client’ was ignored.
9:06:03 AM: Module level directives cause errors when bundled, ‘use client’ was ignored.
9:06:03 AM: Module level directives cause errors when bundled, ‘use client’ was ignored.
9:06:03 AM: Module level directives cause errors when bundled, ‘use client’ was ignored.
9:06:03 AM: Module level directives cause errors when bundled, ‘use client’ was ignored.
9:06:03 AM: Module level directives cause errors when bundled, ‘use client’ was ignored.
9:06:03 AM: Module level directives cause errors when bundled, ‘use client’ was ignored.
9:06:03 AM: Module level directives cause errors when bundled, ‘use client’ was ignored.
9:06:03 AM: Module level directives cause errors when bundled, ‘use client’ was ignored.
9:06:03 AM: Module level directives cause errors when bundled, ‘use client’ was ignored.
9:06:03 AM: Module level directives cause errors when bundled, ‘use client’ was ignored.
9:06:03 AM: Module level directives cause errors when bundled, ‘use client’ was ignored.
9:06:03 AM: Module level directives cause errors when bundled, ‘use client’ was ignored.
9:06:03 AM: Module level directives cause errors when bundled, ‘use client’ was ignored.
9:06:03 AM: Module level directives cause errors when bundled, ‘use client’ was ignored.
9:06:03 AM: Module level directives cause errors when bundled, ‘use client’ was ignored.
9:06:03 AM: Module level directives cause errors when bundled, ‘use client’ was ignored.
9:06:03 AM: Module level directives cause errors when bundled, ‘use client’ was ignored.
9:06:03 AM: Module level directives cause errors when bundled, ‘use client’ was ignored.
9:06:03 AM: ✓ 59 modules transformed.
9:06:03 AM: Could not resolve ‘…/assets/Miniatures/DSC_0202.jpg’ from src/components/Carousel.jsx
9:06:03 AM: error during build:
9:06:03 AM: Error: Could not resolve ‘…/assets/Miniatures/DSC_0202.jpg’ from src/components/Carousel.jsx
9:06:03 AM: at error (file:///opt/build/repo/client/node_modules/rollup/dist/es/shared/rollup.js:1858:30)
9:06:03 AM: at ModuleLoader.handleResolveId (file:///opt/build/repo/client/node_modules/rollup/dist/es/shared/rollup.js:22156:24)
9:06:03 AM: at file:///opt/build/repo/client/node_modules/rollup/dist/es/shared/rollup.js:22119:26
9:06:03 AM: ​
9:06:03 AM: “build.command” failed
9:06:03 AM: ────────────────────────────────────────────────────────────────
9:06:03 AM: ​
9:06:03 AM: Error message
9:06:03 AM: Command failed with exit code 1: npm run build (Search results for '"non-zero exit code: 1"' - Netlify Support Forums)
9:06:03 AM: ​
9:06:03 AM: Error location
9:06:03 AM: In Build command from Netlify app:
9:06:03 AM: npm run build
9:06:03 AM: ​
9:06:03 AM: Resolved config
9:06:03 AM: build:
9:06:03 AM: base: /opt/build/repo/client
9:06:03 AM: command: npm run build
9:06:03 AM: commandOrigin: ui
9:06:03 AM: environment:
9:06:03 AM: - REVIEW_ID
9:06:03 AM: publish: /opt/build/repo/client/dist
9:06:03 AM: publishOrigin: ui
9:06:03 AM: Build failed due to a user error: Build script returned non-zero exit code: 2
9:06:03 AM: Failing build: Failed to build site
9:06:03 AM: Finished processing build request in 36.057s

Hi, @tmarr1426

Can you confirm is this builds fine locally using npm run build on your PC.

It looks like the build is failing as …/assets/Miniatures/DSC_0202.jpg is unresolveable. Most likely due to the .../ which is an invalid path.

Try ../ instead.

Thanks,

npm run build does not work locally, I have to use npm run dev. But when I tried setting up my build with that on netlify it did not work. Is there some trick to get npm run dev to work for deploying that I missed?

Additionally, the … in my code is actually just (…/assets) like you suggested.

Ahh I see the mistake there. The forums convert any double-dot (..) to triple-dots ... if not wrapped in tildas. Double-dot is what we want fyi… you can use tildas (``) to wrap any code which will prevent this :slight_smile:


dev commands are for development, they create a local server for you to edit and make changes with live reloads.

build commands are used to compile the application into it’s final state… ready to be deployed.

You’ll need to use your project’s build command locally and with Netlify to build your site ready for deployment.

If your site doesn’t build locally without an error, then this is an issue with your codebase and not something Netlify related.

I expect this is due to ../assets/Miniatures/DSC_0202.jpg not existing in the project or it is incorrectly referenced.

Thanks

Ah okay yea npm run build did not work for me locally. I will do some research to see what I can do to get the build command to work! Thank you for your assistance!

1 Like

Hi Tmar, are the images in a public folder or inside your src folder?

The images are in the src folder. However, the images that ARE working show up in the client/dist/assets folder. I tried manually adding the images that were NOT working to that folder and it still did not work.

Is this resolved or not?

Yes, Kylesloper helped resolve it. I basically had to create a new repo and re-create all the components/project. Something happened when the repo was created that caused npm build not to work. Recreating it fixed the issue.

1 Like