Cloudflare Developers•2h ago

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

Gaming

Programming

Workers, react-router 7, vite, and wasm

Did you find this page helpful?