Hono•3w ago

@vitejs/plugin-react can't detect preamble

i'm trying to get a basic hono/react project working, and i get the above error on the client. i'm working from the following example repo, but i'm modifying it for bun: https://github.com/yusukebe/hono-vite-react-stack/tree/main/examples/basic i know i came across a note about this somewhere, but i can't find it now. the issue linked to by the error isn't especially helpful (for me), and at a glance it appears resolved: https://github.com/vitejs/vite-plugin-react/issues/11#discussion_r430879201

14 Replies

ambergristleOP•3w ago

ah yeah, this is where it was: https://www.npmjs.com/package/@vitejs/plugin-react#middleware-mode to the best of my understanding, the issue is that since hono is doing some of the ssr, vite isn't able to apply the transformations it needs to

atoko•3w ago

@ambergristle post the error pls

ambergristleOP•3w ago

Sorry for the confusion, the error is the post name @vitejs/plugin-react can't detect preamble. Something is wrong.

atoko•3w ago

vite config?

atoko•3w ago

Check default configs for hono-react: https://github.com/yusukebe/hono-vite-react-stack/blob/937d2436c9bcbaef6e47cc6489cc6d86e7e94e13/src/plugin.ts#L16

GitHub

hono-vite-react-stack/src/plugin.ts at 937d2436c9bcbaef6e47cc6489cc...

Vite plugin for Hono and React on Cloudflare Workers - yusukebe/hono-vite-react-stack

atoko•3w ago

Usually stuff like this is a mismatch input/entry IMO and finally have you tried node?

ambergristleOP•3w ago

https://github.com/ambergristle/hono-react/blob/main/vite.config.ts

import { defineConfig } from 'vite';
import build from '@hono/vite-build/bun';
import devServer from '@hono/vite-dev-server';
import bunAdapter from '@hono/vite-dev-server/bun';
import react from '@vitejs/plugin-react';
import ssrHotReload from 'vite-plugin-ssr-hot-reload';

export default defineConfig({
  ssr: {
    external: ['react', 'react-dom'],
  },
  plugins: [
    devServer({
      adapter: bunAdapter,
      entry: 'src/server/index.tsx',
    }),
    react(),
  ],
});

import { defineConfig } from 'vite';
import build from '@hono/vite-build/bun';
import devServer from '@hono/vite-dev-server';
import bunAdapter from '@hono/vite-dev-server/bun';
import react from '@vitejs/plugin-react';
import ssrHotReload from 'vite-plugin-ssr-hot-reload';

export default defineConfig({
  ssr: {
    external: ['react', 'react-dom'],
  },
  plugins: [
    devServer({
      adapter: bunAdapter,
      entry: 'src/server/index.tsx',
    }),
    react(),
  ],
});

i'm using that as a reference, so my implementation is as close as i can get w bun, i think not yet. i can though

atoko•3w ago

Thats the base react plugin :nerdsmiley: Try importing Yusuke’s plugin, i believe it also includes hot reload ‘hono-vite-react-stack’

ambergristleOP•3w ago

i'm using bun, so i can't use the actual hono-vite-react-stack plugin my implementation is (a really simplified) copy+paste though, swapping the cloudflare stuff for bun stuff just added the hot reload plugin. same error

atoko•3w ago

Oh, its missing some of the config though :popcorngif:

atoko•3w ago

ambergristleOP•3w ago

for now i'm just running the dev server though, so env.command === 'build' should always be false, right? interesting. problem solved i had been avoiding this because it felt inelegant + deviates from the implementation in hono-vite-react-stack i had to load this script at the top:

import RefreshRuntime from 'http://localhost:5173/@react-refresh'
RefreshRuntime.injectIntoGlobalHook(window)
window.$RefreshReg$ = () => {}
window.$RefreshSig$ = () => (type) => type
window.__vite_plugin_react_preamble_installed__ = true

import RefreshRuntime from 'http://localhost:5173/@react-refresh'
RefreshRuntime.injectIntoGlobalHook(window)
window.$RefreshReg$ = () => {}
window.$RefreshSig$ = () => (type) => type
window.__vite_plugin_react_preamble_installed__ = true

for more info: https://vite.dev/guide/backend-integration.html

atoko•3w ago

I might be wrong but serve might still call build to create the bundle 🤷‍♂️. Glad you found it

ambergristleOP•7d ago

just checked. looks like it's just serve looks like there's an open issue, but not necessarily a lot of engagement: https://github.com/honojs/vite-plugins/issues/141 most devs might just be serving a static index.html through vite, which probably avoids this issue for future reference, vite-plugin-ssr-hot-reload should be injecting this script. https://github.com/yusukebe/vite-plugin-ssr-hot-reload/tree/main?tab=readme-ov-file#injectreactrefresh not sure what's going on (at least on bun), but i'm looking into it calling ssrHotReload before devServer resolved the issue. still looking into why: https://github.com/honojs/vite-plugins/issues/141#issuecomment-2789840039

Gaming

Programming

@vitejs/plugin-react can't detect preamble

Did you find this page helpful?