Can't resolve panda css when github actions nextjs build CI

[nayounsang]

Description

When I run CI with github actions when PR,
I expected build my project, but can't resolve '@/styled-system/css'.
This is sometimes successful. If I continue to retry countless times, I succeed.
This is my build script.

    "prepare": "panda codegen",
    "dev": "yarn prepare & next dev",
    "build": "yarn prepare & next build",

This is panda css config.

module.exports = {
  plugins: {
    '@pandacss/dev/postcss': {},
  },
}

It operates without problems in deployment and development environments..
This is my yml for github actions.

  build-front-end:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout code
        uses: actions/checkout@v2

      - name: Set up Node.js
        uses: actions/setup-node@v2
        with:
          node-version: "20"
          cache: "yarn"

      - name: Enable Corepack
        run: corepack enable

      - name: Set Yarn version
        run: corepack prepare [email protected] --activate

      - name: Install dependencies
        run: yarn install

      - name: Build front-end
        run: yarn front-end run build
        # we use yarn work-spaces mono-reop.

This is error msgs.

  ▲ Next.js 14.2.4
  - Experiments (use with caution):
    · externalDir
   Creating an optimized production build ...
✔️ `styled-system/css`: the css function to author styles
✔️ `styled-system/tokens`: the css variables and js function to query your tokens
✔️ `styled-system/patterns`: functions to implement and apply common layout patterns
✔️ `styled-system/jsx`: styled jsx elements for react
Failed to compile.
./app/(home)/_components/Sidebar/SidebarBaseElement.tsx
Module not found: Can't resolve '@/styled-system/css'
https://nextjs.org/docs/messages/module-not-found
Import trace for requested module:
./app/(home)/_components/Sidebar/SidebarLink.tsx
./app/(home)/_components/Sidebar/index.tsx
./app/(home)/_components/Sidebar/SidebarDirectory.tsx
Module not found: Can't resolve '@/styled-system/css'
# same issues...

Link to Reproduction

https://this.is.difficult/to/reproducte

Steps to reproduce

1. run script "build": "yarn prepare & next build"
2. in github actions workflow.
3. See error
4. Successful some times

JS Framework

React, Nextjs, Github-actions

Panda CSS Version

0.42.0

Browser

No response

Operating System

• macOS
• Windows
• Linux

Additional Information

If I need to inquire about nextjs or github workflow, please leave a comment.

[segunadebayo]

This smells like something needs to be fixed in your tsconfig setup.

Could you check these areas:

• Make sure the styled-system is added to the include option in tsconfig.json
• Make sure you have the @/* alias in the tsconfig.json

[nayounsang]

Thx you. But since this is a bug that happens occasionally, I can't test your solution immediately.
I'm still a junior developer student so I have a question. If this is typescript complier bug, Why this is happens occasionally?