2 replies

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

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.

Workers, react-router 7, vite, and wasm

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

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.

Workers, react-router 7, vite, and wasm

Workers, react-router 7, vite, and wasm

Similar Threads

Similar Threads

Similar Threads