问题描述
我有一个 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