部署 React 时出现错误 "Path" argument must be string - 云函数中的可加载组件示例代码

Question

我正在尝试将 Loadable 组件集成到我的 SSR 项目中，当我在 localhost:3000 中执行时它正在运行，然后我尝试将其部署到云函数中我收到此错误

[ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined

之后我尝试部署 loadable components server side rendering example，示例代码也给出了同样的错误。

我在 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

Loadable componets 在 app.js 中有很多代码，所以我只是用简单的 hello world 文本

替换了 app.js

这是我的firebase.json文件

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "function": "supercharged"
      }
    ]
  }
}

这些都是我对 loadable-components server side rendering async 节点示例所做的更改

我不知道我在这里遗漏了什么，如果我遗漏或需要添加任何内容，请帮助我

Answer 1

正如@hilipati 指出的那样，__dirname 未定义。但是对于这个问题有一个更简单的解决方案，发现 here

在使用__dirname之前，您可以覆盖默认行为，如

if(!__dirname) {
    __dirname = path.resolve(path.dirname(''));
}

或者，或者，

if(!__dirname) {
    __dirname = path.resolve();
}

Answer 2

根据我对 documentation 路径的阅读，没有必要提供 __dirname 到 path.resolve()。它将解析任何给定相对路径的绝对路径，包括没有给出参数的情况。

path.resolve(); // => '/root_path/current_working_directory'

相对路径：

const location = path.resolve('./your_relative_path/file.json')
// OR
const sameLocation = path.resolve('./your_relative_path', 'file.json')
// => '/root_path/current_working_directory/your_relative_path/file.json

此规则的例外情况是您输入非 relative/absolute 路径作为参数。然后它将尝试从右到左解析路径，直到形成有效路径：

path.resolve('/your_absolute_path/file.json')
// OR
path.resolve('/your_absolute_path', 'file.json')
// => '/your_absolute_path/file.json'

path.resolve('/your_absolute_path', '/file.json')
// => '/file.json'

path.resolve('/one_path', '/another_path', 'file.json')
// => '/another_path/file.json'

因此，您解析后的代码应如下所示：

const nodeStats = path.resolve('../../public/dist/async-node/loadable-stats.json')

const webStats = path.resolve('../../public/dist/web/loadable-stats.json')

这将分别为您提供 /Volumes/React-Project/SSRAsync/public/dist/async-node/loadable-stats.json 和 /Volumes/React-Project/SSRAsync/public/dist/web/loadable-stats.json。这仍然适用于节点 16.x

Answer 3

通过将 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"

部署 React 时出现错误 "Path" argument must be string - 云函数中的可加载组件示例代码

Getting error "Path" argument must be string while deploying React - Loadable components sample code in cloud functions

javascript

node.js

reactjs

google-cloud-functions

loadable-component