Lazy load of component using `react-intl` => production build fails because of missing file declaration in `manifest.json`

Description

I’ve added internationalization using react-intl. It runs correctly with npm run dev but the production build fails.

Basically, I wrap my root component in all.page.tsx with <IntlProvider />. The default.page.server dynamically imports the translations file and pass it on the client side to be used by IntlProvider.

• all.page.tsx

 <IntlProvider
      key={lang}
      messages={messages}
      locale={lang}
      defaultLocale={currentLocale}
    >

        <Routes>
          <Route path="/" element={
               <React.Suspense
        fallback={<span className="no-result-search">Loading...</span>}
      >
              <Home />
               </React.Suspense>
                   } />
             <Route path="about" element={<About />} />
        </Routes>
    </IntlProvider>

• _default.page.server (onBeforeRender)

async function onBeforeRender(pageContext) {
  const translations = await import("../locales/en.json");
  return {
    pageContext: {
      pageProps: {
        translations,
        currentLocale: "en",
      },
    },
  };
}

• Home.tsx (Lazy loaded)

import { useIntl } from "react-intl";

export default function Home() {
 export default function Home() {
...
  const LazyMovies = React.lazy(() => import("./../components/Movies"));
  const intl = useIntl();
  console.log(movies)
  return (
    <div>
      {intl.formatMessage({
        id: "app_name",
        defaultMessage: "app_name",
      })}
    </div>
  );
}

For some reason, when I use IntlProvider and Lazy load movies in the Home route, the all.page.tsx gets missing from the manifest.json as stated in the error stack.

If I remove <LazyMovies /> from the <Home /> component, the production build works correctly:

Please find this quick demo, which reproduces the issue:

https://github.com/jaybe78/vps-webpack5-redux-streaming-test/tree/react-intl/production-build-fail

Error Stack

Error: [vite-plugin-ssr@0.3.64][Wrong Usage] You stumbled upon a rare Rollup bug. Reach out to the vite-plugin-ssr maintainer on GitHub or Discord. (The entry /pages/all.page.tsx is missing in the client manifest which is printed above.)
    at file:///Users/jb/Documents/vps-webpack5-redux-streaming-test/dist/main.js:57785:37

[brillout]

Thanks a lot @lukastaegert — that’s very helpful.

input option […] or emitted explicitly as a chunk via this.emitFile […] is the only way to get a guaranteed chunk in Rollup.

That did the trick: adding the page files to input solves it.

@jaybe78 Fix released in 0.4.0-beta.40.

[lukastaegert]

I can only guess what you think the Rollup bug is. I checked that the file you are searching for is neither part of the input option nor is it emitted explicitly as a chunk via this.emitFile. This is the only way to get a guaranteed chunk in Rollup. If you expect that a dynamic import always generates a chunk, then I fear this expectation is faulty.

The most important exception is if the dynamic import target is already contained in the importing chunk (because it is also imported non-dynamically), no extra chunk is created https://rollupjs.org/repl/?version=2.75.7&shareable=JTdCJTIybW9kdWxlcyUyMiUzQSU1QiU3QiUyMm5hbWUlMjIlM0ElMjJtYWluLmpzJTIyJTJDJTIyY29kZSUyMiUzQSUyMmltcG9ydCUyMCcuJTJGZm9vLmpzJyUzQiU1Q25pbXBvcnQoJy4lMkZmb28uanMnKSUzQiUyMiUyQyUyMmlzRW50cnklMjIlM0F0cnVlJTdEJTJDJTdCJTIybmFtZSUyMiUzQSUyMmZvby5qcyUyMiUyQyUyMmNvZGUlMjIlM0ElMjJjb25zb2xlLmxvZygnZm9vJyklM0IlMjIlMkMlMjJpc0VudHJ5JTIyJTNBZmFsc2UlN0QlNUQlMkMlMjJvcHRpb25zJTIyJTNBJTdCJTIyZm9ybWF0JTIyJTNBJTIyZXMlMjIlMkMlMjJuYW1lJTIyJTNBJTIybXlCdW5kbGUlMjIlMkMlMjJhbWQlMjIlM0ElN0IlMjJpZCUyMiUzQSUyMiUyMiU3RCUyQyUyMmdsb2JhbHMlMjIlM0ElN0IlN0QlN0QlMkMlMjJleGFtcGxlJTIyJTNBbnVsbCU3RA==

Another exception is the use of manual chunks.

If the expected chunks were explicitly emitted via this.emitFile, such problems can be avoided.