TypeError: style._getCss is not a function

[yellowbeee]

I use koa for react ssr
when I use css-modules-require-hook and import style from './styles', the variable is this

{ App: '_src_App__App',
  'App-logo': '_src_App__App-logo',
  'App-logo-spin': '_src_App__App-logo-spin',
  'App-header': '_src_App__App-header',
  'App-link': '_src_App__App-link',
  app: '_src_App__App',
  appLogo: '_src_App__App-logo',
  appLogoSpin: '_src_App__App-logo-spin',
  appHeader: '_src_App__App-header',
  appLink: '_src_App__App-link' }

and then, i try to use isomorphic-style-loader order by the latest doc,but it's also error

style._getCss is not a function

render.ts

const css = new Set() // CSS for all rendered React components
            const insertCss = (...styles:any[]) => styles.forEach(style => {
                css.add(style._getCss())
            })
            let memoryHtml = await ctx.readFile('index.html')
            let html = ReactDOMServer.renderToString(
                        <Provider store={getCreateStore()}>
                            <StaticRouter
                                location={ctx.url}
                                context={context}>
                                <StyleContext.Provider value={{ insertCss }}>
                                    <App />
                                </StyleContext.Provider>
                            </StaticRouter>
                        </Provider>
            )

App.tsx

import withStyles from 'isomorphic-style-loader/withStyles'
import styles from './App.css'
import routes from './routes'
class App extends Component<Props, State>{
   render() {
      return (
         <div>{routes()}</div>
      )
   }
}
export default withStyles(styles)(App);

and the style variable is an empty object

[frenzzy]

Maybe problem in your webpack.config, or if you don't use webpack to generate ssr bundle.

[yellowbeee]

@frenzzy
i use create-react-app webpack.config.js and use koa-webpack-dev-middleware and koa-webpack-hot-middleware to bundle, this is server.ts

const webpackConfig:any = require('../config/webpack.config')(process.env.NODE_ENV)
webpackConfig['entry'][0] = `webpack-hot-middleware/client?path=/__webpack_hmr&timeout=20000&reload=true`
// isomorphic-style-loader
webpackConfig.module.rules[2].oneOf.forEach((rule:any) => {
    if(Object.prototype.toString.call(rule.test) === '[object RegExp]' && rule.test.test('.css') ) {
        rule.use[0] = 'isomorphic-style-loader'
    }
});

const compiler:any = webpack(webpackConfig)

    app.use(hotMiddleware(compiler))
    app.use(devMiddleware(compiler, {
        noInfo: true,
        quiet: false,
        stats: {
            colors: true
        }
    }))

is it because i use require.extensions to ignore .css??
but if i don't use require.extensions, when i import styles from './App.css', it was Could not find file error

[piglovesyou]

I think it's a good idea for you to try providing minimum reproduction code instead of your code. If isomorphic-style-loader is properly configured in your webpack config, the styles of import styles from './App.css' should have styles._getCss function so why don't you check that out first.