1

我在我的反应服务器端渲染站点中使用可加载组件。它在本地主机中运行良好，然后我尝试在谷歌云功能中运行该站点，但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',
  )

这是我的代码结构的屏幕截图

我的 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。

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

4

0 回答 0