CD
Cloudflare Developers•2mo ago
superhighfives

Workers, react-router 7, vite, and wasm

I've been working on a blog that uses wasm for og:image generation and mdx for posts, all powered by workers. Been a lot of fun to noodle on, but I've found a strange bug that I'm trying to understand. If I try and prerender here, I get a wasm file error. 
import type { Config } from "@react-router/dev/config";
import { init } from "./app/lib/mdx-routes.js";

const mdx = init({ path: "posts" });

export default {
  ssr: true,
  routeDiscovery: { mode: "initial" },
  future: {
    unstable_viteEnvironmentApi: true,
  },
  async prerender() {
    return [...(await mdx.paths())];
  },
} satisfies Config;
import type { Config } from "@react-router/dev/config";
import { init } from "./app/lib/mdx-routes.js";

const mdx = init({ path: "posts" });

export default {
  ssr: true,
  routeDiscovery: { mode: "initial" },
  future: {
    unstable_viteEnvironmentApi: true,
  },
  async prerender() {
    return [...(await mdx.paths())];
  },
} satisfies Config;
And the error: 
TypeError: Cannot assign to read only property 'stack' of object 'TypeError: [react-router] Unknown file extension ".wasm" for /Users/superhighfives/Development/superhighfives/code/build/server/assets/resvg-Blvrv-U2.wasm'
    at enhanceRollupError (file:///Users/superhighfives/Development/superhighfives/code/node_modules/vite/dist/node/chunks/dep-DBxKXgDP.js:46084:15)
    at buildEnvironment (file:///Users/superhighfives/Development/superhighfives/code/node_modules/vite/dist/node/chunks/dep-DBxKXgDP.js:46219:5)
    at async Promise.all (index 0)
    at Object.buildApp (/Users/superhighfives/Development/superhighfives/code/node_modules/@react-router/dev/dist/vite.js:3108:17)
    at viteAppBuild (/Users/superhighfives/Development/superhighfives/code/node_modules/@react-router/dev/dist/cli/index.js:1824:3)
    at build (/Users/superhighfives/Development/superhighfives/code/node_modules/@react-router/dev/dist/cli/index.js:1765:10)
    at build2
...
TypeError: Cannot assign to read only property 'stack' of object 'TypeError: [react-router] Unknown file extension ".wasm" for /Users/superhighfives/Development/superhighfives/code/build/server/assets/resvg-Blvrv-U2.wasm'
    at enhanceRollupError (file:///Users/superhighfives/Development/superhighfives/code/node_modules/vite/dist/node/chunks/dep-DBxKXgDP.js:46084:15)
    at buildEnvironment (file:///Users/superhighfives/Development/superhighfives/code/node_modules/vite/dist/node/chunks/dep-DBxKXgDP.js:46219:5)
    at async Promise.all (index 0)
    at Object.buildApp (/Users/superhighfives/Development/superhighfives/code/node_modules/@react-router/dev/dist/vite.js:3108:17)
    at viteAppBuild (/Users/superhighfives/Development/superhighfives/code/node_modules/@react-router/dev/dist/cli/index.js:1824:3)
    at build (/Users/superhighfives/Development/superhighfives/code/node_modules/@react-router/dev/dist/cli/index.js:1765:10)
    at build2
...
It's almost like it's trying to prerender too aggressively, and sweeping up the wasm files in the process. I'd love to be able to do this, so curious if anyone has come across this before. The reproducable code is here: https://github.com/superhighfives/code/tree/toward-parity
GitHub
GitHub - superhighfives/code at toward-parity
Contribute to superhighfives/code development by creating an account on GitHub.
2 Replies
superhighfives
superhighfivesOP•2mo ago
(I cross-posted this in Vite and Remix. Wasn't sure where best to put it.)
superhighfives
superhighfivesOP•2mo ago
SPA mode and prerendering are not currently supported when using the Cloudflare Vite plugin. https://developers.cloudflare.com/workers/framework-guides/web-apps/react-router/ (TIL)
Cloudflare Docs
React Router (formerly Remix)
Create a React Router application and deploy it to Cloudflare Workers

Did you find this page helpful?