React-calendar-timeline: Does not build with create-react-app

[marwej]

I use react-calendar-timeline together with create-react-app but 0.15.0 don't build:

./~/react-calendar-timeline/src/lib/Timeline.js
Module parse failed: .../node_modules/react-calendar-timeline/src/lib/Timeline.js Unexpected token (73:19)
You may need an appropriate loader to handle this file type.
| 
| export default class ReactCalendarTimeline extends Component {
|   static propTypes = {
|     groups: PropTypes.oneOfType([PropTypes.array, PropTypes.object]).isRequired,
|     items: PropTypes.oneOfType([PropTypes.array, PropTypes.object]).isRequired,

I don't want to eject my projects to include more loaders in the build process which makes it impossible to use this version.

(Thanks for a great product, by the way!)

[mariusandra]

Hi, the problem is closely connected to this point in the readme.

The issue is that your app need to have babel-plugin-transform-class-properties enabled. While we ship transpiled ES5 code with the module, webpack 2+ uses the original ESnext code by default, which needs this plugin.

So there are two options: use the transpiled code or install the plugin.

1) To use the transpiled code, simply switch your include statement to this:

// import Timeline from 'react-calendar-timeline' // old
import Timeline from 'react-calendar-timeline/lib' // new

This path may change in the future, so pay attention to the changelog when upgrading!

2) Install the babel plugin... or at least all stage-2 plugins (or even stage-0). It's probably easiest to install custom-react-scripts

yarn add custom-react-scripts
yarn remove react-scripts

Then add this line to a file called .env:

REACT_APP_BABEL_STAGE_0=true

Then you may import the component like you would normally

import Timeline from 'react-calendar-timeline'

[p-glynn]

Using custom-react-scripts worked great for me when i was running into this same issue using webpack 2+. Thanks so much!!