问题描述

我在我的 React 服务器端渲染站点中使用 Loadable 组件。它在本地主机中运行良好，然后我尝试在谷歌云功能中运行该站点，但出现 The "path" argument must be of type string. Received undefined 错误。

这里我添加了我用来调用 loadable-stats.json 文件的代码

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

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

Here is the screenshot of my code structure

我的 firebase.json 文件

    {
  "hosting": {
    "public": "public","rewrites": [
      {
        "source": "**","function": "supercharged"
      }
    ]
  }
}

这里我添加了服务器 index.js 文件

import express from 'express';
import renderer from './server/renderer';
import createStore from './server/createStore';
import Routes from './public/Routes'
import {matchRoutes} from 'react-router-config';

const functions = require('firebase-functions');


import path from 'path'

const app = express();

app.use(express.static(path.join(__dirname,'../public')))


app.get('*.js',function (req,res,next) {
  req.url = req.url + '.gz';
  res.set('content-encoding','gzip');
  next();
});
function handleRender(req,res) {
  const store = createStore(req)

  //incoming request path or page that user is trying to fetch
  //and it's going to look at our router configuration object
  //and deside what set of component need to render
  const promises =   matchRoutes(Routes,req.path).map(({route}) => {
    return route.loadData? route.loadData(store,req.path) : null;
  });

Promise.all(promises).then(() => {
  res.set('Cache-Control','public,max-age=600,s-maxage=1200');
  // Send the rendered page back to the client.
  res.send(renderer(req,store));
});
}

// This is fired every time the server-side receives a request.
app.use(handleRender);

//const port = 3000;
//app.listen(port);
exports.supercharged = functions.https.onRequest(app);

我的 webpack 配置文件

      import path from 'path'
  import nodeExternals from 'webpack-node-externals'
  import LoadablePlugin from '@loadable/webpack-plugin'
  import MiniCssExtractPlugin from 'mini-css-extract-plugin'

  const disT_PATH = path.resolve(__dirname,'public/dist')
  const production = process.env.NODE_ENV === 'production'
  const development =
    !process.env.NODE_ENV || process.env.NODE_ENV === 'development'

  const getConfig = target => ({
    name: target,mode: development ? 'development' : 'production',target,entry: `./src/public/index-${target}.js`,module: {
      rules: [
        {
          test: /\.js?$/,exclude: /node_modules/,use: {
            loader: 'babel-loader',options: {
              caller: { target },},{
          test: /\.css$/,use: [
            {
              loader: MiniCssExtractPlugin.loader,'css-loader',],externals:
      target === 'async-node'
        ? ['@loadable/component',nodeExternals()]
        : undefined,output: {
      path: path.join(disT_PATH,target),filename: production ? '[name]-bundle-[chunkhash:8].js' : '[name].js',publicPath: `/dist/${target}/`,libraryTarget: target === 'async-node' ? 'commonjs2' : undefined,plugins: [new LoadablePlugin(),new MiniCssExtractPlugin()],})

  export default [getConfig('web'),getConfig('async-node')]

当我使用 NODE_ENV=production node functions/main.js 运行我的项目时，此代码有效。当我在谷歌云函数 firebase serve --only functions,hosting 中运行时，此代码不起作用。

建议或意见对我更有帮助。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

google-cloud-functions javascript loadable-component reactjs reactjs

如何从谷歌云函数中的函数目录调用公共目录

问题描述

解决方法