TS error when deploying with vercel

NickdeK commented 1 year ago

So I've been using this template for a simple hobby project that I wanted to deploy with Vercel, but I get this typescript error that I don't get locally when using the build command.


Cloning completed: 704.88ms
--
09:11:01.022 | Looking up build cache...
09:11:01.489 | Build Cache not found
09:11:01.792 | Running "vercel build"
09:11:02.440 | Vercel CLI 28.2.0
09:11:02.740 | Warning: Detected "engines": { "node": ">=16.17.0" } in your `package.json` that will automatically upgrade when a new major Node.js Version is released. Learn More: http://vercel.link/node-version
09:11:02.742 | Running "install" command: `yarn`...
09:11:03.684 | ➤ YN0000: ┌ Resolution step
09:11:03.902 | ➤ YN0002: │ stylelint-config-recommended-scss@npm:7.0.0 [8b30a] doesn't provide postcss (p8f459), requested by postcss-scss
09:11:03.902 | ➤ YN0002: │ vite-vue2-vuetify-ts-starter@workspace:. doesn't provide rollup (p5218d), requested by rollup-plugin-visualizer
09:11:03.903 | ➤ YN0000: │ Some peer dependencies are incorrectly met; run yarn explain peer-requirements <hash> for details, where <hash> is the six-letter p-prefixed code
09:11:03.910 | ➤ YN0000: └ Completed in 0s 225ms
09:11:03.977 | ➤ YN0000: ┌ Fetch step
09:11:55.341 | ➤ YN0013: │ 23 packages were already cached, 676 had to be fetched
09:11:55.345 | ➤ YN0000: └ Completed in 51s 367ms
09:11:55.415 | ➤ YN0000: ┌ Link step
09:12:03.722 | ➤ YN0007: │ vue-demi@npm:0.13.6 [40cc5] must be built because it never has been before or the last one failed
09:12:03.723 | ➤ YN0007: │ esbuild@npm:0.14.49 must be built because it never has been before or the last one failed
09:12:04.028 | ➤ YN0000: └ Completed in 8s 613ms
09:12:04.109 | ➤ YN0000: Done with warnings in 1m 1s
09:12:11.181 | src/components/HelloWorld.vue(136,18): error TS2307: Cannot find module '@/Meta' or its corresponding type declarations.
09:12:11.217 | Error! Command "yarn build" exited with 2

I'm guessing this has to do with the aliases defined in tsconfig.ts but I can't figure out what could be wrong with this.

amit-feldman commented 1 year ago

@NickdeK Did you setup your aliases in vite config as well?

NickdeK commented 1 year ago

@amit-feldman Yes, the same as in the repo: https://github.com/logue/vite-vue2-vuetify-ts-starter/blob/master/vite.config.ts#L22-L28

NickdeK commented 1 year ago

@amit-feldman I've just noticed there also is another config that has different aliases configured, is this causing the problem perhaps? https://github.com/logue/vite-vue2-vuetify-ts-starter/blob/master/vitest.config.ts#L16-L22

NickdeK commented 1 year ago

I've tried both alias configurations in both files and neither solves the original issue unfortunately.

amit-feldman commented 1 year ago

@NickdeK hard to tell without seeing your config files 😞

logue commented 1 year ago

yarn run build is for checking whether the build passes locally and uploading the product manually.

Since Meta.ts is not included in the repository by default, an error will occur if you build it in an external environment (such as Github Action, Cloudflare Pages, Vercel, etc.).

Use build:deploy when building in an automatic deployment environment.

https://github.com/logue/vite-vue2-vuetify-ts-starter#commands

Below is an example configuration for Github Action:

name: Deploy to gh-pages

on:
  push:
    branches: ['master']
  pull_request:
    branches: ['master']

jobs:
  build:
    runs-on: ubuntu-latest

    strategy:
      matrix:
        node-version: [18.x]

    steps:
      - name: Checkout ✅
        uses: actions/checkout@v3

      - name: Use Node.js ${{ matrix.node-version }} ⚡
        uses: actions/setup-node@v3
        with:
          node-version: ${{ matrix.node-version }}

      - name: Build 🔧
        run: |
          yarn install
          yarn build:deploy

      - name: Deploy to gh-pages 🚀
        uses: JamesIves/github-pages-deploy-action@v4.4.0
        with:
          branch: gh-pages # The branch the action should deploy to.
          folder: dist # The folder the action should deploy.

NickdeK commented 1 year ago

@logue Ahhh you are absolutely right. I thought build:* where sub command that also ran with build. Makes sense tho, thanks for the help!

logue / vite-vue2-vuetify-ts-starter

TS error when deploying with vercel #4