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

[XOneto9]

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

[tstirrat15]

What version of React are you using? I'm seeing a similar problem and wondering if it's related to changes in the React API.

[XOneto9]

@tstirrat15 hi, thanks to reply. Just I got a sample using create-react-app v2.1.5 and react is 16.8.4 version.

do you know what is something problem????

[tstirrat15]

@XOneto9 meaning you are seeing the same problem? Does it happen when you bring up your dev environment, or is it only specific to the production build?

Now I'm wondering if it's related to webpack and bundling. I've been having issues with the context API on react-redux, and there's an issue open here for that: https://github.com/reduxjs/react-redux/issues/1202

[tstirrat15]

Actually, looking at your code:

//...
          {
          test: /\.css$/, // Looking for CSS
          use: [
//...
import s from './App.scss'; // Looking for SCSS

If you want to use SCSS, you need to use a loader that can handle it, and you need to have a rule in your webpack configuration that loads it. It wouldn't surprise me if you were just getting an empty object with your current configuration.

[XOneto9]

@tstirrat15 oh, sorry, I skip to all of code because of lots of line.(the latest version of create-react-app is automatically applied scss) anyway, the issued problem is appeared dev mode and product build as well.

and, I'm not sure that the Webpack has some trouble. because I use create-react-app v2.1.5 and that the sample project is not modified just basic sample.

first time, I tried to isomorphic-syle-loader on the react app made by create-react-app, of cause not modified. but I have got a error which is above massage.

I had been followed Guide so, I inserted code webpack, component of App, babel. after then I get the error. that's it.

if you have a chance you can check the code using a create-react-app(latest version) and then eject project. that's same my test project.(not modified anything)

thanks!

[tstirrat15]

Do you have isomorphic-style-loader in the loader chain for scss files?

[mattdell]

I feel like I'm getting a similar error...

TypeError: Cannot read property 'apply' of null
new WithStyles
node_modules/isomorphic-style-loader/withStyles.js:28
  25 | 
  26 |   _this = _React$PureComponent.call(this, props, context) || this;
  27 |   debugger;
> 28 |   _this.removeCss = context.insertCss.apply(context, styles);
     | ^  29 |   return _this;
  30 | }
  31 | 

This is using CRA and replacing App.jsx and App.css with the examples provided in the readme along with the required webpack changes. My hunch is it is something with the React context API.

I'm on React 16.8.4 and isomorphic-style-loader 5.0.1

Any ideas?

[digz6666]

I feel like I'm getting a similar error...

TypeError: Cannot read property 'apply' of null
new WithStyles
node_modules/isomorphic-style-loader/withStyles.js:28
  25 | 
  26 |   _this = _React$PureComponent.call(this, props, context) || this;
  27 |   debugger;
> 28 |   _this.removeCss = context.insertCss.apply(context, styles);
     | ^  29 |   return _this;
  30 | }
  31 | 

This is using CRA and replacing App.jsx and App.css with the examples provided in the readme along with the required webpack changes. My hunch is it is something with the React context API.

I'm on React 16.8.4 and isomorphic-style-loader 5.0.1

Any ideas?

@mattdell Are you experiencing the issue on production? I'm having same issue with production and found a workaround. But its working fine on development version.

[digz6666]

Did you use following on the server side?

const css = new Set(); // CSS for all rendered React components
insertCss = (...styles) => styles.forEach(style => css.add(style._getCss()));

<StyleContext.Provider value={{ insertCss }}>

[tstirrat15]

One thing to check as well is that you're not getting multiple versions of React in your code bundle. This library bundles its own copy of react, and the new react context API depends on React being a singleton. There's some troubleshooting info here.

[xfz1987]

Did you use following on the server side?

const css = new Set(); // CSS for all rendered React components
insertCss = (...styles) => styles.forEach(style => css.add(style._getCss()));

<StyleContext.Provider value={{ insertCss }}>

I use, but same error

[xfz1987]

I use it for react ssr，first. on server render , I can get css，but on the client, it happens error:

[masihtamsoy]

Hi, how can this be resolved. Thoughts?

[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

[wxGoldking]

I met the error, too. You can solve it by use isomorphic-style-loade for client render instead of style-loader.

[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]",
              },
            },
          },
        ],
      },
    ],