React Material-ui SSR - Предупреждение: Prop `d` не совпадает.Сервер: "M 0 0 h 24 v 24 H 0 Z" Клиент: "M0 0h24v24H0z" - PullRequest
Новая
       29

React Material-ui SSR - Предупреждение: Prop `d` не совпадает.Сервер: "M 0 0 h 24 v 24 H 0 Z" Клиент: "M0 0h24v24H0z"

0 голосов
/ 21 марта 2019

Я работаю над сайтом React с серверным рендерингом и Material-ui. Все отлично работало, в том числе mui JSS.

Затем я добавил значок SVG из @ material-ui / icons

Теперь Edge и IE11 жалуются: Предупреждение: Опора d не соответствует. Сервер: "M 0 0 h 24 v 24 H 0 Z" Клиент: "M0 0h24v24H0z"

Предупреждение указывает, что рендеринг сервера и клиента не совпадает, но если я получаю рендеринг сервера с помощью curl, это правильно и НЕ включает пробелы, показанные в консоли IE / Edge.

Все остальные браузеры в порядке (конечно).

Кто-нибудь еще сталкивался с проблемами SSR только в браузерах MS?

Это так мало, как я могу привести пример. Это основано на материале-ui-master / examples / ssr с большинством удаленных вещей:

server.js: 

import express from "express";
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import App from './App';

function renderFullPage(html) {
  return `
    <!doctype html>
    <html>
      <body>
        <div id="root">${html}</div>
        <script src="build/bundle.js"></script>
      </body>
    </html>
  `;
}

function handleRender(req, res) {
  // Render the component to a string.
  const html = ReactDOMServer.renderToString(
        <App />
  );

  res.send(renderFullPage(html));
}

const app = express();

app.use('/build', express.static('build'));

// This is fired every time the server-side receives a request.
app.use(handleRender);

const port = 3000;
app.listen(port);

client.js: 

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

class Main extends React.Component {
  render() {
    return <App />;
  }
}

ReactDOM.hydrate(
  <Main />
  , document.querySelector('#root')
);

App.js: 

import React from 'react';
import { Menu } from "@material-ui/icons";

export default class App extends React.Component {
  render() {
    return (
      <Menu />
    );
  }
}

package.json: 

{
  "name": "ssr",
  "version": "3.0.0",
  "private": true,
  "dependencies": {
    "@babel/core": "latest",
    "@babel/node": "latest",
    "@babel/plugin-proposal-class-properties": "latest",
    "@babel/preset-env": "^7.4.2",
    "@babel/preset-react": "latest",
    "@material-ui/core": "latest",
    "@material-ui/icons": "^3.0.2",
    "babel-loader": "next",
    "express": "latest",
    "fs": "0.0.1-security",
    "net": "^1.0.2",
    "nodemon": "latest",
    "prop-types": "latest",
    "react": "latest",
    "react-dom": "latest",
    "react-jss": "^8.1.0",
    "webpack": "latest",
    "webpack-cli": "latest"
  },
  "scripts": {
    "start-server": "SET NODE_ENV=development& nodemon --inspect ./build/server.js",
    "start": "webpack -w"
  }
}

webpack.config.js: 

const path = require('path');

const browserConfig = {
  entry: './client.js',
  node: {
    fs: "empty"
  },
  mode: process.env.NODE_ENV || 'development',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js',
    publicPath: '/',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
    ],
  },
};

const serverConfig = {
  entry: './server.js',
  target: 'node',
  node: {
    fs: "empty"
  },
  mode: process.env.NODE_ENV || 'development',
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'server.js',
    publicPath: '/',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: 'babel-loader',
      },
    ],
  },
};

module.exports = [browserConfig, serverConfig]

.babel.rc: 

{
  "presets": ["@babel/preset-env", "@babel/preset-react"],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

Ответы [ 2 ]

0 голосов
/ 11 июня 2019

Так что, похоже, это ошибка в React.Я зарегистрировал проблему в проекте Material-ui, которая привела к этой открытой проблеме в React:

https://github.com/facebook/react/issues/15187

Предупреждение кажется доброкачественным, и Edge переходит к Chromium, I 'Я не так обеспокоен, как раньше.

0 голосов
/ 10 июня 2019

У меня была похожая проблема. Это не проблема с SSR, но с условным рендерингом в вашем JSX, где условие на сервере и клиенте отличается.

В моем случае я отрисовал что-то на основе условия, прочитанного из localStorage, которое было определено только на клиенте. На сервере он возвратил undefined, поэтому то, что было отображено на клиенте и на сервере, не совпадало.

Решением в моем случае было условное рендеринг на основе того, был ли компонент отрисован на клиенте.

Я написал следующий пользовательский хук: 

import {useEffect, useState} from "react";

export const useLoaded = () => {
    const [loaded, setLoaded] = useState(false);
    useEffect(() => setLoaded(true), []);
    return loaded;
};

Я использую это так: 

// in the functional component's body
const loaded = useLoaded();

// in the JSX
{localCondition && loaded &&
  <MyComponent />
}

С компонентами класса вы будете использовать метод жизненного цикла componentDidMount и взамен setState.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...