Search code examples
javascriptreactjswebpackcss-modulescode-splitting

dynamic import() not loading CSS Modules


I'm trying to add a dynamic import() to my React component, and their working fine. Except for one huge detail: only the JavaScript is being loaded but the CSS, provided by CSS Modules, aren't.

Here's the code:

import React, { Component } from "react";
import { BrowserRouter as Router, Route } from "react-router-dom";

class Routes extends Component {
  constructor(props) {
    super(props);

    this.state = {
      home: null
    };
  }

  componentDidMount() {
    import("../home/Home").then(Home => this.setState({ home: Home.default }));
  }

  render() {
    return (
      <Router>
        <div>
          <Route exact path="/" component={this.state.home} />
        </div>
      </Router>
    );
  }
}

This is what should happen:

enter image description here

This is what is happening:

enter image description here

React: 15.5.4 Webpack: 2.5.1


Solution

  • Got it. I just had to pass allChunks: true to ExtractTextPlugin