React-calendar-timeline: Build Issue with Webpack

[sjarseneault]

Hello,

I'm running into this issue whenever I run my web pack build script:

ERROR in ./node_modules/react-calendar-timeline/src/lib/Timeline.js
Module parse failed: Unexpected token (83: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,
@ ./node_modules/react-calendar-timeline/src/index.js 1:0-37
@ multi classnames interact.js jquery lodash moment react react-bootstrap react-bootstrap-typeahead react-calendar-timeline react-datepicker react-dom react-hot-loader react-notification-system react-onclickoutside react-redux react-redux-toastr react-router react-router-bootstrap react-select react-telephone-input redux redux-actions redux-logger redux-thunk toastrv

After sifting through the prior issues it seems closely related to 134. However, I tried everything mariusandra suggested.

Here is what my .babelrc looks like:
{ "presets": [ "env", "react", "es2015", "stage-0" ], "plugins": [ "transform-class-properties", "react-hot-loader/babel", "transform-object-rest-spread" ] }

Here's what is in my webpack.build.js file:
test: /\.js$/, exclude: /node_modules(?!\/react-calendar-timeline)/, loader: 'babel-loader', options: { "presets": [ "env", "react", "es2015", "stage-0" ] },

I tried both stage-0 and stage-2 presets. I'm running the latest version of react-calendar-timeline (0.15.9), webpack version 3.10.0, and I've updated to the latest version of react, react-dom, moment, and interact.js.

Also I've tried using this switching to the lib import statement > importTimeline from 'react-calendar-timeline/lib' but with no luck. Any ideas?

Aside from this issue great package!

Thank you,

[mcMickJuice]

How are you handling your styles? Look to this issue to see if it fixes it:

https://github.com/namespace-ee/react-calendar-timeline/issues/72

You might need to configure how you handle styles. Hopefully this helps. This is a major pain point in this library because the timeline.js imports the css in the file. That import should be something that the user code does, not the library.

[sjarseneault]

I'm already using both the style-loader and css-loader. I went ahead and updated to the latest, but still no luck.

[mcMickJuice]

What happens when you remove the options object from the babel-loader config? It's possible that webpack is using that options object instead of your .babelrc.

So your loader config for babel in your webpack.config.js file should be

{ test: /\.js$/, 
  exclude: /node_modules(?!\/react-calendar-timeline)/, 
  loader: 'babel-loader', 
}

[sjarseneault]

I thought that was going to be it. I tried removing the options, but the error still persists.

Here is my module part of my webpack.build.js file which might reveal some clues:

`resolve: {
modules: [path.resolve(__dirname, "../../client"), "node_modules"],
extensions: ['.ts', '.tsx', '.js', '.jsx']
},

externals: {
'react': 'React',
'react-dom': 'ReactDOM',
'_': 'lodash'
},

module: {
noParse: [/^react$/, /^react-dom$/, /^lodash$/, /^jquery$/, /^moment$/, /^react-redux$/, /^redux$/],
loaders: [
{
test: /.ts(x?)$/,
exclude: /node_modules(?!/react-calendar-timeline)/,
include: [
path.resolve(root, 'client')
],
use: [
{
loader: 'cache-loader'
}, {
loader: 'thread-loader',
options: {
// there should be 1 cpu for the fork-ts-checker-webpack-plugin
// workers: require('os').cpus().length - 1,
workers: require('os').cpus().length - 1 // fastest build time for devServer: 3 threads; for production: 7 threads (os cpus minus 1)
}
}, {
loader: 'ts-loader',
options: {
// disable type checker - we will use it in fork plugin
transpileOnly: true,
happyPackMode: true
}
}
]
}, {
test: /.js$/,
exclude: /node_modules(?!/react-calendar-timeline)/,
loader: 'babel-loader',
}, {
test: /.css$/,
loader: 'style-loader!css-loader'
}, {
include: /.json$/,
loaders: [ 'json-loader' ]
}
]
},

plugins: pluginNameTuples.map(function(value, index, array) {
return value.plugin;
}).filter(function(value) { return value; }),`

[mcMickJuice]

Hm, thats a complicated webpack config :)

I'm sorry but I can't look through this config to see what you're doing wrong. This seems to be a problem with your combination of webpack + babel + typescript. What I'd suggest is starting small, create a simple app with the webpack and babel config outlined in the above mentioned issues to see if the Timeline bundles correctly.

[sjarseneault]

Just FYI for anyone reading this, I added the

 alias: {
            'react-calendar-timeline': 'react-calendar-timeline/lib',
        } 

to my resolve block again and it worked. I could have sworn I tried this multiple times....

Closing ticket.

[mcMickJuice]

thanks for providing that tip @sjarseneault !

[timoweiss]

@sjarseneault thanks for the pointer!

[ashinga48]

@sjarseneault thanks,
I'm using NextJS, so i tried this and it works

import TimelineCalendar from 'react-calendar-timeline/lib';

Saved hours for sure.