typescriptgithub-actionsvite

error TS2307 for the workspace package dependency

The @d-matrix/icons-react package is an dependency for @d-matrix/icons-site package. Try to use GitHub Actions to deploy a static HTML built from @d-matrix/icons-site package as GitHub Pages.

npm workspace:

$ tree -L 2 -I node_modules
.
|-- LICENSE
|-- README.md
|-- package-lock.json
|-- package.json
`-- packages
    |-- icons-react
    `-- icons-site

3 directories, 4 files

packages/icons-site/package.json:

{
  "name": "@d-matrix/icons-site",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc -b && vite build",
    "lint": "eslint .",
    "preview": "vite preview"
  },
  "dependencies": {
    "@d-matrix/icons-react": "^0.0.6",
    "react": "^18.3.1",
    "react-dom": "^18.3.1"
  },
  "devDependencies": {
    "@eslint/js": "^9.15.0",
    "@types/react": "^18.3.12",
    "@types/react-dom": "^18.3.1",
    "@vitejs/plugin-react": "^4.3.4",
    "eslint": "^9.15.0",
    "eslint-plugin-react-hooks": "^5.0.0",
    "eslint-plugin-react-refresh": "^0.4.14",
    "globals": "^15.12.0",
    "typescript": "~5.6.2",
    "typescript-eslint": "^8.15.0",
    "vite": "^6.0.1"
  }
}

.github/workflows/static.yml:

name: Deploy static content to Pages

on:
  push:
    branches: ['main']

  workflow_dispatch:

permissions:
  contents: read
  pages: write
  id-token: write

concurrency:
  group: 'pages'
  cancel-in-progress: true

jobs:
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Set up Node
        uses: actions/setup-node@v4
        with:
          node-version: 18
          cache: 'npm'
      - name: Install dependencies
        run: npm ci
      - name: Build
        run: npm run build:site --verbose
      - name: Setup Pages
        uses: actions/configure-pages@v4
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          # Upload dist folder
          path: './packages/icons-site/dist'
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

package.json:

{
  "name": "dm-icons",
  "workspaces": [
    "packages/icons-react",
    "packages/icons-site"
  ],
  "engines": {
    "node": ">=18.0.0"
  },
  "scripts": {
    "generate": "npm run generate --workspace=@d-matrix/icons-react",
    "predev": "npm run generate && npm run ref",
    "dev": "npm run dev --workspace=@d-matrix/icons-site",
    "ref": "npm i @d-matrix/icons-react -w @d-matrix/icons-site",
    "build:site": "npm run build --workspace=@d-matrix/icons-site"
  }
}

Run npm run build:site --verbose
  npm run build:site --verbose
  shell: /usr/bin/bash -e {0}
npm verbose cli /opt/hostedtoolcache/node/18.20.5/x64/bin/node /opt/hostedtoolcache/node/18.20.5/x64/bin/npm
npm info using npm@10.8.2
npm info using node@v18.20.5
npm verbose title npm run build:site
npm verbose argv "run" "build:site" "--loglevel" "verbose"
npm verbose logfile logs-max:10 dir:/home/runner/.npm/_logs/2024-12-20T08_32_38_796Z-
npm verbose logfile /home/runner/.npm/_logs/2024-12-20T08_32_38_796Z-debug-0.log
> build:site
> npm run build --workspace=@d-matrix/icons-site
npm verbose cli /opt/hostedtoolcache/node/18.20.5/x64/bin/node /opt/hostedtoolcache/node/18.20.5/x64/bin/npm
npm info using npm@10.8.2
npm info using node@v18.20.5
npm verbose title npm run build
npm verbose argv "run" "build" "--workspace" "@d-matrix/icons-site"
npm verbose logfile logs-max:10 dir:/home/runner/.npm/_logs/2024-12-20T08_32_38_920Z-
npm verbose logfile /home/runner/.npm/_logs/2024-12-20T08_32_38_920Z-debug-0.log
> @d-matrix/icons-site@0.0.0 build
> tsc -b && vite build
Error: src/App.tsx(1,24): error TS2307: Cannot find module '@d-matrix/icons-react' or its corresponding type declarations.
npm verbose stack Error: command failed
npm verbose stack     at promiseSpawn (/opt/hostedtoolcache/node/18.20.5/x64/lib/node_modules/npm/node_modules/@npmcli/promise-spawn/lib/index.js:22:22)
npm verbose stack     at spawnWithShell (/opt/hostedtoolcache/node/18.20.5/x64/lib/node_modules/npm/node_modules/@npmcli/promise-spawn/lib/index.js:124:10)
npm verbose stack     at promiseSpawn (/opt/hostedtoolcache/node/18.20.5/x64/lib/node_modules/npm/node_modules/@npmcli/promise-spawn/lib/index.js:12:12)
npm verbose stack     at runScriptPkg (/opt/hostedtoolcache/node/18.20.5/x64/lib/node_modules/npm/node_modules/@npmcli/run-script/lib/run-script-pkg.js:77:13)
npm verbose stack     at runScript (/opt/hostedtoolcache/node/18.20.5/x64/lib/node_modules/npm/node_modules/@npmcli/run-script/lib/run-script.js:9:12)
npm verbose stack     at #run (/opt/hostedtoolcache/node/18.20.5/x64/lib/node_modules/npm/lib/commands/run-script.js:130:13)
npm verbose stack     at RunScript.execWorkspaces (/opt/hostedtoolcache/node/18.20.5/x64/lib/node_modules/npm/lib/commands/run-script.js:62:24)
npm verbose stack     at async Npm.exec (/opt/hostedtoolcache/node/18.20.5/x64/lib/node_modules/npm/lib/npm.js:207:9)
npm verbose stack     at async module.exports (/opt/hostedtoolcache/node/18.20.5/x64/lib/node_modules/npm/lib/cli/entry.js:74:5)
npm verbose pkgid @d-matrix/icons-site@0.0.0
npm error Lifecycle script `build` failed with error:
npm error code 2
npm error path /home/runner/work/dm-icons/dm-icons/packages/icons-site
npm error workspace @d-matrix/icons-site@0.0.0
npm error location /home/runner/work/dm-icons/dm-icons/packages/icons-site
npm error command failed
npm error command sh -c tsc -b && vite build
npm verbose cwd /home/runner/work/dm-icons/dm-icons
npm verbose os Linux 6.5.0-1025-azure
npm verbose node v18.20.5
npm verbose npm  v10.8.2
npm verbose exit 2
npm verbose code 2
npm verbose cwd /home/runner/work/dm-icons/dm-icons
npm verbose os Linux 6.5.0-1025-azure
npm verbose node v18.20.5
npm verbose npm  v10.8.2
npm verbose exit 2
npm verbose code 2
Error: Process completed with exit code 2.

I don't know why the build fails when using GitHub Actions. The build npm script run successfully in local machine.

$ npm run build:site

> build:site
> npm run build --workspace=@d-matrix/icons-site


> @d-matrix/icons-site@0.0.0 build
> tsc -b && vite build

vite v6.0.3 building for production...
✓ 45 modules transformed.
dist/index.html                   0.48 kB │ gzip:  0.31 kB
dist/assets/index-dYOE1zTs.css    0.19 kB │ gzip:  0.16 kB
dist/assets/index-D70fpBM4.js   160.81 kB │ gzip: 51.67 kB
✓ built in 873ms

Tried the solutions: tsc throws `TS2307: Cannot find module` for a local file, none of them work.

GitHub Repo

Solution

  • I changed the workflow steps like below:

    jobs:
  deploy:
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v4
      - name: Set up Node
        uses: actions/setup-node@v4
        with:
          node-version: 18
          cache: 'npm'

      - name: Install dependencies
        run: npm ci
      - name: Build icons
        run: npm run build:icons --verbose
      - name: Reference icons
        run: npm run ref
      - name: Build site
        run: npm run build:site --verbose
      - name: Setup Pages
        uses: actions/configure-pages@v4
      - name: Upload artifact
        uses: actions/upload-pages-artifact@v3
        with:
          # Upload dist folder
          path: './packages/icons-site/dist'
      - name: Deploy to GitHub Pages
        id: deployment
        uses: actions/deploy-pages@v4

    Then it works

    enter image description here