[Examples] add React

[afrokick]

I want to add React example.

• [x] use React 18, React DOM
• [ ] use react-meteor-data (blocked by https://github.com/Akryum/meteor-vite/issues/2)
• [x] use ostrio:flow-router-extra for routing (blocked by https://github.com/Akryum/meteor-vite/issues/3)

[afrokick]

Seems like Meter bundler replace : to _ like ostrio:flow-router-extra.js -> ostrio_flow-router-extra.js @Akryum

[afrokick]

Another problem is meteor package with lazy:true

https://github.com/meteor/react-packages/blob/master/packages/react-meteor-data/package.js#L17

Meteor build it with this content output in web.browser/packages/react-meteor-data.js:

(function () {

/* Exports */
Package._define("react-meteor-data");

})();

[afrokick]

Fixed : -> _ issue on https://github.com/Akryum/meteor-vite/blob/main/packages/vite-bundler/worker-dev.mjs#L19

by adding another one .replace(':','_') after existing replace. But IDK if it a good fix.

[Akryum]

Could you try again with 0.1.4?

[afrokick]

Thanks, it works.

Any idea how to fix #2 ?

[Grubba27]

Hey @afrokick what was the issue that you found to use react-meteor-data? I got excited about the react 18 part :)

[afrokick]

@Grubba27 just checked and it doesn't work.

@Akryum I added console.log before this line https://github.com/Akryum/meteor-vite/blob/main/packages/vite-bundler/worker-dev.mjs#L102 and it prints(meteor npm run dev and open browser tab):

 {
   packageName: 'mongo',
   hasModuleExports: true,
   moduleExports: '  LocalCollectionDriver: () => LocalCollectionDriver\n',
   id: 'meteor/mongo'
 }
 {
   packageName: undefined,
   hasModuleExports: true,
   moduleExports: undefined, // <-- Why it is undefined while hasModuleExports: true ?
   id: 'meteor/react-meteor-data'
 }

It brings an error

11:30:09 AM [vite] Internal server error: Cannot read property 'split' of undefined

file:///Users/USER/git/meteor-vite/examples/react/.meteor/local/build/programs/server/assets/packages/vite_bundler/worker-dev.mjs:103:44

When I call meteor npm run build:

⚡️ Building with Vite...
'useTracker' is not exported by meteor/react-meteor-data, imported by imports/ui/Home.tsx
file: /Users/USER/git/meteor-vite/examples/react/imports/ui/Home.tsx:2:9
1: import { LinksCollection } from '../api/links';
2: import { useTracker } from "meteor/react-meteor-data";

You can try my fork https://github.com/afrokick/meteor-vite to reproduce it

[gunnartorfis]

@afrokick is there anything I can do to help this get merged? 😄

[henriquealbert]

I got the same error when trying to create an example with Preact The requested module '/@id/__x00__meteor/react-meteor-data' does not provide an export named 'useTracker'

I've created a PR to fix this issue on react-meteor-data

EDIT: The issue persists, I think the problem is related to vite:bundler then

[henriquealbert]

I was able to fix the issue mentioned by @afrokick But I got another one when trying to integrate Vite + React:

Uncaught Error: @vitejs/plugin-react can't detect preamble. Something is wrong. See https://github.com/vitejs/vite-plugin-react/pull/11#discussion_r430879201
    at Hello.jsx:6:11

The workaround to make it work was to disable fastRefresh https://github.com/henriquealbert/meteor-vite-react/blob/main/vite.config.js#L6

[red-meadow]

Problems with react-meteor-data are probably caused by #21 . If you fork react-meteor-data and add the line export const A = 'A', it works.

[red-meadow]

The issue seems to be fixed by #30 .

[Akryum]

We now have a React example