javascript - 部署 React 时出现错误“路径”参数必须是字符串

问题描述

我正在尝试将可加载组件集成到我的 SSR 项目中，并且当我在 localhost:3000 中执行时它正在工作，然后我尝试将它部署在云功能中我收到此错误

[ERR_INVALID_ARG_TYPE]：“路径”参数必须是字符串类型。收到未定义

之后我尝试部署可加载组件服务器端渲染示例，示例代码也给出了相同的错误。

我对 package.json、服务器 main.js 和 app.js 文件进行了一些更改，以便在云函数中工作

这是我的服务器 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"
      }
    ]
  }
}

这些都是我从可加载组件服务器端渲染异步节点示例中所做的更改

我不知道我在这里错过了什么，如果我错过了或需要添加任何东西，请帮助我

标签： javascriptnode.jsreactjsgoogle-cloud-functionsloadable-component

javascript - 部署 React 时出现错误“路径”参数必须是字符串 - 云函数中的可加载组件示例代码

问题描述

解决方案

推荐阅读