Production build fails on static deployments when using path aliases

[samuelhulla]

Astro Info

Astro                    v4.8.6
Node                     v20.7.0
System                   macOS (arm64)
Package Manager          bun
Output                   static
Adapter                  none
Integrations             @astrojs/tailwind
                         @astrojs/solid-js
                         @astrojs/mdx

If this issue only occurs in one browser, which browser is a problem?

No response

Describe the Bug

There seems to be an issue with path resolution in production deployments of static astro.

Initially I thought this issue is in vercel itself, which I was deploying to, but I tried also other supported deployments to double-check and indeed - I got the same error.

In specific

2024-05-17T16:32:01.989Z 16:32:01 [ERROR] [vite] x Build failed in 3.19s
2024-05-17T16:32:02.141Z [vite]: Rollup failed to resolve import "@/layouts/Page.astro" from "/vercel/path0/src/pages/index.astro".
2024-05-17T16:32:02.142Z This is most likely unintended because it can break your application at runtime.
2024-05-17T16:32:02.142Z If you do want to externalize this module explicitly add it to
2024-05-17T16:32:02.142Z build.rollupOptions.external
2024-05-17T16:32:02.142Z Stack trace:
2024-05-17T16:32:02.142Z at viteWarn (file:///vercel/path0/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:67612:27)
2024-05-17T16:32:02.142Z at onwarn (file:///vercel/path0/node_modules/vite/dist/node/chunks/dep-cNe07EU9.js:67356:13)
2024-05-17T16:32:02.142Z at Object.logger [as onLog] (file:///vercel/path0/node_modules/rollup/dist/es/shared/node-entry.js:20166:9)
2024-05-17T16:32:02.142Z at file:///vercel/path0/node_modules/rollup/dist/es/shared/node-entry.js:19066:26
2024-05-17T16:32:02.160Z error: script "build" exited with code 1
2024-05-17T16:32:02.163Z Error: Command "bun run build" exited with 1

Running bun run build locally, does work

I also tried using the @astrojs/vercel integrtio, but it does not help

What's the expected result?

Assumption: Under inspecting the logs further, this is due to the fact, that astro uses vite, which acts differently in production environment compared to local.

I would expect either

1. The build to work automatically when having static input and deploying to a hosting service (preferred ✅ )
2. Or at least docs to mention how to configure vite to work with path aliases.

Creating vite.config.ts and specifying path aliases resolvers does not work

Link to Minimal Reproducible Example

unlinkable to astro.new, stackblitz sadly breaks when you use a import path alias

Participation

• I am willing to submit a pull request for this issue.

[samuelhulla]

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

[matthewp]

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.

[github-actions]

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.

[Princesseuh]

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

[samuelhulla]

@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

[Princesseuh]

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

[Tiffany-Dby]

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

[samuelhulla]

@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.