Next.js: Опора `className` не соответствует.Сервер: "..." Клиент: "..." - PullRequest
Новая
       8

Next.js: Опора `className` не соответствует.Сервер: "..." Клиент: "..."

0 голосов
/ 25 января 2019

Я использую Material-UI в Next.js.По какой-то причине каждый раз, когда я обращаюсь к своему приложению Next.js, оно показывает приведенное ниже сообщение об ошибке, и цель для className меняется каждый раз, когда я запускаю Next.js.При поиске проблемы я понял, что она будет связана с .babelrc или конфигурацией Webpack в next.config.js, но не смог найти ничего более глубокого, чем это.Почему у клиента и сервера разные имена классов?

Предупреждение: пропеллер className не совпадает.Сервер: "MuiInputBase-root-113 MuiInputBase-formControl-114 SearchBar-input-110" Клиент: "MuiInputBase-root-113 SearchBar-input-110"

.babelrc 

{
  "presets": [
    "next/babel"
  ],
  "plugins": [
    "inline-dotenv",
    ["module-resolver", {
      "root": ["./src"]
    }]
  ],
  "env": {
    "test": {
      "presets": [
        ["next/babel", {
           "preset-env": {
              "modules": "commonjs"
            }
        }]
      ]
    }
  }
}

next.config.js 

const { ANALYZE, ASSET_HOST } = process.env;

// for those who using CDN
const assetPrefix = ASSET_HOST || "";

const withCSS = require("@zeit/next-css");

module.exports = withCSS({
  assetPrefix,
  webpack: (config, { dev }) => {
    config.output.publicPath = `${assetPrefix}${config.output.publicPath}`;

    if (ANALYZE) {
      const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
      config.plugins.push(
        new BundleAnalyzerPlugin({
          analyzerMode: "server",
          analyzerPort: 8888,
          openAnalyzer: true
        })
      );
    }

    config.module.rules.push({
      test: /\.scss/,
      use: [
        {
          loader: "emit-file-loader",
          options: {
            name: "dist/[path][name].[ext]"
          }
        },
        "babel-loader",
        "styled-jsx-css-loader",
        {
          loader: "sass-loader",
          options: { sourceMap: dev }
        }
      ]
    });

    return config;
  }
});
...