Home
Support Forums

Nextjs build error only occuring in production

Hiya !

Currently scratching my head trying to solve a build issue with NextJs.

When building locally, I don’t run into any problems, however when deploying to netlify webpack cannot find any of the imports. I’m using absolute paths, but I’ve also tried this with relative paths with the same issue.

Here is the build log

1:31:49 PM: Build ready to start
1:31:51 PM: build-image version: 0582042f4fc261adc7bd8333f34884959c577302
1:31:51 PM: build-image tag: v3.7.6
1:31:51 PM: buildbot version: 023721623c5855032464c288dddd2ca7576c4b2f
1:31:51 PM: Fetching cached dependencies
1:31:51 PM: Failed to fetch cache, continuing with build
1:31:51 PM: Starting to prepare the repo for build
1:31:51 PM: No cached dependencies found. Cloning fresh repo
1:31:51 PM: git clone https://github.com/*****
1:31:53 PM: Preparing Git Reference refs/heads/main
1:31:53 PM: Parsing package.json dependencies
1:31:54 PM: Starting build script
1:31:54 PM: Installing dependencies
1:31:54 PM: Python version set to 2.7
1:31:55 PM: v12.18.0 is already installed.
1:31:56 PM: Now using node v12.18.0 (npm v6.14.4)
1:31:56 PM: Started restoring cached build plugins
1:31:56 PM: Finished restoring cached build plugins
1:31:56 PM: Attempting ruby version 2.7.1, read from environment
1:31:58 PM: Using ruby version 2.7.1
1:31:58 PM: Using PHP version 5.6
1:31:58 PM: Started restoring cached node modules
1:31:58 PM: Finished restoring cached node modules
1:31:58 PM: Installing NPM modules using NPM version 6.14.4
1:32:14 PM: npm WARN read-shrinkwrap This version of npm is compatible with lockfileVersion@1, but package-lock.json was generated for lockfileVersion@2. I'll try to do my best with it!npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@2.3.2 (node_modules/fsevents):
1:32:14 PM: npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@2.3.2: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
1:32:14 PM: added 353 packages from 261 contributors and audited 354 packages in 14.825s
1:32:14 PM: 57 packages are looking for funding
1:32:14 PM:   run `npm fund` for details
1:32:14 PM: found 1 moderate severity vulnerability
1:32:14 PM:   run `npm audit fix` to fix them, or `npm audit` for details
1:32:14 PM: NPM modules installed
1:32:14 PM: Started restoring cached go cache
1:32:14 PM: Finished restoring cached go cache
1:32:14 PM: go version go1.14.4 linux/amd64
1:32:14 PM: go version go1.14.4 linux/amd64
1:32:14 PM: Installing missing commands
1:32:14 PM: Verify run directory
1:32:15 PM: ​
1:32:15 PM: ────────────────────────────────────────────────────────────────
1:32:15 PM:   Netlify Build                                                 
1:32:15 PM: ────────────────────────────────────────────────────────────────
1:32:15 PM: ​
1:32:15 PM: ❯ Version
1:32:15 PM:   @netlify/build 12.2.0
1:32:15 PM: ​
1:32:15 PM: ❯ Flags
1:32:15 PM:   deployId: 60ca35847ce6e30676bfaea5
1:32:15 PM: ​
1:32:15 PM: ❯ Current directory
1:32:15 PM:   /opt/build/repo
1:32:15 PM: ​
1:32:15 PM: ❯ Config file
1:32:15 PM:   No config file was defined: using default values.
1:32:15 PM: ​
1:32:15 PM: ❯ Context
1:32:15 PM:   production
1:32:15 PM: ​
1:32:15 PM: ❯ Installing plugins
1:32:15 PM:    - @netlify/plugin-nextjs@3.4.2
1:32:37 PM: ​
1:32:37 PM: ❯ Loading plugins
1:32:37 PM:    - @netlify/plugin-nextjs@3.4.2 from Netlify app
1:32:37 PM: ​
1:32:37 PM: ────────────────────────────────────────────────────────────────
1:32:37 PM:   1. onPreBuild command from @netlify/plugin-nextjs             
1:32:37 PM: ────────────────────────────────────────────────────────────────
1:32:37 PM: ​
1:32:37 PM: ** Warning: support for Next.js >=11.0.0 is experimental **
1:32:37 PM: info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
1:32:38 PM: No Next.js cache to restore.
1:32:38 PM: ​
1:32:38 PM: (@netlify/plugin-nextjs onPreBuild completed in 853ms)
1:32:38 PM: ​
1:32:38 PM: ────────────────────────────────────────────────────────────────
1:32:38 PM:   2. Build command from Netlify app                             
1:32:38 PM: ────────────────────────────────────────────────────────────────
1:32:38 PM: ​
1:32:38 PM: $ npm run build
1:32:38 PM: > nextapp@0.1.0 build /opt/build/repo
1:32:38 PM: > next build
1:32:39 PM: info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
1:32:39 PM: warn  - No build cache found. Please configure build caching for faster rebuilds. Read more: https://nextjs.org/docs/messages/no-cache
1:32:39 PM: info  - Checking validity of types...
1:32:40 PM: warn  - No ESLint configuration detected. Run next lint to begin setup
1:32:40 PM: info  - Creating an optimized production build...
1:32:48 PM: Failed to compile.
1:32:48 PM: 
1:32:48 PM: ModuleNotFoundError: Module not found: Error: Can't resolve '@/features/page' in '/opt/build/repo/src/pages'
1:32:48 PM: > Build error occurred
1:32:48 PM: Error: > Build failed because of webpack errors
1:32:48 PM:     at /opt/build/repo/node_modules/next/dist/build/index.js:15:924
1:32:48 PM:     at async Span.traceAsyncFn (/opt/build/repo/node_modules/next/dist/telemetry/trace/trace.js:6:584)
1:32:48 PM: npm ERR! code ELIFECYCLE
1:32:48 PM: npm ERR! errno 1
1:32:48 PM: npm ERR! nextapp@0.1.0 build: `next build`
1:32:48 PM: npm ERR! Exit status 1
1:32:48 PM: npm ERR!
1:32:48 PM: npm ERR! Failed at the nextapp@0.1.0 build script.
1:32:48 PM: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
1:32:49 PM: npm ERR! A complete log of this run can be found in:
1:32:49 PM: npm ERR!     /opt/buildhome/.npm/_logs/2021-06-16T17_32_48_997Z-debug.log
1:32:49 PM: ​
1:32:49 PM: ────────────────────────────────────────────────────────────────
1:32:49 PM:   "build.command" failed                                        
1:32:49 PM: ────────────────────────────────────────────────────────────────
1:32:49 PM: ​
1:32:49 PM:   Error message
1:32:49 PM:   Command failed with exit code 1: npm run build
1:32:49 PM: ​
1:32:49 PM:   Error location
1:32:49 PM:   In Build command from Netlify app:
1:32:49 PM:   npm run build
1:32:49 PM: ​
1:32:49 PM:   Resolved config
1:32:49 PM:   build:
1:32:49 PM:     command: npm run build
1:32:49 PM:     commandOrigin: ui
1:32:49 PM:     publish: /opt/build/repo/out
1:32:49 PM:   functions:
1:32:49 PM:     '*': {}
1:32:49 PM:   plugins:
1:32:49 PM:     - inputs: {}
1:32:49 PM:       origin: ui
1:32:49 PM:       package: '@netlify/plugin-nextjs'
1:32:49 PM: Caching artifacts
1:32:49 PM: Started saving node modules
1:32:49 PM: Finished saving node modules
1:32:49 PM: Started saving build plugins
1:32:49 PM: Finished saving build plugins
1:32:49 PM: Started saving pip cache
1:32:49 PM: Finished saving pip cache
1:32:49 PM: Started saving emacs cask dependencies
1:32:49 PM: Finished saving emacs cask dependencies
1:32:49 PM: Started saving maven dependencies
1:32:49 PM: Finished saving maven dependencies
1:32:49 PM: Started saving boot dependencies
1:32:49 PM: Finished saving boot dependencies
1:32:49 PM: Started saving rust rustup cache
1:32:49 PM: Finished saving rust rustup cache
1:32:49 PM: Started saving go dependencies
1:32:49 PM: Finished saving go dependencies
1:32:52 PM: Build failed due to a user error: Build script returned non-zero exit code: 2
1:32:52 PM: Creating deploy upload records
1:32:52 PM: Failing build: Failed to build site
1:32:52 PM: Failed during stage 'building site': Build script returned non-zero exit code: 2
1:32:52 PM: Finished processing build request in 1m1.521114146s

Here is the contents of the jsconfig

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@/*": ["/*"],
      "@/api/*": [
        "/pages/api/*"
      ]
    }
  }
}

And a picture of the file structure

Along with the imports for the index.jsx page:

import Button from "@/ui/Elements/button";
import Select from "@/ui/Forms/select";
import Card from "@/ui/Layout/card";
import { useState } from "react";
import Link from "next/link";
import Page from "@/features/page";

And the package-lock

{
  "name": "nextapp",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@headlessui/react": "^1.2.0",
    "@heroicons/react": "^1.0.1",
    "@tailwindcss/line-clamp": "^0.2.1",
    "next": "latest",
    "react": "^17.0.1",
    "react-dom": "^17.0.1"
  },
  "devDependencies": {
    "autoprefixer": "^10.2.6",
    "postcss": "^8.3.0",
    "tailwindcss": "^2.1.3"
  }
}

And these are the build settings

Base directory: Not set
Build command: npm run build
Publish directory: out
Builds: Active

Any guidance would be greatly appreciated.

Hi there, @knowispow :wave:

Thanks for writing such a detailed post! Would you mind sharing your site name and your repo, if public?

Hiya @hillary !

The site name is clever-hugle-d69f8f.netlify.app! The repo is unfortunately private but I would be happy to provide any additional necessary information!

Hi @knowispow

From looking, the error

relates too

Questions:
Is the case correct (e.g. page vs Page)? Is the path correct (e.g. @/features/page vs @/features/Some/page?

Hey @coelmay thanks for your reply!

The path appears to be correct, and it works locally. Really scratching my head on this one…

Here is a picture of the page structure & content of file:

Figured out the issue!

Github ignores case changes by default, so the GitHub repo was still using uppercase, while the local repo and files were using lowercase.

This can be fixed by utilizing git mv --force somename SomeName to update the case on GitHub.

2 Likes

Hey there, @knowispow :wave:

Thanks for coming back and sharing this solution with the Forums. This will definitely be beneficial for any future members who encounter something similar :slight_smile: