微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

错误:找不到样式目标它开始出现在带有 React 实现的 SSR 之后怎么修?

如何解决错误:找不到样式目标它开始出现在带有 React 实现的 SSR 之后怎么修?

我有一个 CSR 应用程序,现在使用 React 实现了服务器端渲染 (SSR),并收到此错误 错误:找不到样式目标

我们使用了 reactDOMserver、react-app-wire 和 webpack-override 文件 查看下面的 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);

然后重新渲染应用程序

和 SSR JS 文件

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

并收到错误:找不到样式目标 我有一个 CSR 应用程序,现在使用 React 实现了服务器端渲染 (SSR),并收到此错误 错误:找不到样式目标。这可能意味着“插入”参数的值无效 当我运行服务器并尝试访问页面时出现此错误


我们还尝试了使用这些加载器的其他方法 css-loader,sass loader 和 style-loader 甚至还有 isomorphic-style-loader 他们导致了 No PostCSS config错误,在通过添加到项目 postcss.config.js 文件修复了这个错误之后,我们收到了关于样式目标的相同错误和 antd 的附加错误 错误:在以下位置找不到 PostCSS 配置:D:_PROJECT....\client\node_modules\antd\dist


正在使用的技术包:nodejs、reactjs、antdesign、babel 和 webpack。 我已经从 StackOverflow 和其他来源尝试了很多解决方案,但没有任何帮助!

请帮我解决它。

谢谢!

解决方法

我认为您不能使用样式加载器服务器端。 像这样找到加载器:https://github.com/codebandits/react-app-rewire-css-modules/blob/master/index.js 只需使用 style-loader,然后将其删除.. 或切换到 razzle

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。