didierfranc/react-code-splitting

Not loading CSS propertly

matheusml opened this issue · 2 comments

I'm using this plugin, exactly like in the docs, to setup route-based code-splitting:

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

import Article from "../article/Article";

const Home = () => <Async load={import("../home/Home")} />;

const Routes = () => (
  <Router>
    <div>
      <Route exact path="/" component={Home} />
    </div>
  </Router>
);

export default Routes;

But for some reason, the CSS aren't loading propertly.
Btw, I'm using CSS Modules.

This is using the plugin:

This is without the plugin:

Hi, you should try to add componentProps to pass down your props, it's needed for styled-components and others

https://github.com/didierfranc/react-code-splitting#with-code-splitting

I found the solution, it have nothing to do with this lib.
I simply had to put allChunks: true on ExtractTextPlugin.