I get a 'style._insertCss' is not a function error

Hi, I use react to test with create-react-app v2.1.5 For serverside rendering with scss, css styles.

the app is applied to basic sample on create-react-app. just eject and add code on the Webpack

rules: [
          {
          test: /\.css$/,
          use: [
            'isomorphic-style-loader',
            {
              loader: 'css-loader',
              options: {
                importLoaders: 1
              }
            },
            'postcss-loader'
          ]
        },
///************more code****************///

also App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import s from './App.scss';
import withStyles from 'isomorphic-style-loader/withStyles'


class App extends Component {
  render() {
    return (
      <div className={s.App}>
        <header className={s.Appheader}>
          <img src={logo} className={s.Applogo} alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className={s.Applink}
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
}

export default withStyles(s)(App);

finally Index.js

import React from 'react';
import ReactDOM from 'react-dom';
// import './index.css';
import StyleContext from 'isomorphic-style-loader/StyleContext'
import App from './App';
import * as serviceWorker from './serviceWorker';

const insertCss = (...styles) => {
  const removeCss = styles.map(style => style._insertCss())
  return () => removeCss.forEach(dispose => dispose())
}

ReactDOM.hydrate(
  <StyleContext.Provider value={{ insertCss }}>
    <App />,
  </StyleContext.Provider>,
  document.getElementById('root')
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();

that’s it, What is miss ? could you please let me know what I miss. thanks

[VeXell]

You have this problem because you did not add isomorphic-style-loader to your webpack client build. 1. You should eject your app and update config or 2. install react-app-rewired and add additional config for css or scss rules.

You can play with it here https://github.com/VeXell/ssr/tree/created_with_react_scripts

[niaogege]

Client needs to be configured，reference resources

  rules: [
      {
        test: /\.css?$/,
        use: [
          "isomorphic-style-loader",
          {
            loader: "css-loader",
            options: {
              importLoaders: 1,
              esModule: false, // !!!important
              modules: {
                localIdentName: "[name]__[local]___[hash:base64:5]",
              },
            },
          },
        ],
      },
    ],