royaletactics.netlify.app
Using “Absolute Imports and Module Path Aliases” documentation from NextJS’s website on the latest version of NextJS doesn’t work with Netlify.
The error that Netlify returns the following error
Failed during stage 'building site': Build script returned non-zero exit code: 2
Failed to compile.
./src/app/page.tsx
Module not found: Can't resolve '@/components/button'
https://nextjs.org/docs/messages/module-not-found
I did this on 3 different machines, on different branches, on a private repository connected to Netlify, same error.
npx create-next-app@latest
These are the settings I choose
What is your project named? my-app
Would you like to use TypeScript? Yes
Would you like to use ESLint? No
Would you like to use Tailwind CSS? No
Would you like to use `src/` directory? Yes
Would you like to use App Router? (recommended) Yes
Would you like to customize the default import alias (@/*)? Yes
What import alias would you like configured? @/*
Notice that the default import alias has been selected as “@/*”
- Optional: Followed the instructions on “Absolute Imports and Module Path Aliases” documentation from NextJS’s website
- Create a file
./src/components/button.tsx
just as it indicates in the guide
export default function Button() {
return <button>Click me</button>
}
- Modify the file
./src/app/page.tsx
just as it indicates in the guide
import Button from '@/components/button'
export default function HomePage() {
return (
<>
<h1>Hello World</h1>
<Button />
</>
)
}
- Push and deploy the code to Netlify, then the error occurs.
Alternatively you can modify the tsconfig.json
to include a more narrow path and it would still error.
"baseUrl": "src/",
"paths": {
"@/components/*": ["components/*"]
}
I’ve also tried the most common reply which is to check case sensitivity.
It doesn’t take long to re-create these steps, under 5 mins, I followed the guide precisely. I only added 1 file, I only reference 1 file, and the casing is identical. Netlify still errors.