Build break by missing file or directory react/jsx-runtime?inside-island

[jonasnobile]

What version of HonoX are you using?

0.1.14

What steps can reproduce the bug?

• use React renderer
• have some inside islands
• run build

vite.config.js

import pages from '@hono/vite-cloudflare-pages'
import honox from 'honox/vite'
import client from 'honox/vite/client'
import { defineConfig } from 'vite'

export default defineConfig(({ mode }) => {
	if (mode === 'client') {
		return {
			build: {
				rollupOptions: {
					input: ['./app/client.ts', './app/style.css'],
					output: {
						entryFileNames: 'static/client.js',
						chunkFileNames: 'static/assets/[name]-[hash].js',
						assetFileNames: 'static/assets/[name].[ext]',
					},
				},
				emptyOutDir: false,
			},
			plugins: [client()],
		}
	} else {
		return {
			ssr: {
				external: ['react', 'react-dom'],
			},
			plugins: [honox(), pages()],
		}
	}
})

What is the expected behavior?

Build application without error.

What do you see instead?

error during build:
Error: [vite:load-fallback] Could not load react/jsx-runtime?inside-island (imported by app/islands/episode-list.tsx): ENOENT: no such file or directory, open 'react/jsx-runtime?inside-island'

Additional information

No response

[yusukebe]

Hi @jonasnobile

This is fixed with the new version 0.1.15. Try it!

And if you want to build React, you have to specify jsxImportSource like the following:

export default defineConfig(({ mode }) => {
  if (mode === 'client') {
    return {
      // ...
      plugins: [
        client({
          jsxImportSource: 'react', // <--- Add
        }),
      ],
    }
  } else {
    return {
      ssr: {
        external: ['react', 'react-dom'],
      },
      plugins: [honox(), pages()],
    }
  }
})