javascript - Meteor-React-ssr - 当我安装了“static-html”时询问“模板”包
问题描述
我正在尝试实现流星反应服务器端渲染。我已经删除了templating
包并添加了static-html
包,就像react
在流星中使用 for ui 一样。
现在的问题是,当我使用任何服务器端渲染实现运行应用程序时,它工作正常。这意味着如果我查看页面源代码,我会看到带有渲染目标 div 的基本标记。但是当我实现服务器渲染代码时,它给出了这个错误
```
Error: Cannot find package "templating". Try "meteor add templating".
at makeInstallerOptions.fallback (packages/modules-runtime.js:597:13)
at Module.require (packages/modules-runtime.js:230:14)
at require (packages/modules-runtime.js:244:21)
at AccountsUIWrapper.js (imports/ui/AccountsUIWrapper.js:1:250)
at fileEvaluate (packages/modules-runtime.js:322:7)
at Module.require (packages/modules-runtime.js:224:14)
at require (packages/modules-runtime.js:244:21)
at App.js (imports/ui/App.js:1:386)
at fileEvaluate (packages/modules-runtime.js:322:7)
at Module.require (packages/modules-runtime.js:224:14)
at require (packages/modules-runtime.js:244:21)
at routes.js (imports/startup/routes.js:1:87)
at fileEvaluate (packages/modules-runtime.js:322:7)
at Module.require (packages/modules-runtime.js:224:14)
at require (packages/modules-runtime.js:244:21)
at main.js (server/main.js:1:558)
at fileEvaluate (packages/modules-runtime.js:322:7)
at Module.require (packages/modules-runtime.js:224:14)
at require (packages/modules-runtime.js:244:21)
at /Users/kenshinman/Desktop/projects/simple-todos/.meteor/local/build/programs/server/app/app.js:463:15
at /Users/kenshinman/Desktop/projects/simple-todos/.meteor/local/build/programs/server/boot.js:411:36
at Array.forEach (<anonymous>)
=> Exited with code: 1 => 您的应用程序正在崩溃。等待文件更改。
```
这是我的server/main.js code
import { Tasks } from "../imports/api/tasks";
import React from "react";
import { Meteor } from "meteor/meteor";
import { onPageLoad } from "meteor/server-render";
import { StaticRouter, Switch } from "react-router-dom";
import { renderToString } from "react-dom/server";
import Routes from "../imports/startup/routes";
const siteName = "Todos";
const defaultImage = "https://loremflickr.com/320/240/baby";
const defaultMetaTags = `
<title>${siteName}</title>
<meta property="og:title" content="${siteName}" />
<meta property="og:description" content="All your todos synced wherever you happen to be" />
<meta property="og:image" content="${defaultImage}" />
`;
function createMetaTag(property, content) {
return `<meta property="${property}" content="${content}">`;
}
onPageLoad(sink => {
const { pathname } = sink.request.url;
const meteorHost = Meteor.absoluteUrl();
const App = props => {
console.log(props);
return (
<StaticRouter location={props.location} context={{}}>
<Switch>
<Routes />
</Switch>
</StaticRouter>
);
};
const content = renderToString(<App location={sink.request.url} />);
sink.renderIntoElementById("render-target", content);
const taskId = "asdlkjhfsda";
const task = taskId ? Tasks.findOne({ _id: "listId" }) : null;
// task count
if (task) {
const title = "task.text";
const description = `This list contains 8 incomplete tasks`;
const fullUrl = meteorHost + pathname.replace(/^\/+/g, "");
sink.appendToHead(createMetaTag("og:title", title));
sink.appendToHead(createMetaTag("og:description", description));
sink.appendToHead(createMetaTag("og:url", fullUrl));
sink.appendToHead(createMetaTag("og:image", defaultImage));
sink.appendToHead(createMetaTag("og:site_name", siteName));
} else {
sink.appendToHead(defaultMetaTags);
sink.appendToHead(createMetaTag("og:url", meteorHost));
}
});
但是当我评论这条线
import Routes from "../imports/startup/routes";
和所有出现的路线时,一切都恢复正常了。
这是路由文件代码
import React from "react";
import App from "../ui/App";
import { Switch, Route } from "react-router-dom";
const Routes = () => (
<div>
<Route exact path="/" component={App} />
<Route exact path="/test" render={() => <h2>This is the test page</h2>} />
</div>
);
export default Routes;
我怎样才能使这项工作并停止出现此错误?
谢谢。
解决方案
解决了。忘了我是Template
从meteor/templating
我的帐户 ui 配置模板中导入的。它现在正在工作。
推荐阅读
- python - 如何使用 gtts 库读取文本文件?
- r - 将 igraph.vs 对象列表转换为数据框(来自 all_simple_paths)
- python - FileRepo 有什么问题?全部添加,但我不能使用任何东西
- html - 将我的图标居中在 div 的中间。适用于手持设备,但不适用于浏览器
- sass - 如何在@function 中使用@if 来检查SCSS 中屏幕的方向?
- spring - 在 Spring Clod/Boot 中保持 Kafka Producer 的状态
- java - 按每个单词查找文本文件的行号
- mysql - 如何在 QueryDef 中重新定义 SQL?我有通过删除和重新创建 QueryDef 来工作的代码,但我无法让覆盖工作
- php - 比较来自不同查询的两个值
- sql-server - 对列进行 GROUP BY 以删除空值