[react-renderer] `npm run dev` with vite error `Internal server error: module is not defined`

iflamed commented 4 months ago

I'm trying to use honojs with react on cloudflare-pages. After install the npm i @hono/react-renderer package and update tsconfig.json to react as below got an error.

tsconfig.json file

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "Bundler",
    "strict": true,
    "lib": [
      "ESNext"
    ],
    "types": [
      "@cloudflare/workers-types",
      "vite/client"
    ],
    "jsx": "react-jsx",
    "jsxImportSource": "react"
  },
}

vite.config.ts file

import react from '@vitejs/plugin-react'
import build from '@hono/vite-cloudflare-pages'
import devServer from '@hono/vite-dev-server'
import adapter from '@hono/vite-dev-server/cloudflare'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    react(),
    build(),
    devServer({
      adapter,
      entry: 'src/index.tsx'
    })
  ]
})

renderer.tsx file

import { reactRenderer } from '@hono/react-renderer'

export const renderer = reactRenderer(({ children, title }) => {
  return (
    <html>
      <head>
        <link href="/static/style.css" rel="stylesheet" />
        <title>{title}</title>
      </head>
      <body>{children}</body>
    </html>
  )
})

Node version: v21.7.1

The error information after I run npm run dev:

5:03:35 PM [vite] Error when evaluating SSR module src/index.tsx: failed to import "/node_modules/react/jsx-dev-runtime.js"
|- ReferenceError: module is not defined
    at eval (/Users/admin/Documents/project/memsight/node_modules/react/jsx-dev-runtime.js:8:3)
    at instantiateModule (file:///Users/admin/Documents/project/memsight/node_modules/vite/dist/node/chunks/dep-DkOS1hkm.js:55036:15)

5:03:35 PM [vite] Internal server error: module is not defined

yusukebe commented 4 months ago

Hi @iflamed

Try:

export default defineConfig({
  ssr: {
    external: ['react', 'react-dom'] // <== add
  },
  plugins: [
    react(),
    build(),
    devServer({
      adapter,
      entry: 'src/index.tsx'
    })
  ]
})

iflamed commented 4 months ago

Hi @iflamed

Try:

export default defineConfig({
  ssr: {
    external: ['react', 'react-dom'] // <== add
  },
  plugins: [
    react(),
    build(),
    devServer({
      adapter,
      entry: 'src/index.tsx'
    })
  ]
})

It works.

We should write this code in documents. Which place I should write it to?

yusukebe commented 4 months ago

It works.

Great.

We should write this code in documents. Which place I should write it to?

I think here is good:

https://github.com/honojs/middleware/blob/main/packages/react-renderer/README.md

honojs / middleware

[react-renderer] `npm run dev` with vite error `Internal server error: module is not defined` #467