kriasoft / kriasoft/isomorphic-style-loader

TypeError: style._getCss is not a function

Open
#116 4 comments 1 reaction 0 assignees View on GitHub
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('')}


${html}


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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.