Next.js Discord

Discord Forum

Alias not resolving when building on GitHub

Answered
Samoyed posted this in #help-forum
Open in Discord
SamoyedOP
Using TypeScript on Next.js 15.1.5
I'm packing up my web app into a docker container using GitHub Actions.
When I build and run the docker container locally, from my working directory, it works perfectly
When the Action runs on GitHub, I get the following error:
#9 4.072 Failed to compile.
#9 4.072 
#9 4.073 ./src/app/layout.tsx
#9 4.073 Module not found: Can't resolve '@/styles/master.css'

The file exists within the build context, as I can see it when running ls -R, but the builder can't seem to resolve @/styles/master.css from my layout.tsx, but it does it completely fine on my local machine
Any help would be appreciated.
https://github.com/ChaosCantrip/Portfolio <<< The repo in question.
I understand it's an issue happening on GitHub so this may not be the entirely correct place, but I believe the error may be happening due to a misconfiguration in the next.js end of things, as the file itself is present in the build context.
Answered by Samoyed
I found the issue it was dumb 💀
typescript and the @types were installed as devDependencies. The Dockerfile ran npm install --production so it was trying to build the app without having installed typescript and it just never clocked for me because create-next-app put them as dev automatically and I used the same Dockerfile that I use for my normal js builds
View full answer

34 Replies

SamoyedOP
Dockerfile

FROM node:18-alpine
LABEL author="ChaosCantrip"

WORKDIR /app

COPY package*.json ./
RUN npm install --production

COPY . .

RUN npm run build

EXPOSE 3000

CMD ["npm", "start"]
"tsconfig.json"

{
  "compilerOptions": {
    "target": "ES2017",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "strict": true,
    "noEmit": true,
    "esModuleInterop": true,
    "module": "esnext",
    "moduleResolution": "bundler",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
    "plugins": [
      {
        "name": "next"
      }
    ],
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
  "exclude": ["node_modules"]
}
SamoyedOP
If I clone the repo to a new folder, it won't build locally either, so it must be a next.js configuration that isn't being copied across
this is just debugging, sometimes it works and i don't know why it works, sometimes it doesn't work
SamoyedOP
Just tried it, still comes up with the same error. I tried setting baseUrl: "./src" earlier too and manually defining all of the folders in src in the paths segment but still no joy. Am considering just switching off of TypeScript for this build as I don't have this issue on the js web app I have on the same version of next.
It's super weird because build works completely fine in the working directory, and the GitHub has all of the same files.

Ty anyway!!
joulev
wow, super weird because when i clone your repo it works perfectly
absolute import you can try later, who knows it could somehow suddenly work after a few days
SamoyedOP
Oml that is super weird???
I literally just created a new folder
git clone <repo url>
npm i
npm run build
And it gives me an error?
Man what's wrong with my PC 😭 XD
Ty for trying, I'll give it another crack tomorrow and if it's still playing up yeah I'll use relative imports
Wait, when I run npm i and npm run build is isn't generating that next-env.d.ts file?
I'm super new to typescript, this and one other project are literally the first time I've used it so I'm not entirely aware of what that file does
joulev
next-env.d.ts shouldn't matter, just ignore it
all files ignored by .gitignore can just be ignored
SamoyedOP
Man this is super weird 😭
joulev
ikr? never seen this before
SamoyedOP
If it was an issue with just the docker instances I'd put it down to nefarious docker magic but it's literally doing it on my local machine as well, in a completely separate folder.
Maybe my next install on npm is corrupted or something and it's using a cached version from my machine when I'm making it in the new folder?
joulev
not a single clue man, but try changing the docker image and it'll probably help
oh, in your local PC does any file name show up with a capital letter?
SamoyedOP
Dockerfile and README, nothing that should be relevant to next
joulev
yeah none of them shouldnt affect anything
SamoyedOP
Okay I'm actually going insane I just cloned the repo and it worked???
joulev
i was thinking about https://nextjs-faq.com/module-not-found-due-to-case-sensitivity but now that we've gotten that out of the way, i've fully exhausted my resources, not a single clue how this even happened
SamoyedOP
Even the Docker container worked I didn't change anything???????
if it works no one knows why
if it doesn't work... no one knows why either
SamoyedOP
If I re-run the github action now and it works I'm done with software forever 😭
Ok the github action did not work but that feels like a misconfiguration somewhere outside of next I shall investigate that elsewhere
Ty for all ur help even with it ending up as the npm run build gods do not smile kindly on me
joulev
yeah i can only say good luck to you now, your code is good
SamoyedOP
I found the issue it was dumb 💀
typescript and the @types were installed as devDependencies. The Dockerfile ran npm install --production so it was trying to build the app without having installed typescript and it just never clocked for me because create-next-app put them as dev automatically and I used the same Dockerfile that I use for my normal js builds
Answer
joulev
oh nice!
in nextjs you shouldn't npm install --production, or even differentiate between deps and devDeps, because nextjs needs the devDeps when building for prod too and it will automatically prune out unused code so devDeps won't end up in prod bundle