[Bug]: CriticalCSS fails on `mdx` files

[Valerioageno]

Description

Expected behaviour

File resolution should not fail.

How to reproduce

Run the examples/with-mdx project and see the terminal output after the first page loading

Screenshots

No response

System Info

N/A

System info (Rust)

N/A

Additional context

No response

[CDGardner]

Hey! I'm looking into this at the moment. After looking into it a bit, I am noticing a bit of an oddity but may be missing some context as to how/why it may be happening. In the styles.ts file, there's this bit of code inside the getStylesForModule function (I added the console.logs).

 let node: ModuleNode | undefined =
      await viteDevServer.moduleGraph.getModuleByUrl(moduleFilePath)
    console.log('first node log: ', node);

    // If the module is only present in the client module graph, the module
    // won't have been found on the first request to the server. If so, we
    // request the module so it's in the module graph, then try again.
    if (!node) {
      try {
        await viteDevServer.transformRequest(moduleFilePath)
      } catch (err) {
        console.error(err)
      }

      node = await viteDevServer.moduleGraph.getModuleByUrl(moduleFilePath)
      console.log('second node log: ', node);
    }

    if (!node) {
      console.error(`Could not resolve module for file: ${moduleFilePath}`)
      return
    }
    await findNodeDependencies(viteDevServer, node, deps)

The result of those logs look something like this:

first node log:  undefined
first node log:  undefined

Error: Failed to load url C:\Users\Chris\projects\tuono\examples\with-mdx\src\routes\index (resolved id: C:\Users\Chris\projects\tuono\examples\with-mdx\src\routes\index). Does the file exist?
    at loadAndTransform (file:///C:/Users/Chris/projects/tuono/node_modules/.pnpm/vite@6.3.5_@types+node@22.1_08b03a150aa68e8388923571983384b3/node_modules/vite/dist/node/chunks/dep-DBxKXgDP.js:35725:17)
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5) {
  code: 'ERR_LOAD_URL'
}

second node log:  undefined

Could not resolve module for file: C:\Users\Chris\projects\tuono\examples\with-mdx\src\routes\index

second node log:  ModuleNode {
  _moduleGraph: ModuleGraph {
    _moduleGraphs: { client: [Function: client], ssr: [Function: ssr] },
    // ... I removed some output here just for demonstration purposes, but it resolves correctly.
  },
  _ssrModule: undefined
}

So the two 'first node logs' are fired off with node being undefined, the resolution fails, and then then the second node log returns undefined, we get our 'Could not resolve module for file' line, then the ModuleNode gets resolved correctly.

I guess my question is since we know that mdx is working both from a render perspective and the global.css stylesheet in examples/with-mdx does get applied to the result of what is in that mdx file, are we looking to maybe look to add a little logic to check for if we have an mdx file, and somehow hold off on trying to resolve at a later point or try and prevent those messages since the resolution does work in the end?

Or could this possibly be more of a Vite configuration issue?

[Valerioageno]

Hey @CDGardner,
I checked now and looks like - if I add a separate TSX component and I import it in index.mdx - the component's CSS Modules are ignored in dev mode (global.css always work).
I'm not sure if we can remove the mdx files to be fetched with getModuleByUrl since we risk to completely cut off all the imported components.
I'm wondering if we are passing the wrong URL to getModuleByUrl. Maybe vite changes the file URL to prevent collisions with tsx files defined accidentally in the same folder.

[CDGardner]

@Valerioageno Ahh, ok. Yeah, I'll run with that info and see what I can find. Thanks for that help!

[CDGardner]

Hey @Valerioageno , you were spot on with your thinking. It's not getting the correct path. It's close, but it's stripping the .mdx part and just passing index as the last part of the path.

I added this code snippet in just to test in getModuleByUrl:

  if (moduleFilePath.includes('index')) {
    moduleFilePath = normalizePath(moduleUrl + '.mdx')
  }

I'll take a look at this some more sometime later on today and see if I can work out a proper solution for this. I would have got around to this sooner but was sick this past week and also got wrapped up with a little work on another project.

[Valerioageno]

Nice catch! Thanks for it and no worries! Take your time :)