How do you use JSX in packages? [React]

I’m starting to use React, and I’d like to be able to drop JSX files into a package I’m writing. How do I get isobuild to run the JSX transformer each time my package gets built?

OK, I found https://github.com/meteor/meteor/blob/devel/tools/compiler.js

So it looks like I need to define a new source file handler that will handle JSX files. Is someone working on this already, or should I try to do it?

EDIT: oh, this should be easy! Just saw Package.registerBuildPlugin inside https://github.com/meteor/meteor/blob/devel/packages/coffeescript/package.js

There are even docs about this! http://docs.meteor.com/#/full/Package-registerBuildPlugin

1 Like

So it turns out that the react package already does this, and I got it to work! Awesome.

If you’re having this problem, make sure you have the right react package name in your api.use call, and you should be good to go!

also see

and others.

Wait what? Can you give an example of how you solved this?

Because I have the react in my ./meteor/packages list and
I am trying to write a JSX file in my package and the file won’t execute.

Package.onUse(function(api) {
api.versionsFrom(‘1.1.0.3’);
api.addFiles(‘reactjs-wizard.jsx’);
api.export(‘Wizard’);
});

Does nothing, while:

Package.onUse(function(api) {
api.versionsFrom(‘1.1.0.3’);
api.addFiles(‘reactjs-wizard.js’);
api.export(‘Wizard’);
});

Works fine.

Hi,

I think its important to mention that the package.js file have an api.use(‘react’) in the onUse method:

Package.onUse(function(api) {
api.versionsFrom(‘1.1.0.3’);
api.use(‘react’);
api.addFiles(‘reactjs-wizard.jsx’);
api.export(‘Wizard’);
});

Is what worked for me.

Thank you.

This is how all Meteor packages work - a package only gets to use something if it has a direct dependency. There isn’t any case where a package can use packages included in the app.

I ended up doing

Package.onUse(function (api) {
  api.versionsFrom('METEOR@1.1');
  api.use(['jquery', 'ecmascript'], ['client']);
  // Client
  api.addFiles('client.jsx', 'client');
  api.export('CopyText');
});

which works without registerBuildPlugin (this was not working for me, and I spent time trying to figure out what argument I was supposed to pass it etc…)
Also for being able to export a class, I had to do that https://github.com/gsabran/meteor-copy-text/blob/master/client.jsx#L60. It seems that, similarly to what var, class doesn’t expose things to the global scope.

Is there a better way to do it?

1 Like