🐛 BUG: Building a site using React components with escaped spaces in path fails

[jackmerrill]

What version of astro are you using?

1.0.0-beta.47

Are you using an SSR adapter? If so, which one?

Node

What package manager are you using?

yarn

What operating system are you using?

Windows

Describe the Bug

When building an Astro site using the Node SSR adapter, as well with a React component placed in a folder with a space in it's name will fail.

Vite is unable to load the component during build time, thus failing the build.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-mhnkxf

Participation

• I am willing to submit a pull request for this issue.

[bholmesdev]

Good catch @jackmerrill! Noting a few more details here:

• fails on production builds without an SSR adapter as well
• occurs on MacOS too
• does not occur in plain Vite projects or similarly SSR'd projects like SvelteKit

[FredKSchott]

Another user hit this in Discord: https://discord.com/channels/830184174198718474/845451724738265138/996131165553557625

Bumping up the priority

[FredKSchott]

We should have a test for a folder with a space in it, using a framework like React! @natemoo-re thinks we might already, but it probably isn't testing the framework part of this bug.

[Princesseuh]

I investigated this a bit with my limited rollup, vite knowledge and here's where I got:

Our compiler's transform returns the modules paths encoded, I first thought this was the issue, but making it return the proper URLs didn't fix the issue. It seems like due to something in between the compiler and the build process, the URLs get encoded back. On this line rid should be the actual non-encoded URLs, but it is not.

Manually adding a decodeURI there fix the issue, as this commit shows. Another decodeURI is also needed in core/build/generate.ts as the path is also encoded there (might be using the same initial source? Not sure)

I spent a bit too much time on this, and I fear that the issue might lie in some pieces of code that we don't control / I don't know

[FredKSchott]

Thanks @Princesseuh!! bumping up the priority again given the recent reports. Also, assigning @bluwy who may have a bit more familiarity with this part of the codebase (cc @matthewp as well!)

[bluwy]

I looked into this today and came with a similar fix at 04e93d1, which fixes the build issue with the repro.

#4263 have also added tests, but I also found that other symbols like 🚀 and % is making dev/build fail too. It seems to be some sourcemaps issue but I haven't dug too deep yet as it had also spent quite some time on this now. 😅