Prerender never exits with custom alias injected by Vite plugin

[aymericzip]

Which project does this relate to?

Router

Describe the bug

Similar to #6425

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

• 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:

• The app template using TanStack Start with build + pre-rendering works: https://github.com/aymericzip/intlayer/blob/main/examples/tanstack-start-app
• Another, more complex app builds successfully but gets stuck during pre-rendering: https://github.com/aymericzip/intlayer/blob/main/apps/website-tanstack (both set up are similar )

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/

[aymericzip]

Not sure it will help, but here is the content on both side of the alias

Entry point of @intlayer/config/src/built (content A) (server side)

/**
 * @intlayer/config/built is a package that only returns the configuration file as a JSON object.
 * Using an external package allow to alias it in the bundle configuration (such as webpack).
 */

import type { IntlayerConfig } from '@intlayer/types/config';
import { getConfiguration } from './configFile/getConfiguration';

const configuration: IntlayerConfig = getConfiguration();

const parsedJSONConfig = JSON.parse(JSON.stringify(configuration));

export const internationalization = parsedJSONConfig.internationalization;
export const dictionary = parsedJSONConfig.dictionary;
export const routing = parsedJSONConfig.routing;
export const content = parsedJSONConfig.content;
export const system = parsedJSONConfig.system;
export const editor = parsedJSONConfig.editor;
export const log = parsedJSONConfig.log;
export const ai = parsedJSONConfig.ai;
export const build = parsedJSONConfig.build;
export const compiler = parsedJSONConfig.compiler;
export const schemas = parsedJSONConfig.schemas;
export const plugins = parsedJSONConfig.plugins;

Aliased content at .intlayer/config/configuration.mjs (content B) (client side)

const internationalization = {
  "locales": [
    "en",
    "fr",
    "es"
  ],
  "requiredLocales": [
    "en",
    "fr",
    "es"
  ],
  "strictMode": "inclusive",
  "defaultLocale": "en"
};
const routing = {
  "mode": "prefix-no-default",
  "storage": {
    "cookies": [
      {
        "name": "INTLAYER_LOCALE",
        "attributes": {}
      }
    ],
    "headers": [
      {
        "name": "x-intlayer-locale"
      }
    ]
  },
  "basePath": ""
};
const editor = {
  "editorURL": "http://localhost:8000",
  "cmsURL": "https://app.intlayer.org",
  "backendURL": "https://back.intlayer.org",
  "port": 8000,
  "enabled": false,
  "dictionaryPriorityStrategy": "local_first",
  "liveSync": false,
  "liveSyncPort": 4000,
  "liveSyncURL": "http://localhost:4000"
};
const log = {
  "mode": "verbose",
  "prefix": "\u001b[38;5;239m[intlayer] \u001b[0m"
};
const system = {
  "baseDir": "/Users/xxx/path/to",
  "moduleAugmentationDir": "/Users/xxx/path/to/.intlayer/types",
  "unmergedDictionariesDir": "/Users/xxx/path/to/.intlayer/unmerged_dictionary",
  "remoteDictionariesDir": "/Users/xxx/path/to/.intlayer/remote_dictionary",
  "dictionariesDir": "/Users/xxx/path/to/.intlayer/dictionary",
  "dynamicDictionariesDir": "/Users/xxx/path/to/.intlayer/dynamic_dictionary",
  "fetchDictionariesDir": "/Users/xxx/path/to/.intlayer/fetch_dictionary",
  "typesDir": "/Users/xxx/path/to/.intlayer/types",
  "mainDir": "/Users/xxx/path/to/.intlayer/main",
  "configDir": "/Users/xxx/path/to/.intlayer/config",
  "cacheDir": "/Users/xxx/path/to/.intlayer/cache",
  "tempDir": "/Users/xxx/path/to/.intlayer/tmp"
};
const content = {
  "fileExtensions": [
    ".content.ts",
    ".content.js",
    ".content.cjs",
    ".content.mjs",
    ".content.json",
    ".content.json5",
    ".content.jsonc",
    ".content.tsx",
    ".content.jsx",
    ".content.md",
    ".content.mdx",
    ".content.yaml",
    ".content.yml"
  ],
  "contentDir": [
    "/Users/xxx/path/to"
  ],
  "codeDir": [
    "/Users/xxx/path/to"
  ],
  "excludedPath": [
    "**/node_modules/**",
    "**/dist/**",
    "**/build/**",
    "**/.intlayer/**",
    "**/.next/**",
    "**/.nuxt/**",
    "**/.expo/**",
    "**/.vercel/**",
    "**/.turbo/**",
    "**/.tanstack/**"
  ],
  "watch": true
};
const ai = {};
const dictionary = {
  "fill": true,
  "contentAutoTransformation": false,
  "location": "local",
  "importMode": "static"
};
const build = {
  "mode": "auto",
  "minify": false,
  "purge": false,
  "traversePattern": [
    "**/*.{tsx,ts,js,mjs,cjs,jsx,vue,svelte,astro}",
    "!**/node_modules/**",
    "!**/dist/**",
    "!**/build/**",
    "!**/.intlayer/**",
    "!**/.next/**",
    "!**/.nuxt/**",
    "!**/.expo/**",
    "!**/.vercel/**",
    "!**/.turbo/**",
    "!**/.tanstack/**",
    "!**/*.config.*",
    "!**/*.test.*",
    "!**/*.spec.*",
    "!**/*.stories.*",
    "!**/*.d.ts",
    "!**/*.d.ts.map",
    "!**/*.map"
  ],
  "outputFormat": [
    "esm",
    "cjs"
  ],
  "cache": true,
  "checkTypes": false
};
const compiler = {
  "enabled": true,
  "dictionaryKeyPrefix": "",
  "noMetadata": false,
  "saveComponents": false
};

export { internationalization, routing, editor, log, system, content, ai, dictionary, build, compiler };

• ❌ Placing content B on both side pass the build but block at prerendering
• ✅ Placing content A on both side pass the build and prerendering (but crash on client side Cannot find package 'esbuild' from '/Users/aymericpineau/Documents/intlayer_/apps/website-react-router/.output/server/_ssr/getDictionary-5gYNIxUc.mjs )

[aymericzip]

Update: It seems related to @tanstack/react-query

This is blocking prerender:
------ packages/@intlayer/design-system/src/api/useAuth/useSession.ts ------

'use client';

import type { SessionAPI } from '@intlayer/backend';
import { useQuery } from '@tanstack/react-query';

export const useSession = () => {
  // Keep TanStack generics internal so they don't leak into the d.ts
  const { data, isFetched, refetch } = useQuery({
    queryKey: ['session'],
    queryFn: async () => {
      return null;
    },

    enabled: false,
  });

  return {
    session: null,
    fetchSession: async () => null,
    revalidateSession: async () => null,
    setSession: async () => {},
  };
};

But this one pass the pre-rendering
------ packages/@intlayer/design-system/src/api/useAuth/useSession.ts ------

'use client';

import type { SessionAPI } from '@intlayer/backend';
import { useQuery } from '@tanstack/react-query';

export const useSession = () => {
  // Keep TanStack generics internal so they don't leak into the d.ts
  const { data, isFetched, refetch } =
    typeof window !== 'undefined'
      ? useQuery({
          queryKey: ['session'],
          queryFn: async () => {
            return null;
          },

          enabled: false,
        })
      : {};

  return {
    session: null,
    fetchSession: async () => null,
    revalidateSession: async () => null,
    setSession: async () => {},
  };
};

[aymericzip]

Simplifying again,

This code block prerendering
------ apps/website-tanstack/src/components/Navbar/index.tsx ------

import { useQuery } from '@tanstack/react-query';
import type { FC } from 'react';

export const Navbar: FC = () => {
  useQuery({
    queryKey: ['session'],
    queryFn: async () => {
      return null;
    },

    enabled: false,
  });

  return <></>;
};

But this one is passing

import { useQuery } from '@tanstack/react-query';
import type { FC } from 'react';

export const Navbar: FC = () => {
  // useQuery({
  //   queryKey: ['session'],
  //   queryFn: async () => {
  //     return null;
  //   },

  //   enabled: false,
  // });

  return <></>;
};

But again, removing aliases provided by intlayer also resolve it

[aymericzip]

Found a fix
aymericzip/intlayer@7d02120