Adapting simpletasks example using meteor-vite: `@vitejs/plugin-react can't detect preamble.`

[nachocodoner]

Hi @JorgenVatle.

I have started to adapt the simpletasks example repository to use meteor-vite. For that I forked it https://github.com/nachocodoner/simpletasks-meteorvite, and adapt the vite.config.js as explained on the meteor-vite repository.

I am getting the next error after the proper npm install and npm start: Uncaught Error: @vitejs/plugin-react can't detect preamble. Something is wrong.. I am supposedly using the version of vite: vitejs/plugin-react (>=3.1.0) and vite (>=4.1.0) that supposedly must fix the problem.

Do you happen to know what could be causing this? Have you experienced this on using meteor-vite on react projects? If so, how did you fix it?

[nachocodoner]

Sorry, I was going to remove this issue until I try another thing, but I can't remove already createdgit issues by me on this repo.

I missed a comment https://github.com/vitejs/vite-plugin-react/issues/11#issuecomment-1336121334 that maybe give me the solution. That is not using export default and instead export using named modules.

Edit: I adapted the involved code and nothing.

[JorgenVatle]

Sorry I haven't had the chance to go through this yet. I suspect it might be caused by React being bundled by both Meteor and Vite. I'll try to follow up later in the week once I know more.

In the meantime, you could try replacing any references to the react-meteor-data Atmosphere package with our npm-published fork of the package, @meteor-vite/react-meteor-data, using npm over Atmosphere should help with React being bundled twice, and hopefully resolve the issue.

Using the fork, you can just remove the React imports from the meteorvite.js main module. Vite should gracefully handle the rest from there.

[nachocodoner]

Don't worry. I am also having other things to attend. But thank you I will try what you suggest.

[JorgenVatle]

Looking back at this, I think think the issue could've been as easy as just missing the preamble snippet in the client HTML. https://vitejs.dev/guide/backend-integration.html

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

The React example app has something similar added using a webapp boilerplate callback. https://github.com/JorgenVatle/meteor-vite/blob/9bf5672b0c2c75dcb194f1e2c6d0f226ffc9576b/examples/react/server/react-refresh.js#L4-L26