9

我正在尝试将可加载组件集成到我的 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"
      }
    ]
  }
}

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

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

4

3 回答 3

1

通过将 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"
于 2021-07-17T05:41:33.217 回答
1

根据我对路径文档的阅读，没有必要提供__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

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

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分别。这仍然适用于 Node 16.x

于 2021-06-10T03:27:54.233 回答
0

正如@hilipati 指出的那样，__dirname没有定义。但是这个问题有一个更简单的解决方案，在这里找到

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

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

或者，或者，

if(!__dirname) {
    __dirname = path.resolve();
}
于 2021-05-29T12:25:47.957 回答