NextJS Deployment with Webpack 5 Failing

Netlify site name: wizardly-wiles-a8b4a3.netlify.app

Things used to work for my NextJS using Webpack 4.I just upgraded my app to Webpack 5. Things work fine in dev, but when I deploy to Netlify, I get the following. Any tips are appreciated.

3:01:22 PM: Build ready to start
3:01:24 PM: build-image version: 0582042f4fc261adc7bd8333f34884959c577302
3:01:24 PM: build-image tag: v3.7.6
3:01:24 PM: buildbot version: 03c6f9d243f25556225c9548fcb276f97b8bf623
3:01:24 PM: Fetching cached dependencies
3:01:24 PM: Starting to download cache of 239.6MB
3:01:27 PM: Finished downloading cache in 2.745086299s
3:01:27 PM: Starting to extract cache
3:01:32 PM: Finished extracting cache in 5.80134007s
3:01:32 PM: Finished fetching cache in 8.612793844s
3:01:32 PM: Starting to prepare the repo for build
3:01:33 PM: Preparing Git Reference refs/heads/main
3:01:34 PM: Parsing package.json dependencies
3:01:35 PM: Different publish path detected, going to use the one specified in the Netlify configuration file: 'out' versus 'out/' in the Netlify UI
3:01:35 PM: Starting build script
3:01:35 PM: Installing dependencies
3:01:35 PM: Python version set to 2.7
3:01:36 PM: Started restoring cached node version
3:01:38 PM: Finished restoring cached node version
3:01:39 PM: v15.14.0 is already installed.
3:01:40 PM: Now using node v15.14.0 (npm v7.7.6)
3:01:40 PM: Started restoring cached build plugins
3:01:40 PM: Finished restoring cached build plugins
3:01:40 PM: Attempting ruby version 2.7.1, read from environment
3:01:41 PM: Using ruby version 2.7.1
3:01:41 PM: Using PHP version 5.6
3:01:41 PM: Started restoring cached node modules
3:01:41 PM: Finished restoring cached node modules
3:01:41 PM: Installing NPM modules using NPM version 7.7.6
3:01:48 PM: added 207 packages, removed 10 packages, and audited 567 packages in 7s
3:01:48 PM: 97 packages are looking for funding
3:01:48 PM:   run `npm fund` for details
3:01:48 PM: 4 high severity vulnerabilities
3:01:48 PM: Some issues need review, and may require choosing
3:01:48 PM: a different dependency.
3:01:48 PM: Run `npm audit` for details.
3:01:48 PM: NPM modules installed
3:01:49 PM: Started restoring cached go cache
3:01:49 PM: Finished restoring cached go cache
3:01:49 PM: go version go1.14.4 linux/amd64
3:01:49 PM: go version go1.14.4 linux/amd64
3:01:49 PM: Installing missing commands
3:01:49 PM: Verify run directory
3:01:50 PM: ​
3:01:50 PM: ────────────────────────────────────────────────────────────────
3:01:50 PM:   Netlify Build                                                 
3:01:50 PM: ────────────────────────────────────────────────────────────────
3:01:50 PM: ​
3:01:50 PM: ❯ Version
3:01:50 PM:   @netlify/build 11.17.2
3:01:50 PM: ​
3:01:50 PM: ❯ Flags
3:01:50 PM:   deployId: 60a2bd82de20090007d36d5c
3:01:50 PM: ​
3:01:50 PM: ❯ Current directory
3:01:50 PM:   /opt/build/repo
3:01:50 PM: ​
3:01:50 PM: ❯ Config file
3:01:50 PM:   No config file was defined: using default values.
3:01:50 PM: ​
3:01:50 PM: ❯ Context
3:01:50 PM:   production
3:01:50 PM: ​
3:01:50 PM: ❯ Installing plugins
3:01:50 PM:    - @netlify/plugin-nextjs@3.3.0
3:02:13 PM: ​
3:02:13 PM: ❯ Loading plugins
3:02:13 PM:    - @netlify/plugin-nextjs@3.3.0 from Netlify app
3:02:13 PM: ​
3:02:13 PM: ────────────────────────────────────────────────────────────────
3:02:13 PM:   1. onPreBuild command from @netlify/plugin-nextjs             
3:02:13 PM: ────────────────────────────────────────────────────────────────
3:02:13 PM: ​
3:02:14 PM: info  - Using webpack 5. Reason: future.webpack5 option enabled https://nextjs.org/docs/messages/webpack5
3:02:14 PM: Your next.config.js must set the "target" property to one of: serverless, experimental-serverless-trace. Update the
3:02:14 PM:       target property to allow this plugin to run.
3:02:14 PM: No Next.js cache to restore.
3:02:14 PM: ​
3:02:14 PM: (@netlify/plugin-nextjs onPreBuild completed in 930ms)
3:02:14 PM: ​
3:02:14 PM: ────────────────────────────────────────────────────────────────
3:02:14 PM:   2. Build command from Netlify app                             
3:02:14 PM: ────────────────────────────────────────────────────────────────
3:02:14 PM: ​
3:02:14 PM: $ next build
3:02:14 PM: css-declaration-sorter: postcss.plugin was deprecated. Migration guide:
3:02:14 PM: https://evilmartians.com/chronicles/postcss-8-plugin-migration
3:02:14 PM: postcss-discard-comments: postcss.plugin was deprecated. Migration guide:
3:02:14 PM: https://evilmartians.com/chronicles/postcss-8-plugin-migration
3:02:15 PM: postcss-reduce-initial: postcss.plugin was deprecated. Migration guide:
3:02:15 PM: https://evilmartians.com/chronicles/postcss-8-plugin-migration
3:02:15 PM: cssnano-util-raw-cache: postcss.plugin was deprecated. Migration guide:
3:02:15 PM: https://evilmartians.com/chronicles/postcss-8-plugin-migration
3:02:15 PM: postcss-minify-gradients: postcss.plugin was deprecated. Migration guide:
3:02:15 PM: https://evilmartians.com/chronicles/postcss-8-plugin-migration
3:02:15 PM: postcss-plugin-stub: postcss.plugin was deprecated. Migration guide:
3:02:15 PM: https://evilmartians.com/chronicles/postcss-8-plugin-migration
3:02:15 PM: postcss-reduce-transforms: postcss.plugin was deprecated. Migration guide:
3:02:15 PM: https://evilmartians.com/chronicles/postcss-8-plugin-migration
3:02:15 PM: postcss-convert-values: postcss.plugin was deprecated. Migration guide:
3:02:15 PM: https://evilmartians.com/chronicles/postcss-8-plugin-migration
3:02:15 PM: postcss-calc: postcss.plugin was deprecated. Migration guide:
3:02:15 PM: https://evilmartians.com/chronicles/postcss-8-plugin-migration
3:02:15 PM: postcss-colormin: postcss.plugin was deprecated. Migration guide:
3:02:15 PM: https://evilmartians.com/chronicles/postcss-8-plugin-migration
3:02:15 PM: postcss-ordered-values: postcss.plugin was deprecated. Migration guide:
3:02:15 PM: https://evilmartians.com/chronicles/postcss-8-plugin-migration
3:02:15 PM: postcss-minify-selectors: postcss.plugin was deprecated. Migration guide:
3:02:15 PM: https://evilmartians.com/chronicles/postcss-8-plugin-migration
3:02:15 PM: postcss-minify-params: postcss.plugin was deprecated. Migration guide:
3:02:15 PM: https://evilmartians.com/chronicles/postcss-8-plugin-migration
3:02:15 PM: postcss-normalize-charset: postcss.plugin was deprecated. Migration guide:
3:02:15 PM: https://evilmartians.com/chronicles/postcss-8-plugin-migration
3:02:15 PM: postcss-minify-font-values: postcss.plugin was deprecated. Migration guide:
3:02:15 PM: https://evilmartians.com/chronicles/postcss-8-plugin-migration
3:02:15 PM: postcss-normalize-url: postcss.plugin was deprecated. Migration guide:
3:02:15 PM: https://evilmartians.com/chronicles/postcss-8-plugin-migration
3:02:15 PM: stylehacks: postcss.plugin was deprecated. Migration guide:
3:02:15 PM: https://evilmartians.com/chronicles/postcss-8-plugin-migration
3:02:15 PM: postcss-merge-longhand: postcss.plugin was deprecated. Migration guide:
3:02:15 PM: https://evilmartians.com/chronicles/postcss-8-plugin-migration
3:02:15 PM: postcss-discard-duplicates: postcss.plugin was deprecated. Migration guide:
3:02:15 PM: https://evilmartians.com/chronicles/postcss-8-plugin-migration
3:02:15 PM: postcss-discard-overridden: postcss.plugin was deprecated. Migration guide:
3:02:15 PM: https://evilmartians.com/chronicles/postcss-8-plugin-migration
3:02:15 PM: postcss-normalize-repeat-style: postcss.plugin was deprecated. Migration guide:
3:02:15 PM: https://evilmartians.com/chronicles/postcss-8-plugin-migration
3:02:15 PM: postcss-merge-rules: postcss.plugin was deprecated. Migration guide:
3:02:15 PM: https://evilmartians.com/chronicles/postcss-8-plugin-migration
3:02:15 PM: postcss-discard-empty: postcss.plugin was deprecated. Migration guide:
3:02:15 PM: https://evilmartians.com/chronicles/postcss-8-plugin-migration
3:02:15 PM: postcss-unique-selectors: postcss.plugin was deprecated. Migration guide:
3:02:15 PM: https://evilmartians.com/chronicles/postcss-8-plugin-migration
3:02:15 PM: postcss-normalize-string: postcss.plugin was deprecated. Migration guide:
3:02:15 PM: https://evilmartians.com/chronicles/postcss-8-plugin-migration
3:02:15 PM: postcss-normalize-positions: postcss.plugin was deprecated. Migration guide:
3:02:15 PM: https://evilmartians.com/chronicles/postcss-8-plugin-migration
3:02:15 PM: postcss-normalize-whitespace: postcss.plugin was deprecated. Migration guide:
3:02:15 PM: https://evilmartians.com/chronicles/postcss-8-plugin-migration
3:02:15 PM: postcss-normalize-unicode: postcss.plugin was deprecated. Migration guide:
3:02:15 PM: https://evilmartians.com/chronicles/postcss-8-plugin-migration
3:02:15 PM: postcss-normalize-display-values: postcss.plugin was deprecated. Migration guide:
3:02:15 PM: https://evilmartians.com/chronicles/postcss-8-plugin-migration
3:02:15 PM: postcss-normalize-timing-functions: postcss.plugin was deprecated. Migration guide:
3:02:15 PM: https://evilmartians.com/chronicles/postcss-8-plugin-migration
3:02:15 PM: cssnano-simple: postcss.plugin was deprecated. Migration guide:
3:02:15 PM: https://evilmartians.com/chronicles/postcss-8-plugin-migration
3:02:15 PM: info  - Using webpack 5. Reason: future.webpack5 option enabled https://nextjs.org/docs/messages/webpack5
3:02:16 PM: warn  - No build cache found. Please configure build caching for faster rebuilds. Read more: https://nextjs.org/docs/messages/no-cache
3:02:16 PM: info  - Checking validity of types...
3:02:24 PM: info  - Creating an optimized production build...
3:02:26 PM: info  - Using external babel configuration from /opt/build/repo/.babelrc
3:02:59 PM: Failed to compile.
3:02:59 PM: 
3:02:59 PM: HookWebpackError: Cannot read property 'unprefixed' of undefined
3:02:59 PM: > Build error occurred
3:02:59 PM: Error: > Build failed because of webpack errors
3:02:59 PM:     at /opt/build/repo/node_modules/next/dist/build/index.js:17:924
3:02:59 PM:     at async Span.traceAsyncFn (/opt/build/repo/node_modules/next/dist/telemetry/trace/trace.js:5:584)
3:02:59 PM: ​
3:02:59 PM: ────────────────────────────────────────────────────────────────
3:02:59 PM:   "build.command" failed                                        
3:02:59 PM: ────────────────────────────────────────────────────────────────
3:02:59 PM: ​
3:02:59 PM:   Error message
3:02:59 PM:   Command failed with exit code 1: next build
3:02:59 PM: ​
3:02:59 PM:   Error location
3:02:59 PM:   In Build command from Netlify app:
3:02:59 PM:   next build
3:02:59 PM: ​
3:02:59 PM:   Resolved config
3:02:59 PM:   build:
3:02:59 PM:     command: next build
3:02:59 PM:     commandOrigin: ui
3:02:59 PM:     environment:
3:02:59 PM:       - NODE_VERSION
3:02:59 PM:     publish: /opt/build/repo/out
3:02:59 PM:   plugins:
3:02:59 PM:     - inputs: {}
3:02:59 PM:       origin: ui
3:02:59 PM:       package: '@netlify/plugin-nextjs'
3:02:59 PM: Caching artifacts
3:02:59 PM: Started saving node modules
3:02:59 PM: Finished saving node modules
3:02:59 PM: Started saving build plugins
3:02:59 PM: Finished saving build plugins
3:02:59 PM: Started saving pip cache
3:02:59 PM: Finished saving pip cache
3:02:59 PM: Started saving emacs cask dependencies
3:02:59 PM: Finished saving emacs cask dependencies
3:02:59 PM: Started saving maven dependencies
3:02:59 PM: Finished saving maven dependencies
3:02:59 PM: Started saving boot dependencies
3:02:59 PM: Finished saving boot dependencies
3:02:59 PM: Started saving rust rustup cache
3:02:59 PM: Finished saving rust rustup cache
3:02:59 PM: Started saving go dependencies
3:02:59 PM: Finished saving go dependencies
3:02:59 PM: Build failed due to a user error: Build script returned non-zero exit code: 2
3:02:59 PM: Creating deploy upload records
3:02:59 PM: Failing build: Failed to build site
3:03:00 PM: Failed during stage 'building site': Build script returned non-zero exit code: 2
3:03:00 PM: Finished processing build request in 1m35.854595389s

hello! a great place for this post (for the record) would be Issues · netlify/netlify-plugin-nextjs · GitHub. as for this error, this seems possibly specific to your site (at least specific enough to not be able to figure out from this info alone). to help i’d need a minimal repo that reproduces this error in netlify. as soon as i get that i can figure out what’s going wrong for you! :slight_smile: @neilac333

I was actually able to figure it out but couldn’t figure out how to delete the question. Thanks for your reply.

Though I will point out that the images processed by next/image are distorted on Netlify but not on my machine nor on other platforms. Just something to look into perhaps