Ошибка: не удалось найти цель стиля. Он начал появляться после SSR с реализацией React. Как исправить?

У меня было приложение CSR, и теперь я реализовал рендеринг на стороне сервера (SSR) с помощью React и получил эту ошибку Ошибка: не удалось найти цель стиля

Мы использовали reactDOMserver, react-app-wire, с файлом переопределения webpack. См. Конфигурации webpack ниже:

const { resolve } = require("path");
require("ignore-styles");

module.exports = {
  webpack: function (config) {
    config.entry = resolve(dirname, "../client/src/ssr");
    config.optimization = undefined;
    config.output = {
      filename: "ssr.js",
      globalObject: 'this',
      libraryTarget: "commonjs",
      path: resolve(dirname, "../client/build"),
    };
    return config;
  },
};

с сервера

app.get("^/$", (req, res) => {
  Object.assign(global, {
    navigation: {},
    window: ssr.getWindow(),
    navigator: {
      userAgent: req.headers["user-agent"],
    },
    global: {},
    document:ssr.ssrDocument
  });
  const App = require("./build/ssr");
  const context = {};

  let app = App.default(req.url, context);

затем res, обработать приложение

И JS-ФАЙЛ SSR

ssr.js file  :
import { renderToString } from "react-dom/server";
for renderToString(
....
<App/>
....
)

И получил ошибку: не удалось найти цель стиля. У меня было приложение CSR, и теперь я реализовал рендеринг на стороне сервера (SSR) с помощью React, и получаю эту ошибку Ошибка: не удалось найти цель стиля. Это, вероятно, означает, что значение параметра 'insert' недействительно. Получите эту ошибку, когда я запускаю сервер и пытаюсь получить доступ к странице.


Мы также пробовали другие подходы с этими загрузчиками: css-loader, sass loader и style-loader и даже с isomorphic-style-loader. Они привели к ошибке с конфигурацией No PostCSS и после исправления этого путем добавления в файл проекта postcss.config.js И ПОСЛЕ того, как мы получили ту же ошибку о цели стиля и дополнительную ошибку с antd Ошибка: Конфигурация PostCSS не найдена в: D: _PROJECT .... \ client \ node_modules \ antd \ dist


Используемый технический пакет: nodejs, reactjs, antdesign, babel и webpack. Уже пробовал много решений из StackOverflow и других источников, ничего не помогло!

Пожалуйста, помогите мне решить эту проблему.

Спасибо!


person Nextdev    schedule 26.02.2021    source источник
comment
как вы подходите к сср? с reactDOMServer?   -  person Solvenc1no    schedule 28.02.2021
comment
@ Solvenc1no только renderToString () с файлом переопределения response-app и webpack-override   -  person Nextdev    schedule 01.03.2021
comment
@ Solvenc1no import {renderToString} из response-dom / server;   -  person Nextdev    schedule 01.03.2021


Ответы (1)


Я думаю, вы не можете использовать серверную часть style-loader. Найдите загрузчик следующим образом: https://github.com/codebandits/react-app-rewire-css-modules/blob/master/index.js просто используйте вместо него style-loader и удалите его .. или переключитесь на razzle

person xiaohugod    schedule 12.04.2021