Remix 1.16 unstable_dev - problems with assets

[arekbartnik]

What version of Remix are you using?

1.16

Are all your remix dependencies & dev-dependencies using the same version?

• Yes

Steps to Reproduce

1. git clone git@github.com:ArekBartnik/remix-116-dev-assets.git
2. npm i
3. npm run dev
4. go to http://localhost:3000

Expected Behavior

It should show a page using Inter font and an icon after "Welcome to Remix".

With unstable_dev: true;	Without unstable_dev: true

Without new devserver paths to assets are relative but after turning this flag they change to absolute.

Actual Behavior

There're 2 errors:

• for the fonts -> 404 http://localhost:3001/fonts/InterV.var.woff2 net::ERR_ABORTED 404 (Not Found)
• for the svg icon -> `Unsafe attempt to load URL http://localhost:3001/build/_assets/document-QP6N4QKU.svg from frame with URL http://localhost:3000/. Domains, protocols and ports must match.

[mikeybinns]

Just to note I'm also receiving the same "Domains, protocols and ports must match." error, and 404 errors on objects in the public folder (like fonts).

[pcattori]

#6279 fixes this issue for non-Remix public assets like fonts. But svgs are trickier since browsers don't like grabbing those from different origins for security reasons. Will keep looking into svg fixes.

#6279 should now fix all asset types

[arekbartnik]

@pcattori I saw in the merge that SVGs will be inlined and I'm not a fun of this solution. It will inflate HTML and could cause some unexpected behaviour only in "dev" making it harder to debug.

[pcattori]

@arekbartnik unfortunately there is no way for <use/> href to participate in CORS.

The alternative would be to proxy everything from our dev server, but that would require rearchitecting parts of the dev server. I'm happy to consider doing that, but that will take longer. In the meantime, inlining via Data URLs does the job.

[arekbartnik]

@pcattori I would like to understand why it was decided to serve files from a different origin? I think it's could be especially painful because "production" will be different (most assets are relative.)

[pcattori]

Its so that HMR updates can safely be sent immediately to the browser without needing to wait for the app server to reboot. So even during app server "downtime", assets will continue to be served.

[arekbartnik]

@pcattori I've checked and svgs as dataulrs are blocked in Safari. Works in Chrome and Firefox. Here's a pen https://codepen.io/arekbartnik/pen/QWZqXzJ

But I think using use for svgs in React ecosystem is very rare - most import components with svg as jsx (I wanted to have a smaller JS bundle :))

[github-actions]

🤖 Hello there,

We just published version v0.0.0-nightly-0e2763f-20230503 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!

[pcattori]

@arekbartnik after some more thought, I realized that serving the assets from the dev server doesn't actually help all that much for making HMR faster (for complicated reasons I won't bring up here). Which means that the original purpose of serving assets from dev server is obsoleted. Going to think about this a little more, but leaning towards just serving everything from the app server. Simpler, more similar to prod, and only one domain, so no CORS or cross-domain shenanigans. No need to use dataurls for svgs.

[pcattori]

Related: #6306

[github-actions]

🤖 Hello there,

We just published version 1.16.1-pre.0 which involves this issue. If you'd like to take it for a test run please try it out and let us know what you think!

Thanks!