kriasoft / kriasoft/isomorphic-style-loader
TypeError: style._getCss is not a function
- Dominant language
- JavaScript
- Stars
- 1.3k
- Forks
- 141
- PR merge metrics
- No merged PRs in 30d
Description
Hi,
I am building an isomorphic react-redux app on top of NodeJS. I am rendering my homePage from the server. However, my styles are not reflected in my rendered view. I am getting "TypeError: style._getCss is not a function on server.js:52:84". What did I miss?
Here are more details on the project.
.babelrc
```
{
"presets": [ "es2015", "react", "stage-0"],
"plugins": ["transform-decorators-legacy", ["transform-assets", {
"extensions": ["scss"],
"name": "[name].[ext]?[sha512:hash:base64:7]",
}]]
}
```
webpack.config.js
```
const path = require('path');
module.exports = [
{
name: 'client',
target: 'web',
entry: './routes/client.jsx',
output: {
path: path.join(__dirname, 'assets'),
filename: 'client.js',
publicPath: '/assets/',
},
resolve: {
extensions: ['.js', '.jsx']
},
devtool: 'source-map',
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /(node_modules\/)/,
use: [{ loader: 'babel-loader'}]
},
{
test: /\.scss$/,
use: [
{ loader: 'isomorphic-style-loader' },
{
loader: 'css-loader',
options: {
modules: true,
importLoaders: 1,
localIdentName: '[name]__[local]___[hash:base64:5]',
sourceMap: true
}
},
{ loader: 'sass-loader'}
]
}
],
},
}];
```
server.js
```
import express from 'express'
import React from 'react'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import MainStore from './views/store/MainStore'
import { StaticRouter } from 'react-router-dom';
import Routes from './routes/routes';
import Template from './views/templates/template';
import { Helmet } from 'react-helmet';
import { renderToString } from 'react-dom/server'
import ReactDOMServer from 'react-dom/server';
import ContextProvider from './routes/contextProvider'
const webpackDevMiddleware = require('webpack-dev-middleware')
const config = require('./webpack/webpack.development.config.js')
const webpack = require('webpack')
const app = express()
const port = 3000
const compiler = webpack(config);
let preloadedState = { shipper: {view: "from_server"} }
app.use('/assets', express.static('./assets'))
app.use(webpackDevMiddleware(compiler, {
publicPath: "/assets/",
}));
app.use(handleRender);
function handleRender(req, res) {
// Create a new Redux store instance
const store = createStore(MainStore, preloadedState)
const css = new Set(); // CSS for all rendered React components
const context = { insertCss: (...styles) => styles.forEach(style =>
css.add(style._getCss())) }
const html = renderToString(
)
const finalState = store.getState()
const helmet = Helmet.renderStatic();
const preloadedState = store.getState()
res.send(renderFullPage(html, preloadedState));
}
function renderFullPage(html, finalState) {
return `
Redux Universal Example
${[...css].join('')}
window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState).replace(/</g, '\\u003c')}
`
}
app.listen(port)
```
contextProvider.js
```
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Routes from './routes.jsx';
export default class ContextProvider extends Component {
static childContextTypes = {
insertCss: PropTypes.func,
}
getChildContext() {
return { ...this.props.context }
}
render() {
const { children, ...props } = this.props
return React.cloneElement(children, props)
}
}
```
Any suggestions on what I am missing here?
Contributor guide
Research direction
Start with server.js handleRender and the style loader chain in webpack.config.js, then trace the style object passed to context.insertCss. Reproduce the server-side render and inspect why the reported _getCss call fails. Done means the render completes without the TypeError and the collected styles are present in the response.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react, webpack
- Domain
- full-stack
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100