我正在尝试 Solidjs 的同构方法。 我非常忠实地遵循文档：https://www.solidjs.com/guides/server。
从视觉上看，一切似乎都正常：我的 html 按预期在浏览器中呈现。 但是，如果水合成功，我会在浏览器中看到日志。相反，我看到了错误日志。
服务器：
app.get('/', (req, res) => {
return res.send(getBasicHTMLSkeleton())
})
获取BasicHTML骨架：
import {renderToString, generateHydrationScript, Dynamic} from "solid-js/web";
import HelloWorld from "../../hybrid/components/HelloWorld";
export const getBasicHTMLSkeleton = () => {
const hello = renderToString(() => <HelloWorld />)
return `
<html lang="en">
<head>
<title>🔥 Solid SSR 🔥</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/_index.min.css" />
<script src="hydrate.js" />
${generateHydrationScript()}
</head>
<body>${hello}</body>
</html>
`;
}
HelloWorld 组件：
import {createEffect} from "solid-js";
const HelloWorld = () => {
createEffect(() => {
console.log('lel!')
})
return <div>
<h1>Hello</h1>
</div>
}
export default HelloWorld
Hydro.js 脚本（该脚本在客户端拉入）：
import {hydrate} from "solid-js/web";
import HelloWorld from "../hybrid/components/HelloWorld";
(() => {
console.log('HYDRATING?')
hydrate(() => <HelloWorld/>, document) // this code breaks everything
})()
我在浏览器控制台中收到以下错误：
Uncaught TypeError: (0 , solid_js_web__WEBPACK_IMPORTED_MODULE_0__.template) is not a function
at ./src/hybrid/components/HelloWorld.tsx (hydrate.js:25:83)
at __webpack_require__ (bootstrap:19:1)
at publicPath:1:1
at hydrate.js:3421:3
at hydrate.js:3423:12
用于编译脚本的 webpack 配置：
const tsAndTsxRuleClient = {
test: /\.(ts|tsx)$/i,
exclude: ['/node_modules/'],
use: [
{
loader: 'babel-loader',
options: {
presets: [["solid", {"generate": "dom", "hydratable": true}]],
},
},
{
loader: 'ts-loader',
},
]
}
const configClient = {
...configServer,
entry: './src/client/hydrate.tsx',
module: {
rules: [tsAndTsxRuleClient]
},
output: {
filename: 'hydrate.js',
path: path.resolve(__dirname, 'dist-client')
}
}
最后是捆绑的 Hydro.js 的相关部分
(() => {
console.log('HYDRATING?');
(0,solid_js_web__WEBPACK_IMPORTED_MODULE_1__.hydrate)(() => (0,solid_js_web__WEBPACK_IMPORTED_MODULE_2__.createComponent)(_hybrid_components_HelloWorld__WEBPACK_IMPORTED_MODULE_0__["default"], {}), document); // this code breaks everything
})();
我错过了什么吗？
我尝试使用不同的 webpack 配置
例如：“生成”； “ssr”而不是“dom”
我还仔细检查了可能的语法错误和文档。
我还尝试了其他 domNodes 而不是文档，例如：
hydrate(() => <HelloWorld/>, helloWorldWrapper)
结果相同。
您需要先在服务器上渲染您的应用程序，然后在客户端上对其进行 hytrate。因此，您需要两个应用程序，一个执行服务器端渲染的 NodeJs 应用程序和一个执行水合作用的浏览器应用程序。看来你只有后者。
返回您在开发过程中使用的静态 html 文件是不够的，您需要将应用程序字符串化到其中。您正在生成并运行水合脚本，而无需将要进行水合的部分嵌入到服务器返回的代码中。