Hono•4mo ago

Using HonoX with React and react-three-fiber

Hey all, I think I may be attempting something a little too tricky. I'm trying to make a HonoX project with a client-only island that uses react-three-fiber. A base install gives this error when hitting the page:

module is not defined
    at eval (/Users/alexturpin/src/project/node_modules/react-reconciler/constants.js:8:3)
    at instantiateModule (file:///Users/alexturpin/src/project/node_modules/vite/dist/node/chunks/dep-mCdpKltl.js:52650:11

module is not defined
    at eval (/Users/alexturpin/src/project/node_modules/react-reconciler/constants.js:8:3)
    at instantiateModule (file:///Users/alexturpin/src/project/node_modules/vite/dist/node/chunks/dep-mCdpKltl.js:52650:11

Adding @react-three/fiber to ssr.external however then results in:

[vite] Error when evaluating SSR module /node_modules/honox/dist/server/index.js: failed to import "@react-three/fiber"
|- /Users/alexturpin/src/project/node_modules/@react-three/fiber/dist/react-three-fiber.esm.js:1
import { c as createEvents, e as extend, u as useMutableCallback, a as useIsomorphicLayoutEffect, b as createRoot, i as isRef, E as ErrorBoundary, B as Block, d as unmountComponentAtNode } from './index-99983b2d.esm.js';
^^^^^^

SyntaxError: Cannot use import statement outside a module

[vite] Error when evaluating SSR module /node_modules/honox/dist/server/index.js: failed to import "@react-three/fiber"
|- /Users/alexturpin/src/project/node_modules/@react-three/fiber/dist/react-three-fiber.esm.js:1
import { c as createEvents, e as extend, u as useMutableCallback, a as useIsomorphicLayoutEffect, b as createRoot, i as isRef, E as ErrorBoundary, B as Block, d as unmountComponentAtNode } from './index-99983b2d.esm.js';
^^^^^^

SyntaxError: Cannot use import statement outside a module

Seems like either won't work, anyone has an idea?

1 Reply

Ross Robino•4mo ago

Looks like an esm/cjs error perhaps? Is type module in your package.json?

Gaming

Programming

Using HonoX with React and react-three-fiber