Cur*_*aph 9 javascript node.js reactjs google-cloud-functions loadable-component
我正在尝试将 Loadable 组件集成到我的 SSR 项目中，当我在 localhost:3000 中执行时它正在工作，然后我尝试将它部署在云功能中我收到此错误
[ERR_INVALID_ARG_TYPE]：“路径”参数必须是字符串类型。收到未定义
之后我尝试部署可加载组件服务器端渲染示例，示例代码也给出了同样的错误。
我在 package.json、server main.js 和 app.js 文件中做了一些更改以在 Cloud 函数中工作
这是我的服务器 main.js 文件
import path from 'path'
import express from 'express'
import React from 'react'
import { renderToString } from 'react-dom/server'
import { ChunkExtractor } from '@loadable/server'
import App from '../client/App'
const functions = require('firebase-functions');
const app = express()
//app.use(express.static(path.join(__dirname, '../../public')))
const nodeStats = path.resolve(
__dirname,
'../../public/dist/async-node/loadable-stats.json',
)
const webStats = path.resolve(
__dirname,
'../../public/dist/web/loadable-stats.json',
)
app.get('*', (req, res) => {
const nodeExtractor = new ChunkExtractor({ statsFile: nodeStats })
const { default: App } = nodeExtractor.requireEntrypoint()
const webExtractor = new ChunkExtractor({ statsFile: webStats })
const jsx = webExtractor.collectChunks(<App />)
const html = renderToString(jsx)
res.set('content-type', 'text/html')
res.send(`
<!DOCTYPE html>
<html>
<head>
${webExtractor.getLinkTags()}
${webExtractor.getStyleTags()}
</head>
<body>
<div id="main">${html}</div>
${webExtractor.getScriptTags()}
</body>
</html>
`)
})
// eslint-disable-next-line no-console
exports.supercharged = functions.https.onRequest(app);
在这个文件中，我对示例代码app.listen进行了这些更改，exports.supercharged = functions.https.onRequest(app);并导入了const functions = require('firebase-functions');
这是我的 package.json 文件
{
"private": true,
"scripts": {
"dev": "nodemon src/server/main.js",
"build": "NODE_ENV=production yarn build:webpack && yarn build:functions",
"build:webpack": "webpack",
"build:functions": "babel -d functions src",
"start": "NODE_ENV=production node functions/server/main.js",
"deploy": "firebase deploy --only functions,hosting",
"serve": "firebase serve --only functions,hosting"
},
"devDependencies": {
"@babel/cli": "^7.4.4",
"@babel/core": "^7.6.2",
"@babel/node": "^7.0.0",
"@babel/preset-env": "^7.6.2",
"@babel/preset-react": "^7.0.0",
"@loadable/babel-plugin": "^5.10.3",
"@loadable/component": "^5.10.3",
"@loadable/server": "^5.10.3",
"@loadable/webpack-plugin": "^5.7.1",
"babel-loader": "^8.0.6",
"css-loader": "^2.1.1",
"mini-css-extract-plugin": "^0.6.0",
"nodemon": "^1.19.0",
"webpack": "^5.0.0-beta.16",
"webpack-cli": "^3.3.2",
"webpack-dev-middleware": "^3.6.2",
"webpack-node-externals": "^1.7.2"
},
"dependencies": {
"core-js": "^3.0.1",
"express": "^4.16.4",
"firebase-admin": "^9.2.0",
"firebase-functions": "^3.11.0",
"react": "^16.8.6",
"react-dom": "^16.8.6"
}
}
在包文件中，我替换了 babel 脚本以将文件复制到函数文件夹而不是 lib
"build:functions": "babel -d functions src",
这是我的 app.js
import React from 'react'
// eslint-disable-next-line import/no-extraneous-dependencies
import loadable from '@loadable/component'
const App = () => (
<div>
Hello world
</div>
)
export default App
可加载组件在 app.js 中有很多代码，所以我只是用简单的 hello world 文本替换了 app.js
这是我的 firebase.json 文件
{
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"function": "supercharged"
}
]
}
}
这些都是我从可加载组件服务器端渲染异步节点示例中所做的更改
我不知道我在这里错过了什么，如果我错过或需要添加任何内容，请帮助我
通过将 webpack 降级到 4.31.0 检查，可加载组件与 webpack 5 存在一些问题
"webpack": "^4.31.0",
"webpack-cli": "^3.3.2",
"webpack-dev-middleware": "^3.6.2",
"webpack-node-externals": "^1.7.2"
| 归档时间： |
|
| 查看次数： |
303 次 |
| 最近记录： |