Production build fails on static deployments when using path aliases about astro HOT 8 CLOSED

Update, I found a solution to the issue:

Due to astro using vite which uses esbuild / rollup differing on local and production environments, this led to this diversion in build statuses.

To fix this, you'll need to extend your astro configuration like so:

import { path } from 'path'

export default defineConfig({
  vite: {
    resolve: {
      alias: {
        // your aliases should mirror the ones defined in your tsconfig.json
        // i'll re-use the ones in the official docs:
        "@components": path.resolve(path.dirname(''), './src/components'),
        "@assets": path.resolve(path.dirname(''), './src/assets')
      }
    }
  }
})

Ideally this should be done by codemod when installing the astro deployment integration, but for now I've atleast submitted a PR which updates the docs.

withastro/docs#8323

from astro.

Even if you are not able to run it in Stackblitz, it's still helpful to have a reproduction. Just tell us that it needs to be pulled down locally in order to see the bug.

from astro.

Hello @samuelhulla. Please provide a minimal reproduction using a GitHub repository or StackBlitz. Issues marked with needs repro will be closed if they have no activity within 3 days.

from astro.

Many people uses aliases configured like the docs says through tsconfig just fine in production, I'm not too sure what your issue is.

from astro.

@matthewp @Princesseuh

Hmm strange. I found it bit odd that more people didn't run into it (couldn't find any similar issues) but I just chucked it off to people not using aliases with static deployment.

I'm only on phone since I'm away for the weekend, so sadly can't create a minimal code repo, either way, here's how to reproduce the issue:

1. Create new astro app
2. Add a path alias to tsconfig.json i.e.

"paths": {
  "@/*": ["./src/*"]
}

3. In a page (index.astro) change a component import from ../ to @/

4. Trying deploying (I tried vercel and render and got the same error on both)

If this for whatever reason does not work -- I've got a public repository where this happens:

1. Clone https://github.com/samuelhulla/hulla.dev
2. Edit index.astro to a path alias import @/
3. Try deploying

from astro.

The baseUrl in your example repo is wrong, it should be .

from astro.

Hi, this is my first post ever to try help, sorry if that's not how I should do it.

Currently working on an astro project, I used aliases following the doc, and it works on my side when deploying the Github page, as Princesseuh said you did not set the baseUrl properly @samuelhulla

// tsconfig.json
{
   // .. rest
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@components/*": [
        "src/components/*"
      ],
      "@assets/*": [
        "src/assets/*"
      ],
      "@layouts/*": [
        "src/layouts/*"
      ],
      "@scripts/*": [
        "src/scripts/*"
      ]
    }
  }
}

Hope this helps

from astro.

@Princesseuh Yeah that's embarassing, I have no clue how that path got there instead of the . (i guess i just tabbed away and copilot halucinated something) and it didn't even occur to me to check it, since I pretty much always use . in all of my projects.

Can confirm it works when you fix the baseUrl to ..

Sorry for the confusion, a silly oversight 😆

ps: @Tiffany-Dby dw, the more people try to help the merrier.

from astro.