Typescript Build Error with Next.js

Hello!

I’m attempting to deploy a Typescript Next.js app (source code here: https://github.com/jonoc330/kickstart) to Netlify under site https://jc-kickstart.netlify.app/

Build is failing on the Netlify side but not locally even when I run netlify build to test the whole flow.

I’ve tried everything. Would love it if someone could take a look and see what I’m doing wrong.

I attempted a local module import (aka import Header from './header) but that didn’t work either. It just can’t seem to resolve other tsx modules.

Build logs:

9:31:34 PM: Build ready to start
9:31:36 PM: build-image version: 73def8bb10593b9b818f44989a75ea508018ccb7 (focal)
9:31:36 PM: build-image tag: v4.5.2
9:31:36 PM: buildbot version: e07f38cea73012d29c839c78dec87335277fe704
9:31:37 PM: Fetching cached dependencies
9:31:37 PM: Failed to fetch cache, continuing with build
9:31:37 PM: Starting to prepare the repo for build
9:31:37 PM: No cached dependencies found. Cloning fresh repo
9:31:37 PM: git clone https://github.com/jonoc330/kickstart
9:31:38 PM: Preparing Git Reference refs/heads/main
9:31:39 PM: Parsing package.json dependencies
9:31:40 PM: Starting build script
9:31:40 PM: Installing dependencies
9:31:40 PM: Python version set to 2.7
9:31:41 PM: v16.13.1 is already installed.
9:31:42 PM: Now using node v16.13.1 (npm v8.1.2)
9:31:42 PM: Started restoring cached build plugins
9:31:42 PM: Finished restoring cached build plugins
9:31:42 PM: Attempting ruby version 2.7.2, read from environment
9:31:45 PM: Using ruby version 2.7.2
9:31:45 PM: Using PHP version 8.0
9:31:45 PM: Started restoring cached yarn cache
9:31:45 PM: Finished restoring cached yarn cache
9:31:47 PM: No yarn workspaces detected
9:31:47 PM: Started restoring cached node modules
9:31:47 PM: Finished restoring cached node modules
9:31:47 PM: Installing NPM modules using Yarn version 1.22.10
9:31:48 PM: yarn install v1.22.10
9:31:48 PM: [1/4] Resolving packages...
9:31:48 PM: [2/4] Fetching packages...
9:32:13 PM: info fsevents@2.3.2: The platform "linux" is incompatible with this module.
9:32:13 PM: info "fsevents@2.3.2" is an optional dependency and failed compatibility check. Excluding it from installation.
9:32:13 PM: info @next/swc-darwin-arm64@11.1.2: The platform "linux" is incompatible with this module.
9:32:13 PM: info "@next/swc-darwin-arm64@11.1.2" is an optional dependency and failed compatibility check. Excluding it from installation.
9:32:13 PM: info @next/swc-darwin-arm64@11.1.2: The CPU architecture "x64" is incompatible with this module.
9:32:13 PM: info @next/swc-darwin-x64@11.1.2: The platform "linux" is incompatible with this module.
9:32:13 PM: info "@next/swc-darwin-x64@11.1.2" is an optional dependency and failed compatibility check. Excluding it from installation.
9:32:13 PM: info @next/swc-win32-x64-msvc@11.1.2: The platform "linux" is incompatible with this module.
9:32:13 PM: info "@next/swc-win32-x64-msvc@11.1.2" is an optional dependency and failed compatibility check. Excluding it from installation.
9:32:13 PM: [3/4] Linking dependencies...
9:32:13 PM: warning "next > styled-jsx > @babel/plugin-syntax-jsx@7.14.5" has unmet peer dependency "@babel/core@^7.0.0-0".
9:32:20 PM: [4/4] Building fresh packages...
9:32:25 PM: Done in 37.42s.
9:32:25 PM: NPM modules installed using Yarn
9:32:26 PM: Started restoring cached go cache
9:32:26 PM: Finished restoring cached go cache
9:32:26 PM: go version go1.16.5 linux/amd64
9:32:26 PM: go version go1.16.5 linux/amd64
9:32:26 PM: Installing missing commands
9:32:26 PM: Verify run directory
9:32:28 PM: ​
9:32:28 PM: ────────────────────────────────────────────────────────────────
9:32:28 PM:   Netlify Build                                                 
9:32:28 PM: ────────────────────────────────────────────────────────────────
9:32:28 PM: ​
9:32:28 PM: ❯ Version
9:32:28 PM:   @netlify/build 26.0.2
9:32:28 PM: ​
9:32:28 PM: ❯ Flags
9:32:28 PM:   baseRelDir: true
9:32:28 PM:   buildId: 61d2d0860b79201ba8850b7c
9:32:28 PM:   deployId: 61d2d0860b79201ba8850b7e
9:32:28 PM: ​
9:32:28 PM: ❯ Current directory
9:32:28 PM:   /opt/build/repo
9:32:28 PM: ​
9:32:28 PM: ❯ Config file
9:32:28 PM:   /opt/build/repo/netlify.toml
9:32:28 PM: ​
9:32:28 PM: ❯ Context
9:32:28 PM:   production
9:32:28 PM: ​
9:32:28 PM: ❯ Loading plugins
9:32:28 PM:    - @netlify/plugin-nextjs@4.1.1 from netlify.toml and package.json
9:32:31 PM: ​
9:32:31 PM: ────────────────────────────────────────────────────────────────
9:32:31 PM:   1. @netlify/plugin-nextjs (onPreBuild event)                  
9:32:31 PM: ────────────────────────────────────────────────────────────────
9:32:31 PM: ​
9:32:31 PM: No Next.js cache to restore.
9:32:31 PM: Netlify configuration property "build.environment.NEXT_PRIVATE_TARGET" value changed.
9:32:31 PM: ​
9:32:31 PM: (@netlify/plugin-nextjs onPreBuild completed in 57ms)
9:32:31 PM: ​
9:32:31 PM: ────────────────────────────────────────────────────────────────
9:32:31 PM:   2. build.command from netlify.toml                            
9:32:31 PM: ────────────────────────────────────────────────────────────────
9:32:31 PM: ​
9:32:31 PM: $ npm run build
9:32:31 PM: > next-netlify-typescript@0.1.0 build
9:32:31 PM: > next build
9:32:32 PM: info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
9:32:33 PM: warn  - No build cache found. Please configure build caching for faster rebuilds. Read more: https://nextjs.org/docs/messages/no-cache
9:32:33 PM: info  - Checking validity of types...
9:32:38 PM: Failed to compile.
9:32:38 PM: 
9:32:38 PM: ./components/layout.tsx:1:20
9:32:38 PM: Type error: Cannot find module '@components/footer' or its corresponding type declarations.
9:32:38 PM: > 1 | import Footer from "@components/footer"
9:32:38 PM:     |                    ^
9:32:38 PM:   2 | import Header from "@components/header"
9:32:38 PM:   3 | 
9:32:38 PM:   4 | interface LayoutProps {
9:32:38 PM: ​
9:32:38 PM: ────────────────────────────────────────────────────────────────
9:32:38 PM:   "build.command" failed                                        
9:32:38 PM: ────────────────────────────────────────────────────────────────
9:32:38 PM: ​
9:32:38 PM:   Error message
9:32:38 PM:   Command failed with exit code 1: npm run build
9:32:38 PM: ​
9:32:38 PM:   Error location
9:32:38 PM:   In build.command from netlify.toml:
9:32:38 PM:   npm run build
9:32:38 PM: ​
9:32:38 PM:   Resolved config
9:32:38 PM:   build:
9:32:38 PM:     command: npm run build
9:32:38 PM:     commandOrigin: config
9:32:38 PM:     environment:
9:32:38 PM:       - YARN_FLAGS
9:32:38 PM:       - NEXT_PRIVATE_TARGET
9:32:38 PM:     publish: /opt/build/repo/.next
9:32:38 PM:     publishOrigin: config
9:32:38 PM:   plugins:
9:32:38 PM:     - inputs: {}
9:32:38 PM:       origin: config
9:32:38 PM:       package: '@netlify/plugin-nextjs'
9:32:39 PM: Caching artifacts
9:32:39 PM: Started saving node modules
9:32:39 PM: Finished saving node modules
9:32:39 PM: Started saving build plugins
9:32:39 PM: Finished saving build plugins
9:32:39 PM: Started saving yarn cache
9:32:43 PM: Finished saving yarn cache
9:32:43 PM: Started saving pip cache
9:32:43 PM: Finished saving pip cache
9:32:43 PM: Started saving emacs cask dependencies
9:32:43 PM: Finished saving emacs cask dependencies
9:32:43 PM: Started saving maven dependencies
9:32:43 PM: Finished saving maven dependencies
9:32:43 PM: Started saving boot dependencies
9:32:43 PM: Finished saving boot dependencies
9:32:43 PM: Started saving rust rustup cache
9:32:43 PM: Finished saving rust rustup cache
9:32:43 PM: Started saving go dependencies
9:32:43 PM: Finished saving go dependencies
9:32:46 PM: Build failed due to a user error: Build script returned non-zero exit code: 2
9:32:46 PM: Creating deploy upload records
9:32:46 PM: Failing build: Failed to build site
9:32:46 PM: Failed during stage 'building site': Build script returned non-zero exit code: 2
9:32:46 PM: Finished processing build request in 1m9.329149379s
Docs
Pricing
Support
News
Terms
© 2022 Netlify

Hi @jonoc330

Looking at the repository, the footer and header component filenames have an uppercase first letter i.e.

import Footer from "@components/Footer"
import Header from "@components/Header"

Also in components/Footer.tsx is the line

import styles from "./footer.module.css"

but the file is Footer.module.css so the import should read

import styles from "./Footer.module.css"

For reference, build is case-sensitive: [Support Guide] Netlify app builds locally but fails on deploy (case sensitivity)

3 Likes

Great pickup! For some reason my files locally are lowercase and my files in my git are uppercase… Thank you for spotting that!! I’ll go fix that and see how I go.

1 Like