dynamic import() not loading CSS Modules

Question

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:

This is what is happening:

React: 15.5.4 Webpack: 2.5.1

Do you want to post a repro repo to exemplify the issue? It's hard to work off of what you have posted. — James Kraus
– James Kraus, Commented May 15, 2017 at 17:50
What does importing the component and setting state in CDM accomplish that using a regular import does not? — lux
– lux, Commented May 15, 2017 at 17:55

Matheus Lima · Accepted Answer · 2017-05-16 00:39:27Z

2

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

answered May 16, 2017 at 0:39

Matheus Lima

2,1433 gold badges33 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

dynamic import() not loading CSS Modules

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related