H
Hono•5mo ago
xeon06

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
Ross Robino•5mo ago
Looks like an esm/cjs error perhaps? Is type module in your package.json?

Did you find this page helpful?