facebookarchive / react-meteor

React rendering for Meteor apps
948 stars 114 forks source link

How to build a Meteor package that uses react-meteor? #40

Closed ccorcos closed 9 years ago

ccorcos commented 9 years ago

I want to create a package that wraps this:

https://github.com/signalzwei/react-ionic/tree/master/src/js

Suppose I add all those jsx files. How will the meteor package system handle all the require, etc.

benjamn commented 9 years ago

You can create a new Meteor package with

meteor create --package react-ionic
cd react-ionic
cat package.js

The contents of package.js will look something like this:

Package.describe({
  name: 'react-ionic',
  version: '0.0.1',
  // Brief, one-line summary of the package.
  summary: '',
  // URL to the Git repository containing the source code for this package.
  git: '',
  // By default, Meteor will default to using README.md for documentation.
  // To avoid submitting documentation, set this field to null.
  documentation: 'README.md'
});

Package.onUse(function(api) {
//  api.versionsFrom('1.0.3.2');
  api.addFiles('react-ionic.js');
});

Package.onTest(function(api) {
  api.use('tinytest');
  api.use('react-ionic');
  api.addFiles('react-ionic-tests.js');
});

In the Package.onUse callback, you should add an api.addFiles line for each of your .jsx files (and make sure to move them into the package directory), and also include api.use("reactjs:react"); to depend on this package.

These instructions are fairly sketchy, so let me know if you hit any snags!

ccorcos commented 9 years ago

This worked just fine. I didnt realize I could add jsx files that easily

rashmimhatre100 commented 6 years ago

Hello,

My package.js looks like

Package.describe({ name: 'iassureit:react-user-management', version: '0.0.1', // Brief, one-line summary of the package. summary: '', // URL to the Git repository containing the source code for this package. git: '', // By default, Meteor will default to using README.md for documentation. // To avoid submitting documentation, set this field to null. documentation: 'README.md' });

Package.onUse(function(api) { api.versionsFrom('1.5'); api.use('ecmascript');

api.use('twbs:bootstrap'); api.use('mizzao:user-status'); api.use('momentjs:moment'); api.use('alanning:roles'); api.use('accounts-password'); api.use('accounts-base'); api.use('patrickml:swal'); api.use('session'); api.use('kadira:flow-router'); api.use('kadira:blaze-layout'); api.use('email'); api.use('themeteorchef:bert'); api.use('reactjs:react');

api.mainModule('react-user-management.js');

api.use('templating','client'); api.use(['kadira:flow-router', 'templating'], 'client'); // api.addFiles('router/react-um-router.jsx', 'client'); });

Package.onTest(function(api) { api.use('ecmascript'); api.use('tinytest'); api.use('iassureit:react-user-management'); api.mainModule('react-user-management-tests.js'); });

But, I am getting following error on my command prompt: iassureit@iassureit-01:/var/meteor/rrn$ meteor add iassureit:react-user-management /home/iassureit/.meteor/packages/meteor-tool/.1.5.0.1205e35++os.linux.x86_64+web.browser+web.cordova/mt-os.linux.x86_64/dev_bundle/lib/node_modules/meteor-promise/promise_server.js:218 throw error; ^

TypeError: Cannot read property 'displayName' of undefined at SourceProcessorSet.addLegacyHandler (/tools/isobuild/build-plugin.js:142:27) at /tools/isobuild/build-plugin.js:172:12 at Function..each..forEach (/home/iassureit/.meteor/packages/meteor-tool/.1.5.0.1205e35++os.linux.x86_64+web.browser+web.cordova/mt-os.linux.x86_64/dev_bundle/lib/nodemodules/underscore/underscore.js:87:22) at SourceProcessorSet.merge (/tools/isobuild/build-plugin.js:170:7) at /tools/isobuild/compiler.js:385:26 at Array.forEach (native) at /tools/isobuild/compiler.js:381:26 at /tools/utils/buildmessage.js:359:18 at [object Object]..extend.withValue (/tools/utils/fiber-helpers.js:89:14) at /tools/utils/buildmessage.js:352:34 at [object Object]..extend.withValue (/tools/utils/fiber-helpers.js:89:14) at /tools/utils/buildmessage.js:350:23 at [object Object]..extend.withValue (/tools/utils/fiber-helpers.js:89:14) at Object.enterJob (/tools/utils/buildmessage.js:324:26) at /tools/isobuild/compiler.js:377:16 at /tools/isobuild/compiler.js:184:28 at Object.withCache (/tools/fs/files.js:1652:12) at /tools/isobuild/compiler.js:183:11 at Array.forEach (native) at Function..each..forEach (/home/iassureit/.meteor/packages/meteor-tool/.1.5.0.1205e35++os.linux.x86_64+web.browser+web.cordova/mt-os.linux.x86_64/dev_bundle/lib/nodemodules/underscore/underscore.js:79:11) at Object.compile (/tools/isobuild/compiler.js:178:5) at /tools/isobuild/isopack-cache.js:362:30 at /tools/utils/buildmessage.js:359:18 at [object Object]..extend.withValue (/tools/utils/fiber-helpers.js:89:14) at /tools/utils/buildmessage.js:352:34 at [object Object]..extend.withValue (/tools/utils/fiber-helpers.js:89:14) at /tools/utils/buildmessage.js:350:23 at [object Object]..extend.withValue (/tools/utils/fiber-helpers.js:89:14) at Object.enterJob (/tools/utils/buildmessage.js:324:26) at IsopackCache.loadLocalPackage (/tools/isobuild/isopack-cache.js:317:18) at /tools/isobuild/isopack-cache.js:251:16 at Function.time (/tools/tool-env/profile.js:305:10) at /tools/isobuild/isopack-cache.js:250:17 at /tools/utils/buildmessage.js:359:18 at [object Object]..extend.withValue (/tools/utils/fiber-helpers.js:89:14) at /tools/utils/buildmessage.js:352:34 at [object Object]..extend.withValue (/tools/utils/fiber-helpers.js:89:14) at /tools/utils/buildmessage.js:350:23 at [object Object]..extend.withValue (/tools/utils/fiber-helpers.js:89:14) at Object.enterJob (/tools/utils/buildmessage.js:324:26) at IsopackCache.ensurePackageLoaded (/tools/isobuild/isopack-cache.js:241:20) at /tools/isobuild/isopack-cache.js:77:14 at /tools/packaging/package-map.js:57:7 at Function..each._.forEach (/home/iassureit/.meteor/packages/meteor-tool/.1.5.0.1205e35++os.linux.x86_64+web.browser+web.cordova/mt-os.linux.x86_64/dev_bundle/lib/nodemodules/underscore/underscore.js:87:22) at [object Object]..extend.eachPackage (/tools/packaging/package-map.js:49:7) at IsopackCache.buildLocalPackages (/tools/isobuild/isopack-cache.js:76:24) at /tools/project-context.js:841:25 at /tools/utils/buildmessage.js:359:18 at [object Object]..extend.withValue (/tools/utils/fiber-helpers.js:89:14) at /tools/utils/buildmessage.js:352:34 at [object Object]..extend.withValue (/tools/utils/fiber-helpers.js:89:14) at /tools/utils/buildmessage.js:350:23 at [object Object]._.extend.withValue (/tools/utils/fiber-helpers.js:89:14) at Object.enterJob (/tools/utils/buildmessage.js:324:26) at ProjectContext.buildLocalPackages (/tools/project-context.js:840:18) at /tools/project-context.js:283:9 at /tools/utils/buildmessage.js:359:18 at [object Object]..extend.withValue (/tools/utils/fiber-helpers.js:89:14) at /tools/utils/buildmessage.js:352:34 at [object Object]..extend.withValue (/tools/utils/fiber-helpers.js:89:14) at /tools/utils/buildmessage.js:350:23 at [object Object]..extend.withValue (/tools/utils/fiber-helpers.js:89:14) at Object.enterJob (/tools/utils/buildmessage.js:324:26) at ProjectContext._.extend.completeStagesThrough (/tools/project-context.js:273:18) at /tools/project-context.js:265:12 at Function.run (/tools/tool-env/profile.js:490:12) at ProjectContext..extend.prepareProjectForBuild (/tools/project-context.js:264:13) at /tools/cli/commands-packages.js:2073:20 at /tools/utils/buildmessage.js:271:13 at [object Object]..extend.withValue (/tools/utils/fiber-helpers.js:89:14) at /tools/utils/buildmessage.js:264:29 at [object Object]..extend.withValue (/tools/utils/fiber-helpers.js:89:14) at /tools/utils/buildmessage.js:262:18 at [object Object]..extend.withValue (/tools/utils/fiber-helpers.js:89:14) at /tools/utils/buildmessage.js:253:23 at [object Object]..extend.withValue (/tools/utils/fiber-helpers.js:89:14) at Object.capture (/tools/utils/buildmessage.js:252:19) at Command.func (/tools/cli/commands-packages.js:2072:27) at /tools/cli/main.js:1483:23 iassureit@iassureit-01:/var/meteor/rrn$

Any idea why this error is coming? Any help is appreciated!

rashmimhatre100 commented 6 years ago

Issue solve!. If one is having react in main app then do not use api.use("reactjs:react") in atmosphere/local package; Only one copy of React should be there.

As per documents:

Using React in Atmosphere Packages If you are writing an Atmosphere package and want to depend on React or an npm package that itself depends on React, you can’t use Npm.depends() and Npm.require(), as this will result in 2 copies of React being installed into the application (and besides Npm.require() only works on the server).

Instead, you need to ask your users to install the correct npm packages in the application itself. This will ensure that only one copy of React is shipped to the client and there are no version conflicts.

In order to check that a user has installed the correct versions of npm packages, you can use the tmeasday:check-npm-versions package to check dependency versions at runtime.