Импортирование таблицы стилей в представлении реагирования сервера - TypeError: style._getCss не является функцией

Я строю изоморфное приложение "Реакция-редукция" поверх NodeJS. Я рендеринг моей домашней страницы с сервера. Тем не менее, мои стили не отражены в моем представлении. Я хотел бы импортировать таблицы стилей, как я это делаю на стороне клиента. Я пробовал эту статью и это тоже, но ни один из них на самом деле не дал мне того, чего я хочу достичь.

Вот более подробная информация о проекте.

.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(
     <Provider store={store}>
        <StaticRouter context={context}>
            <ContextProvider context={context}>
            <Routes />
        </ContextProvider>
        </StaticRouter>
     </Provider>
  )
  const finalState = store.getState()
  const helmet = Helmet.renderStatic();
  const preloadedState = store.getState()
  res.send(renderFullPage(html, preloadedState));
 }

 function renderFullPage(html, finalState) {
    return `
      <!doctype html>
      <html>
         <head>
            <title>Redux Universal Example</title>
            <style type="text/css">${[...css].join('')}</style>
         </head>
         <body>
             <div id="root">${html}</div>
             <script>
                window.__PRELOADED_STATE__ = ${JSON.stringify(preloadedState).replace(/</g, '\\u003c')}
             </script>
             <script src="./assets/client.js"></script>
         </body>
    </html>
    `
  }

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)
  }
}

Я импортирую его в мой homePresenter как

import homePageStyle from './home.scss';

и используя его в моем div в том же компоненте, что и

<div className="component">

Если я изменю это на

<div className={homePageStyle.component}>

Я получаю ошибку в браузере

TypeError: style._getCss is not a function at server.js:52:84

В браузере я мог видеть, что у div есть имя класса как 'component'; это; просто это не наследует стили.

Любые предложения о том, что мне здесь не хватает?

Источник

1 ответ

Ошибка типа: style._getCss не является функцией на сервере server.js:52:84

Скорее всего, рендеринг на стороне сервера не настроен должным образом. Если вы не используете webpack Конечно, для компиляции серверного пакета соответствующие стили не будут загружены, так как isomorphic-style-loader не обрабатывал файлы на стороне сервера.
Проверьте, как приложение запускается и убедитесь, что webpack был применен для комплектации сервера, и конфигурация была такой: https://webpack.js.org/configuration/node/
Также вы можете попробовать готовое изоморфное решение с пакетом frontend+backend и включает поддержку css, например, resol-app.

Источник
Другие вопросы по тегам