isomorphic-style-loader: 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
About this issue
- Original URL
- State: open
- Created 5 years ago
- Comments: 16 (5 by maintainers)
Client needs to be configured,reference resources
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
I use it for react ssr,first. on server render , I can get css,but on the client, it happens error: