react-infinite-calendar not rendering properly about react-infinite-calendar HOT 6 CLOSED

You most likely forgot to import the styles or don't have the appropriate webpack loader. You need to make sure to import the default stylesheet:

 import 'react-infinite-calendar/styles.css';

from react-infinite-calendar.

Hi clauderic, thanks for the tip; I'm still having some trouble with including the .css file though. I added in import 'react-infinite-calendar/styles.css'; into the file and I get back a module parse failed error. I'm not sure what's wrong as my webpack css loader looks to match webpack's recommended layout. I also tried require('react-infinite-calendar/styles.css') and require('css!react-infinite-calendar/styles.css') to no avail. I was wondering whether you could help take a look at my webpack config and file (included below):

webpack.config.js

`var HtmlWebpackPlugin = require('html-webpack-plugin');
var path = require('path');
var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
template: path.join(__dirname, '/app/index.html'),
filename: 'index.html',
inject: 'body',
});

module.exports = {
entry: [
'./app/index.js',
],
output: {
path: path.join(__dirname, '/dist'),
filename: 'index_bundle.js',
},
module: {
loaders: [
{
test: /.js$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['react', 'es2015'],
},
},
{
test: /.css$/,
loader: 'style-loader!css-loader',
},
],
},

plugins: [
    HtmlWebpackPluginConfig,

],

};
`

file.js

`const React = require('react');
const TraveltileSubcardDialogWrapper = require('./TraveltileSubcardDialogWrapper');
const PropTypes = React.PropTypes;

import InfiniteCalendar from 'react-infinite-calendar';
import 'react-infinite-calendar/styles.css';

const TraveltileSubcardDialogItinerary = React.createClass({
propTypes: {
onCloseDialog: PropTypes.func.isRequired,
},
_handlePickDate(date) {
alert(date);
},
render() {
// TODO: need to fix problems in render function of TraveltileSubcardDialogItinerary that prevent BigCalendar from rendering properly.
return (
<TraveltileSubcardDialogWrapper
title = {"Itinerary"}
onCloseDialog = {this.props.onCloseDialog}>


);
},
});

module.exports = TraveltileSubcardDialogItinerary;
`

from react-infinite-calendar.

Never mind it works! +1

from react-infinite-calendar.

I believe you were missing style-loader. Glad you got it to work 👍

from react-infinite-calendar.

I have the same issue, how did you get it to work?

from react-infinite-calendar.

I don't remember at all, but I think it was something to do with installing the proper loaders. One thing I didn't notice immediately in Webpack was that you need to call the loaders in the proper order, i.e. 'style-loader', 'css-loader' is not the same as 'css-loader', 'style-loader'.

from react-infinite-calendar.