How to debug a webpacker CSS loading issue in a react component?

I've got a rails app with increasing amounts of react on the front-end (using the react-rails and webpacker gems). I'm in the process of moving away from JQuery-mobile look and feel.

I am trying to add fullcalendar using their (beta) react component (following their instructions) but I cannot seem to get any of the css to load/apply. I get the data displaying with the buttons, but no fullcalendar formatting/images. This is my code:

import React from "react"
import PropTypes from "prop-types"
import FullCalendar from '@fullcalendar/react'
import dayGridPlugin from '@fullcalendar/daygrid'
import listPlugin from '@fullcalendar/list'
import momentPlugin from '@fullcalendar/moment'

import '@fullcalendar/core/main.css'
import '@fullcalendar/daygrid/main.css';
import '@fullcalendar/list/main.css';

class CourseCalendar extends React.Component {
  render () {
    const header = {
      left: 'prev,next today',
      center: 'title',
      right: 'dayGridMonth, dayGridWeek, listMonth'

    return (
        plugins={[ dayGridPlugin, listPlugin ]}
          { title: 'event 1', allDay: true,
            start: '2019-04-22', end: '2019-4-22' },
          { title: 'event 2', allDay: true,
            start: '2019-04-25', end: '2019-4-30' }


I have not used import to bring in stylesheets before and I can't seem to figure out how to debug it.

  • How can I verify that these main.css files loaded?
  • How can I figure out if there are files that it wasn't able to load?
  • Do I need to explicitly install or configure a css-loader?
  • What am I missing?

1 answer

  • answered 2019-04-15 09:03 Mukesh Tivari

    You are making mistake with the path of css, please type it correctly.

    try this,

    import '~@fullcalendar/core/main.css';

    ~ is missing in your path so, webpack is not able find the css file.

    here, ~ means path to node_modules so, you can simply go to that path and see if file exist or not.

    see, the documentation here