How to use react-pivot with Meteor

1

Hi meteor gurus, I’m fairly new to Meteor with React and I’m trying to incorporate the react-pivot package written by David Guttman. I’m using Meteor 1.5.1

I installed the react-pivot package using

meteor npm install --save react-pivot

Then in my App.jsx, I simply try to import it:

import ReactPivot from ‘react-pivot’;

This generates the following error in the browser console:

Uncaught SyntaxError: Unexpected token <

in modules.js line 1011.

When I drill down, I see that my browser is choking on the JSX syntax:

render: function () {
return (
<div className=‘reactPivot-columnControl’>
^-- fails here

I use the JSX syntax elsewhere in my React Meteor app without any issues.

Any ideas?

Thanks!

2

I haven’t tried this, so caveat emptor, but you should be able to use this:

import ReactPivot from 'react-pivot/dist/react-pivot-standalone-3.0.0.min.js';

The issue you’re seeing is that Meteor does not build the runnable code for packages in node_modules/ - it assumes the package’s build chain provides a route to clean, browser-compatible code, which isn’t the case here. The above import, while unpleasant, hooks into the output of the build-standalone script of that package - which should be clean, browser-compatible code and will hopefully get you going!