"fileURLToPath" is not exported by "__vite-browser-external", imported by "node_modules/astro-expressive-code/dist/index.js".

[Samuel Breznjak]

I'm currently building an Astro theme for documentation. It has support for mdx files.
When I ran npm run build I got an error:

https://prnt.sc/3zftl5zYf2z4

The problem is in astro-expressive-code package, because when I removed it I could build the app normally.

Additional Info:
WIndows 10
Node version: 18.16.0

Package.json: https://prnt.sc/BYWZOh_Oo46p
Astro config: https://prnt.sc/1kvFjT1fY5YW

Example markdown file from project (in case I'm not using the package in the right way):
https://prnt.sc/zQ7Pce3JPkkl,
https://prnt.sc/ejzM2aFSET2q

[Hippo]

Hello! Could you maybe share the link to your repo? I cannot reproduce this issue with the given information.

I assume that this is not actually an Expressive Code bug, but that you're having an issue in your repo with how you are importing content, and using Expressive Code just makes this visible.

The error messages look as if server-side scripts end up in your client-side bundle. This can happen if you accidentally import server-side code (like Content Collection APIs from astro:content) inside the content of MDX files, inside the HTML template part of Astro files, or inside framework components like React components.

[Samuel Breznjak]

Hi Tibor, I've sent you an invite link to the repo.

I think I know what's wrong. Inside both src/components/navigation/Nav.astro and src/components/navigation/MobileNav.astro, there is a function called getDocs where inside switch statement I'm getting all markdown files frontmatter with Astro.glob(), and then returning title, descirption, and url.

Then inside both files, I'm passing that docs array to a React component called Search.tsx

I don't have any idea how to implement search in a different way than this. Do you have any ideas?

[Hippo]

Thank you for the invite! I had a look at the repo and found the location where you're importing server-side code in a client script:

In your src/layouts/Base.astro, you have a client-side <script> that contains the following:

import {
  LIGHT_MODE_CODE_BLOCK_THEME,
  DARK_MODE_CODE_BLOCK_THEME,
} from '@/config'

In the imported src/config.ts, you have the following statement:

import { type ThemeObjectOrShikiThemeName } from 'astro-expressive-code'

This is a tricky one. This syntax imports the type, AND runs any base code from the module (if any). This is why it gets bundled into the client-side. You need to replace it with the following slightly different syntax:

import type { ThemeObjectOrShikiThemeName } from 'astro-expressive-code'

This will truly only import the type and not bring in the entire backend code into your client bundle.

[Samuel Breznjak]

It works now! Thank you so much :))))))))))))))))