[solved] How to compile jsx in an npm package?

help
1

Hello again Meteor people,

I’m trying to create a single NPM module that contains both Meteor server-side and client-side artifacts. The client-side stuff uses React.

I’m not sure if it is advisable or even possible.

If I do …

cd node_modules
meteor npm link ../.pkgs/my_pkg

… I get this error …

    SyntaxError: src/client/components/_collection.jsx: Unexpected token (4:2)
      2 | 
      3 | export default ({collection}) => (
    > 4 |   <div>
        |   ^
      5 |     <h3>Widgets list</h3>
      6 |     <ul data-cuke="items-list">
      7 |       {collection.map(record => (

Where can I learn about the right way to do this? How many right ways are there?

Does there exist a tutorial or example I can work from?

2

So I kept Googling around and solved it on my own.

Originally, I had based the package on kadirahq / npm-base, unaware that it was server-side only.

So, I found this blog post Publishing React component in NPM, and realized I had everything I needed except the React preset. I got it to work by:

1/ adding React to my .babelrc

{
    "presets": [ "es2015", "stage-2", "react"]
}

2/ including babel-preset-react in my package.json

npm install babel-preset-react --save-dev
1 Like