Handle query parameters in Vite

[markdalgleish]

Initial checklist

• I read the support docs
• I read the contributing guide
• I agree to follow the code of conduct
• I searched issues and discussions and couldn’t find anything or linked relevant results below
• I made sure the docs are up to date
• I included tests (or that’s not needed)

Description of changes

This fixes an issue where MDX imports with query parameters aren't picked up by the Rollup plugin in Vite. To fix this, this PR uses the extnamesToRegex util to create a regular expression for matching MDX extensions, and this util already handles the existence of query parameters correctly.

I ran into this in the context of React Router where I'm working on RSC support for Framework Mode which uses Vite. We're using query parameters to transform client and server versions of route files, but this approach means that MDX routes are no longer working since the query parameters cause the MDX plugin to skip over them.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 100.00%. Comparing base (def2cba) to head (7b7ca45).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff            @@
##              main     #2629   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           21        21           
  Lines         2650      2650           
  Branches         2         2           
=========================================
  Hits          2650      2650           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[remcohaszing]

Thanks! I have one comment.

[remcohaszing]

Apparently this path variable is not really a path. Instead, it’s an ID (constructed from the path). It may contain query parameters.

I think the proper fix would be to rename this variable to id (including in the types). Then construct the path using:

const [path] = id.split('?')

The main difference is that remark/rehype/recma plugins also have access to the VFile. It’s important that it has the correct data.

[markdalgleish]

@remcohaszing Thanks for the feedback. I've just pushed an update.

[wooorm]

Cool, thanks!

[markdalgleish]

Do you have an idea of when this will be published?

[markdalgleish]

@wooorm Sorry to ping you again, but do you know when this will be released?

[wooorm]

No worries! I just haven’t gotten around to it. Is it blocking/important?

[markdalgleish]

Not blocking! We're looking to ship unstable support for RSC Framework Mode in React Router soon (hopefully within a few weeks or so) and ideally MDX routes will still be supported on day one, but we won't hold up the release over it. Just making sure it didn't slip through the cracks 🙂

[wooorm]

Released in 3.1.1! Thanks for your patience!