withastro / starlight

🌟 Build beautiful, accessible, high-performance documentation websites with Astro
https://starlight.astro.build
MIT License
5.25k stars 539 forks source link

Fail to build with Expressive Code disabled #1624

Closed HiDeoo closed 8 months ago

HiDeoo commented 8 months ago

What version of starlight are you using?

0.21.1

What version of astro are you using?

4.5.6

What package manager are you using?

pnpm

What operating system are you using?

Mac

What browser are you using?

Chrome

Describe the Bug

Starting a new project using pnpm create astro --template starlight, disabling Expressive Code and trying to build fails with the following error:

11:55:13 [ERROR] [vite] x Build failed in 11.76s
[vite]: Rollup failed to resolve import "virtual:astro-expressive-code/config" from "/home/projects/github-gcerwr/node_modules/astro-expressive-code/components/renderer.ts".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
  Stack trace:
    at viteWarn (/home/projects/github-gcerwr/node_modules/vite/dist/node/chunks/dep-jvB8WLp9.js:67239:27)
    at onwarn (/home/projects/github-gcerwr/node_modules/vite/dist/node/chunks/dep-jvB8WLp9.js:66971:13)
    at Object.logger (/home/projects/github-gcerwr/node_modules/rollup/dist/es/shared/node-entry.js:19975:9)
    at ModuleLoader.resolveDynamicImport (/home/projects/github-gcerwr/node_modules/rollup/dist/es/shared/node-entry.js:18976:58)

The only change to the starter template is the edited config to add:

export default defineConfig({
  integrations: [
    starlight({
      // Disabling Expressive Code for the repro
+      expressiveCode: false,
      title: 'My Docs',
    }),
  ],
});

The started template does not involve the <Code> component.

cc @hippotastic

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-gcerwr?file=astro.config.mjs

Participation

hippotastic commented 8 months ago

I just finished debugging this. It seems to be caused by the known issue that tree-shaking does not work with barrel files that (re-)export multiple components.

If your site includes any content that contains an import from @astrojs/starlight/components (see src/content/docs/index.mdx in the Starlight template), rollup will also try to bundle the Code component exported from that barrel file even though it's unused, and then fail processing the virtual imports referenced by it.

I have prepared a workaround for this issue by providing shims for the virtual imports in case the user decides to set expressiveCode: false in the config. It also includes a helpful error message if they actually try to use the <Code> component with this config. I'll create a PR.