TanStack / TanStack/router

Prerender never exits with custom alias injected by Vite plugin

Open
#7,516 5 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
15.1k
Forks
1.9k
Avg merge
1d 20h
Merged PRs (30d)
143

Description

Which project does this relate to?

Router

Describe the bug

Similar to https://github.com/TanStack/router/issues/6425

I'm encountering a similar problem when enabling pre-rendering.

Image
  • Bun (1.3.14)

  • Packages:
    "@tanstack/react-query": "5.100.14",
    "@tanstack/react-router": "1.170.10",
    "@tanstack/react-router-devtools": "1.167.0",
    "@tanstack/react-router-ssr-query": "1.167.1",
    "@tanstack/react-start": "1.168.18",
    "vite": "8.0.14"

  • OS: Mac

Checked config:

  • The build hangs with or without filters.
  • When disabling pre-rendering, the build passes.
  • If the filter returns 0 pages to pre-render, the build passes.
  • Not related to any specific route, prerendering any of the available route apply the blockage.
  • As long at least one intlayer content is called, replacing all page content with <></> still causes it to hang too
  • If I have 100 pages to crawl, it processes all 100, showing [prerender] - /pageName x, then stays stuck once all pages have been pre-rendered.
  • Changing the concurrency does not change anything.
  • Same app prerendered using nextjs or react router v7 render properly

I did a deeper analysis and found that the issue is caused by an alias. Intlayer injects aliases for build optimization: https://github.com/aymericzip/intlayer/blob/main/packages/vite-intlayer/src/intlayerPlugin.ts

When removing the problematic alias ('@intlayer/config/built': '/absolute/path/to/.intlayer/config/configuration.mjs'), pre-rendering completes successfully. However, the client then crashes because of an fs import (which is the reason the alias is used in the first place).

Trick to reproduce, commenting out the intlayer plugin + isolation of aliases in another plugin reproduce the issue:

    plugins: [
      // intlayer(),
      {
        name: 'debug-alias',
        config(_config) {
          return {
            resolve: {
              alias: {
                      // No problem with that aliases
                // '@intlayer/dictionaries-entry':
                //   '/Users/user/Documents/xxx/.intlayer/main/dictionaries.mjs',
                // '@intlayer/unmerged-dictionaries-entry':
                //   '/Users/user/Documents/xxx/.intlayer/main/unmerged_dictionaries.mjs',
                // '@intlayer/remote-dictionaries-entry':
                //   '/Users/user/Documents/xxx/.intlayer/main/remote_dictionaries.mjs',
                // '@intlayer/dynamic-dictionaries-entry':
                //   '/Users/user/Documents/xxx/.intlayer/main/dynamic_dictionaries.mjs',
                // '@intlayer/fetch-dictionaries-entry':
                //   '/Users/user/Documents/xxx/.intlayer/main/fetch_dictionaries.mjs',
                
                // Problematic alias
                '@intlayer/config/built':
                  '/Users/user/Documents/xxx/.intlayer/config/configuration.mjs',
              },
            },
          };
        },
      },
    ]

What confuses me is that:

In my case, that alias lead to that blockage, but I'm not sure the alias is the reason. it seems to be an import resolution related issue.

Note: changing aliases from absolute to relative does not change anything

At first, I thought it might be related to having both named and default exports, but removing all default exports did not fix the issue.

For example:

export const config = {};
export default config;

I'll continue experimenting and provide more details if I find any important point that can help debbuging.

App to reproduce: https://github.com/aymericzip/intlayer/blob/main/apps/website-tanstack
(Repo context is massive, sorry for that, but I have no idea how to reproduce properly)
1- Clone: https://github.com/aymericzip/intlayer
2- install dep
3- build packages: bun run build
4- cd apps/website-tanstack
5- enable prerendering in vite.config.ts
6- rename .env.template to .env
7- bun run build

Complete minimal reproducer

https://github.com/aymericzip/intlayer/blob/main/

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Reproduce the hang in apps/website-tanstack by enabling prerendering in vite.config.ts and running the documented build steps. Compare the build with and without the injected '@intlayer/config/built' alias, then inspect the prerender behavior after all pages are crawled. Done means the prerendered build completes successfully while retaining the alias needed to avoid the fs import crash.

Written by the indexing model from the issue text.

Assessment

Tech stack
bun, react, typescript, vite
Domain
build-system, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
42/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.