Next.js build failed: Module not found: Can't resolve "'@/public/..."

Support
,
1

I’m trying to deploy a next app to next-shopify-test.netlify.app. But I’m having problems in the build phase. This is the log:

10:47:35 PM: build-image version: 58a882d74f2ae1fef02918fb9d29d9ce3d72c0a4 (focal)
10:47:35 PM: buildbot version: 58a882d74f2ae1fef02918fb9d29d9ce3d72c0a4
10:47:35 PM: Fetching cached dependencies
10:47:35 PM: Failed to fetch cache, continuing with build
10:47:35 PM: Starting to prepare the repo for build
10:47:35 PM: No cached dependencies found. Cloning fresh repo
10:47:35 PM: git clone --filter=blob:none https://github.com/marnauortega/next-shopify-test
10:47:35 PM: Preparing Git Reference refs/heads/main
10:47:38 PM: Starting to install dependencies
10:47:38 PM: Python version set to 3.8
10:47:38 PM: Attempting Ruby version 2.7.2, read from environment
10:47:38 PM: Using Ruby version 2.7.2
10:47:39 PM: Started restoring cached go cache
10:47:39 PM: Finished restoring cached go cache
10:47:39 PM: go version go1.19.9 linux/amd64
10:47:39 PM: Using PHP version 8.0
10:47:40 PM: v18.16.0 is already installed.
10:47:41 PM: Now using node v18.16.0 (npm v9.5.1)
10:47:41 PM: Enabling Node.js Corepack
10:47:41 PM: Started restoring cached build plugins
10:47:41 PM: Finished restoring cached build plugins
10:47:41 PM: Started restoring cached corepack dependencies
10:47:41 PM: Finished restoring cached corepack dependencies
10:47:41 PM: No npm workspaces detected
10:47:41 PM: Started restoring cached node modules
10:47:41 PM: Finished restoring cached node modules
10:47:41 PM: Installing npm packages using npm version 9.5.1
10:47:49 PM: added 100 packages, and audited 101 packages in 8s
10:47:49 PM: 15 packages are looking for funding
10:47:49 PM:   run `npm fund` for details
10:47:49 PM: found 0 vulnerabilities
10:47:49 PM: npm packages installed
10:47:50 PM: Install dependencies script success
10:47:50 PM: Starting build script
10:47:50 PM: Detected 1 framework(s)
10:47:51 PM: "next" at version "13.4.3"
10:47:51 PM: Section completed: initializing
10:47:52 PM: ​
10:47:52 PM: Netlify Build                                                 
10:47:52 PM: ────────────────────────────────────────────────────────────────
10:47:52 PM: ​
10:47:52 PM: ❯ Version
10:47:52 PM:   @netlify/build 29.11.6
10:47:52 PM: ​
10:47:52 PM: ❯ Flags
10:47:52 PM:   baseRelDir: true
10:47:52 PM:   buildId: 6477b2658b467c0e28ffd957
10:47:52 PM:   deployId: 6477b2658b467c0e28ffd959
10:47:52 PM: ​
10:47:52 PM: ❯ Current directory
10:47:52 PM:   /opt/build/repo
10:47:52 PM: ​
10:47:52 PM: ❯ Config file
10:47:52 PM:   No config file was defined: using default values.
10:47:52 PM: ​
10:47:52 PM: ❯ Context
10:47:52 PM:   production
10:47:52 PM: ​
10:47:52 PM: ❯ Installing plugins
10:47:52 PM:    - @netlify/plugin-nextjs@4.37.2
10:48:02 PM: ​
10:48:02 PM: ❯ Using Next.js Runtime - v4.37.2
10:48:03 PM: ​
10:48:03 PM: @netlify/plugin-nextjs (onPreBuild event)                     
10:48:03 PM: ────────────────────────────────────────────────────────────────
10:48:03 PM: ​
10:48:03 PM: No Next.js cache to restore.
10:48:03 PM: Netlify configuration property "build.environment.NEXT_PRIVATE_TARGET" value changed.
10:48:03 PM: ​
10:48:03 PM: (@netlify/plugin-nextjs onPreBuild completed in 14ms)
10:48:03 PM: ​
10:48:03 PM: Build command from Netlify app                                
10:48:03 PM: ────────────────────────────────────────────────────────────────
10:48:03 PM: ​
10:48:03 PM: $ npm run build
10:48:03 PM: > next-shopify-test@0.1.0 build
10:48:03 PM: > next build
10:48:03 PM: - warn No build cache found. Please configure build caching for faster rebuilds. Read more: https://nextjs.org/docs/messages/no-cache
10:48:03 PM: - info Creating an optimized production build...
10:48:12 PM: Failed to compile.
10:48:12 PM: 
10:48:12 PM: ./components/Header/Header.js
10:48:12 PM: Module not found: Can't resolve '@/public/logo.svg'
10:48:12 PM: https://nextjs.org/docs/messages/module-not-found
10:48:12 PM: Import trace for requested module:
10:48:12 PM: ./app/(Website)/layout.js
10:48:12 PM: > Build failed because of webpack errors
10:48:12 PM: ​
10:48:12 PM: "build.command" failed                                        
10:48:12 PM: ────────────────────────────────────────────────────────────────
10:48:12 PM: ​
10:48:12 PM:   Error message
10:48:12 PM:   Command failed with exit code 1: npm run build (https://ntl.fyi/exit-code-1)
10:48:12 PM: ​
10:48:12 PM:   Error location
10:48:12 PM:   In Build command from Netlify app:
10:48:12 PM:   npm run build
10:48:12 PM: ​
10:48:12 PM:   Resolved config
10:48:12 PM:   build:
10:48:12 PM:     command: npm run build
10:48:12 PM:     commandOrigin: ui
10:48:12 PM:     environment:
10:48:12 PM:       - NEXT_PRIVATE_TARGET
10:48:12 PM:     publish: /opt/build/repo/.next
10:48:12 PM:     publishOrigin: ui
10:48:12 PM:   plugins:
10:48:12 PM:     - inputs: {}
10:48:12 PM:       origin: ui
10:48:12 PM:       package: '@netlify/plugin-nextjs'
10:48:12 PM: Caching artifacts
10:48:12 PM: Started saving node modules
10:48:12 PM: Finished saving node modules
10:48:12 PM: Started saving build plugins
10:48:13 PM: Failed during stage 'building site': Build script returned non-zero exit code: 2 (https://ntl.fyi/exit-code-2)
10:48:12 PM: Finished saving build plugins
10:48:12 PM: Started saving corepack cache
10:48:12 PM: Finished saving corepack cache
10:48:12 PM: Started saving pip cache
10:48:12 PM: Finished saving pip cache
10:48:12 PM: Started saving emacs cask dependencies
10:48:12 PM: Finished saving emacs cask dependencies
10:48:12 PM: Started saving maven dependencies
10:48:12 PM: Finished saving maven dependencies
10:48:12 PM: Started saving boot dependencies
10:48:12 PM: Finished saving boot dependencies
10:48:12 PM: Started saving rust rustup cache
10:48:12 PM: Finished saving rust rustup cache
10:48:12 PM: Started saving go dependencies
10:48:12 PM: Finished saving go dependencies
10:48:13 PM: Build failed due to a user error: Build script returned non-zero exit code: 2
10:48:13 PM: Failing build: Failed to build site
10:48:14 PM: Finished processing build request in 39.028s

The problem is not, as I saw in other posts, a matter of case sensitivity, this is my folder structure:

Captura de Pantalla 2023-05-31 a les 23.26.24
Captura de Pantalla 2023-05-31 a les 23.26.24274×514 20.1 KB

And this is the begining of the relevant Header.js:

import { getMenu } from "@/lib/shopify/queries/menu";

import Link from "next/link";
import Image from "next/image";
import logo from "@/public/logo.svg";

import styles from "./Header.module.css";
import Cart from "../Cart/Cart";

const Header = async () => {
  const menu = await getMenu("main-menu");
  return (
    <header className={`h4 ${styles.header}`}>
      <div className={`mainPadding maxWidth ${styles.contentWrapper}`}>
        <div className={styles.logo}>
          <Link href="/">
            <Image src={logo} width={36} height={35} alt="Karaba logo" />

I don’t know if jsconfig.json is relevant, but this is its content:

{
  "compilerOptions": {
    "paths": {
      "@/*": ["./*"]
    }
  }
}

I hope someone can point me in the right direction. Thanks!

2

I don’t believe files from the public folder are supposed to be imported, are they? Optimizing: Static Assets | Next.js

3

You are right. I believe this must be the problem. This images can instead simply be used like this:

<Image src="/logo.svg" width={36} height={35} alt="Karaba logo" />

And this directly points to the public folder.