Next js project build locally but get error "TypeError: Cannot read property 'width' of null" when deploying to netlify

Support
, , ,
1

I import webp image in next project to use it as a banner. It work fine locally, but always fail when I deploy it to netlify.

1:13:06 PM: Build ready to start
1:13:08 PM: build-image version: fa439ad1ab9393b2c0d449d8d7c033927683f4b0
1:13:08 PM: build-image tag: v4.3.0
1:13:08 PM: buildbot version: 1ed4041128c7c024b4c4b72e2ad30a0740c570a7
1:13:09 PM: Building without cache
1:13:09 PM: Starting to prepare the repo for build
1:13:09 PM: No cached dependencies found. Cloning fresh repo
1:13:09 PM: git clone https://github.com/Akbar-ATQ/sawargi
1:13:11 PM: Preparing Git Reference pull/16/head
1:13:12 PM: Parsing package.json dependencies
1:13:13 PM: Starting build script
1:13:13 PM: Installing dependencies
1:13:13 PM: Python version set to 2.7
1:13:14 PM: Downloading and installing node v16.8.0...
1:13:14 PM: Downloading https://nodejs.org/dist/v16.8.0/node-v16.8.0-linux-x64.tar.xz...
1:13:14 PM: Computing checksum with sha256sum
1:13:14 PM: Checksums matched!
1:13:18 PM: Now using node v16.8.0 (npm v7.21.0)
1:13:18 PM: Started restoring cached build plugins
1:13:18 PM: Finished restoring cached build plugins
1:13:18 PM: Attempting ruby version 2.7.2, read from environment
1:13:20 PM: Using ruby version 2.7.2
1:13:21 PM: Using PHP version 8.0
1:13:21 PM: Started restoring cached node modules
1:13:21 PM: Finished restoring cached node modules
1:13:21 PM: Installing NPM modules using NPM version 7.21.0
1:13:23 PM: npm WARN old lockfile
1:13:23 PM: npm WARN old lockfile The package-lock.json file was created with an old version of npm,
1:13:23 PM: npm WARN old lockfile so supplemental metadata must be fetched from the registry.
1:13:23 PM: npm WARN old lockfile
1:13:23 PM: npm WARN old lockfile This is a one-time fix-up, please be patient...
1:13:23 PM: npm WARN old lockfile
1:13:40 PM: npm WARN deprecated querystring@0.2.1: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
1:13:45 PM: npm WARN deprecated querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
1:13:53 PM: added 690 packages, and audited 691 packages in 32s
1:13:53 PM: 85 packages are looking for funding
1:13:53 PM:   run `npm fund` for details
1:13:53 PM: found 0 vulnerabilities
1:13:53 PM: NPM modules installed
1:13:54 PM: Started restoring cached go cache
1:13:54 PM: Finished restoring cached go cache
1:13:54 PM: go version go1.16.5 linux/amd64
1:13:54 PM: go version go1.16.5 linux/amd64
1:13:54 PM: Installing missing commands
1:13:54 PM: Verify run directory
1:13:56 PM: ​
1:13:56 PM: ────────────────────────────────────────────────────────────────
1:13:56 PM:   Netlify Build                                                 
1:13:56 PM: ────────────────────────────────────────────────────────────────
1:13:56 PM: ​
1:13:56 PM: ❯ Version
1:13:56 PM:   @netlify/build 18.7.3
1:13:56 PM: ​
1:13:56 PM: ❯ Flags
1:13:56 PM:   baseRelDir: true
1:13:56 PM:   buildId: 6131bcf2fba0d1c319ee1fd5
1:13:56 PM:   deployId: 6131bcf2fba0d1c319ee1fd7
1:13:56 PM: ​
1:13:56 PM: ❯ Current directory
1:13:56 PM:   /opt/build/repo
1:13:56 PM: ​
1:13:56 PM: ❯ Config file
1:13:56 PM:   No config file was defined: using default values.
1:13:56 PM: ​
1:13:56 PM: ❯ Context
1:13:56 PM:   deploy-preview
1:13:56 PM: ​
1:13:56 PM: ❯ Installing plugins
1:13:56 PM:    - @netlify/plugin-nextjs@3.9.0
1:14:06 PM: ​
1:14:06 PM: ❯ Loading plugins
1:14:06 PM:    - @netlify/plugin-nextjs@3.9.0 from Netlify app
1:14:06 PM: ​
1:14:06 PM: ────────────────────────────────────────────────────────────────
1:14:06 PM:   1. onPreBuild command from @netlify/plugin-nextjs             
1:14:06 PM: ────────────────────────────────────────────────────────────────
1:14:06 PM: ​
1:14:06 PM: Using Next.js 11.1.2
1:14:06 PM: Warning: support for Next.js >=11.1.0 is experimental
1:14:07 PM: info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
1:14:07 PM: No Next.js cache to restore.
1:14:07 PM: ​
1:14:07 PM: (@netlify/plugin-nextjs onPreBuild completed in 955ms)
1:14:07 PM: ​
1:14:07 PM: ────────────────────────────────────────────────────────────────
1:14:07 PM:   2. Build command from Netlify app                             
1:14:07 PM: ────────────────────────────────────────────────────────────────
1:14:07 PM: ​
1:14:07 PM: $ CI='' npm run build
1:14:08 PM: > sawargi@0.2.0 build
1:14:08 PM: > next build
1:14:09 PM: info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
1:14:09 PM: warn  - No build cache found. Please configure build caching for faster rebuilds. Read more: https://nextjs.org/docs/messages/no-cache
1:14:09 PM: info  - Checking validity of types...
1:14:21 PM: warn  - The Next.js plugin was not detected in your ESLint configuration. See https://nextjs.org/docs/basic-features/eslint#migrating-existing-config
1:14:27 PM: info  - Creating an optimized production build...
1:14:52 PM: Failed to compile.
1:14:52 PM: 
1:14:52 PM: ./public/sawargi_assets/produk_sawargi.webp
1:14:52 PM: TypeError: Cannot read property 'width' of null
1:14:52 PM: > Build error occurred
1:14:52 PM: Error: > Build failed because of webpack errors
1:14:52 PM:     at /opt/build/repo/node_modules/next/dist/build/index.js:397:19
1:14:52 PM:     at async Span.traceAsyncFn (/opt/build/repo/node_modules/next/dist/telemetry/trace/trace.js:60:20)
1:14:52 PM:     at async Object.build [as default] (/opt/build/repo/node_modules/next/dist/build/index.js:77:25)
1:14:53 PM: ​
1:14:53 PM: ────────────────────────────────────────────────────────────────
1:14:53 PM:   "build.command" failed                                        
1:14:53 PM: ────────────────────────────────────────────────────────────────
1:14:53 PM: ​
1:14:53 PM:   Error message
1:14:53 PM:   Command failed with exit code 1: CI='' npm run build
1:14:53 PM: ​
1:14:53 PM:   Error location
1:14:53 PM:   In Build command from Netlify app:
1:14:53 PM:   CI='' npm run build
1:14:53 PM: ​
1:14:53 PM:   Resolved config
1:14:53 PM:   build:
1:14:53 PM:     command: CI='' npm run build
1:14:53 PM:     commandOrigin: ui
1:14:53 PM:     environment:
1:14:53 PM:       - CI
1:14:53 PM:       - REVIEW_ID
1:14:53 PM:     publish: /opt/build/repo/out
1:14:53 PM:     publishOrigin: ui
1:14:53 PM:   plugins:
1:14:53 PM:     - inputs: {}
1:14:53 PM:       origin: ui
1:14:53 PM:       package: '@netlify/plugin-nextjs'
1:14:53 PM: Caching artifacts
1:14:53 PM: Started saving node modules
1:14:53 PM: Finished saving node modules
1:14:53 PM: Started saving build plugins
1:14:53 PM: Finished saving build plugins
1:14:53 PM: Started saving pip cache
1:14:53 PM: Finished saving pip cache
1:14:53 PM: Started saving emacs cask dependencies
1:14:53 PM: Finished saving emacs cask dependencies
1:14:53 PM: Started saving maven dependencies
1:14:53 PM: Finished saving maven dependencies
1:14:53 PM: Started saving boot dependencies
1:14:53 PM: Finished saving boot dependencies
1:14:53 PM: Started saving rust rustup cache
1:14:53 PM: Finished saving rust rustup cache
1:14:53 PM: Started saving go dependencies
1:14:53 PM: Finished saving go dependencies
1:14:56 PM: Creating deploy upload records
1:14:56 PM: Build failed due to a user error: Build script returned non-zero exit code: 2
1:14:56 PM: Failing build: Failed to build site
1:14:57 PM: Failed during stage 'building site': Build script returned non-zero exit code: 2
1:14:57 PM: Finished processing build request in 1m48.197803681s
2

Does this file exist in your repo (not locally) at the specific path and same case as the one mentioned in the logs?

3

yes it exist in the repo.

4

Hey there, @Akbar-ATQ :wave:

Thanks for following up here. We would be more than happy to look into this further, but we will need some more information on your end. The more details you can provide, the better we can support you.

Can you provide your netlify build instance (ie: “example-jones.netlify.com”), your public repo for this project, and a list of troubleshooting steps you have taken?

Thank you! :netlisparkles:

7

Sorry for the late reply. I somehow manage to deploy it after deleting the webp file and replace it with png. But the image not displayed even though it displayed correctly in dev mode.

I also try to deploy it to vercel and they give error Error: VipsJpeg: out of order read at line 0

https://main--hungry-boyd-47bf81

Note: my reply before this got deleted automatically when I try to give link https://main--hungry-boyd-47bf81(.)netlify(.)app