Theo's Typesafe Cult•2y ago

GitHub Action Failing Type-Checks but Working Locally

I'm setting up an automatic github action that will run type checks on my nextjs app when pushed / pr'd to main. Problem is the type checks fail in github actions but pass locally.

# .github/workflows/status-checks.yml
name: Status-Checks

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

jobs:
  Type-Check:
    name: Type Check
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 18
      - name: Install Dependencies
        run: npm ci
      - name: Type Check
        run: npm run type-check

# .github/workflows/status-checks.yml
name: Status-Checks

on:
  push:
    branches:
      - main
  pull_request:
    branches:
      - main

jobs:
  Type-Check:
    name: Type Check
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - uses: actions/setup-node@v3
        with:
          node-version: 18
      - name: Install Dependencies
        run: npm ci
      - name: Type Check
        run: npm run type-check

24 Replies

whatplan•2y ago

can you show package.json scripts

ryanagillieOP•2y ago

  "scripts": {
    "dev": "next dev",
    "lint": "next lint",
    "type-check": "tsc",
    "build": "next build",
    "start": "next start",
    "drizzle": "drizzle-kit push:mysql"
  },

  "scripts": {
    "dev": "next dev",
    "lint": "next lint",
    "type-check": "tsc",
    "build": "next build",
    "start": "next start",
    "drizzle": "drizzle-kit push:mysql"
  },

This is why I'm confused. Even did a fresh pull locally, npm ci, ran tsc, nothing but the github action really doesn't love it

whatplan•2y ago

very weird maybe you have some stuff installed globally I feel like thats the only thing it could be

ryanagillieOP•2y ago

whatplan•2y ago

weird

ryanagillieOP•2y ago

I saw somewhere else saying it was a types/react-dom problem but mine are latest I'll try one more thing but yeah this is weeeeeird

whatplan•2y ago

does it build when deploying fine

ryanagillieOP•2y ago

locally? yeah. I'll throw in a quick build step to see as well

whatplan•2y ago

no like in a fresh enviorment idk if your using vercel but when vercel clones + builds does it error

ryanagillieOP•2y ago

I don't use vercel use DO, which uses another push action but that builds fine (on the droplet)

whatplan•2y ago

so weird what happens if you run typecheck before build on the do action

ryanagillieOP•2y ago

Oh, I mean I have a webook that runs on push and on my server it'll auto pull the repo, rebuild, and restart but the logs on my DO droplet show it's building fine so it's def an issue with github

whatplan•2y ago

well im stumped good luck ping me if you figure it out

bruno!•2y ago

are you using relative package versions on package.json? maybe for some reason the one on CI doesn't include some new types for some new version you can check which version you're using on your pnpm.lock / yarn.lock and include it as minimal, like "@types/react-dom": "^18.2.4" also checking @types/react should be worth it

ryanagillieOP•2y ago

Here I'll post the whole thing

{
  "name": "t3d",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "lint": "next lint",
    "type-check": "tsc",
    "build": "next build",
    "start": "next start",
    "drizzle": "drizzle-kit push:mysql"
  },
  "dependencies": {
    "@planetscale/database": "1.7.0",
    "@t3-oss/env-nextjs": "0.4.0",
    "@tanstack/react-query": "4.29.12",
    "@trpc/client": "10.29.0",
    "@trpc/react-query": "10.29.0",
    "@trpc/server": "10.29.0",
    "drizzle-orm": "0.26.5",
    "next": "13.4.4",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "superjson": "1.12.3",
    "tailwind-merge": "1.13.0",
    "zod": "3.21.4"
  },
  "devDependencies": {
    "@tailwindcss/container-queries": "0.1.1",
    "@tailwindcss/forms": "0.5.3",
    "@total-typescript/ts-reset": "0.4.2",
    "@types/node": "20.2.5",
    "@types/react": "18.2.8",
    "@types/react-dom": "18.2.4",
    "@typescript-eslint/eslint-plugin": "5.59.8",
    "autoprefixer": "10.4.14",
    "dotenv": "16.1.3",
    "drizzle-kit": "0.18.0-27440c3",
    "eslint": "8.42.0",
    "eslint-config-next": "13.4.4",
    "eslint-config-prettier": "8.8.0",
    "eslint-plugin-prettier": "4.2.1",
    "eslint-plugin-tailwindcss": "3.12.1",
    "postcss": "8.4.24",
    "prettier": "2.8.8",
    "prettier-plugin-tailwindcss": "0.3.0",
    "tailwindcss": "3.3.2",
    "typescript": "5.1.3"
  }
}

{
  "name": "t3d",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "lint": "next lint",
    "type-check": "tsc",
    "build": "next build",
    "start": "next start",
    "drizzle": "drizzle-kit push:mysql"
  },
  "dependencies": {
    "@planetscale/database": "1.7.0",
    "@t3-oss/env-nextjs": "0.4.0",
    "@tanstack/react-query": "4.29.12",
    "@trpc/client": "10.29.0",
    "@trpc/react-query": "10.29.0",
    "@trpc/server": "10.29.0",
    "drizzle-orm": "0.26.5",
    "next": "13.4.4",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "superjson": "1.12.3",
    "tailwind-merge": "1.13.0",
    "zod": "3.21.4"
  },
  "devDependencies": {
    "@tailwindcss/container-queries": "0.1.1",
    "@tailwindcss/forms": "0.5.3",
    "@total-typescript/ts-reset": "0.4.2",
    "@types/node": "20.2.5",
    "@types/react": "18.2.8",
    "@types/react-dom": "18.2.4",
    "@typescript-eslint/eslint-plugin": "5.59.8",
    "autoprefixer": "10.4.14",
    "dotenv": "16.1.3",
    "drizzle-kit": "0.18.0-27440c3",
    "eslint": "8.42.0",
    "eslint-config-next": "13.4.4",
    "eslint-config-prettier": "8.8.0",
    "eslint-plugin-prettier": "4.2.1",
    "eslint-plugin-tailwindcss": "3.12.1",
    "postcss": "8.4.24",
    "prettier": "2.8.8",
    "prettier-plugin-tailwindcss": "0.3.0",
    "tailwindcss": "3.3.2",
    "typescript": "5.1.3"
  }
}

I never use realives, always pin the deps and yeah always comitting my package-lock (or else npm ci would fail) types/react and types/react-dom are latest

bruno!•2y ago

yeah this is very weird, almost as package-lock for some reason was out of sync, but it probably isn't, I'm gonna try setting up a similar action to see if I run into this

ryanagillieOP•2y ago

yeah, inspecting my package.lock everything is right I have no idea, this is so weird def a github issue I've pulled fresh on my windows desktop, mac laptop, and DO (ubuntu) droplet, installed, and ran the command and all 3 say no errors it's literally only github WAIT I JUST FRESH INSTALLED ON WINDOWS AND IT FAILED NO IDEA WHY breakthrough time ah, so it's a problem with react-dom 18.2.8

ryanagillieOP•2y ago

https://github.com/vercel/next.js/issues/42292#issuecomment-1572905108

GitHub

'SomeComponent' cannot be used as a JSX component. · Issue #42292 ·...

Verify canary release I verified that the issue exists in the latest Next.js canary release Provide environment information Operating System: Platform: win32 Arch: x64 Version: Windows 10 Pro Binar...

ryanagillieOP•2y ago

glad we figured that out, thanks all no idea why it's half working half not but until that gets fixed

whatplan•2y ago

stable

bruno!•2y ago

production ready

ryanagillieOP•2y ago

hey, it's a @types/react problem, not next LMAO

whatplan•2y ago

oh i didnt read the issue far enough then my b saw vercel/nextjs and assumed

bruno!•2y ago

when talking about server components there's almost no difference now server components features are better documented on nextjs docs then react.dev lol

Gaming

Programming

GitHub Action Failing Type-Checks but Working Locally