1

我正在尝试设置 SSR 以使用@loadable/components. 我所有的设置都是基于带有 babel 和 webpack 插件的文档。当我尝试运行node server.js它时运行正常，但是当我打开浏览器并抛出以下错误（进入节点控制台）时：

TypeError [ERR_INVALID_ARG_TYPE]: The "id" argument must be of type string. Received an instance of Object
    at validateString (internal/validators.js:118:11)
    at Module.require (internal/modules/cjs/loader.js:1033:3)
    at require (internal/modules/cjs/helpers.js:72:18)
    at smartRequire (/Users/max/Documents/repos/app/node_modules/@loadable/server/lib/util.js:44:25)
    at new ChunkExtractor (/Users/max/Documents/repos/app/node_modules/@loadable/server/lib/ChunkExtractor.js:181:50)
    at renderer (webpack://app/./node_modules/@MYSCOPE/elm/dist/elm.esm.js?:3619:19)
    at eval (webpack://app/./src/server.tsx?:64:90)
    at processTicksAndRejections (internal/process/task_queues.js:97:5) {
  code: 'ERR_INVALID_ARG_TYPE'
}

如您所见，回溯中有@MYSCOPE，其中包含我的一些内部包（如果重要的话）。

@loadable/server/lib/util.js是以下函数：

在此处输入图像描述

当我尝试在第42console.log(modulePath)行时，我看到整个 stats JSON 输出似乎是错误的，我应该得到一个单一的模块路径（据我所知）。

有什么帮助吗？

如果需要，我可以共享配置文件的某些特定部分。因为我在控制台输出中看到了我自己的包，它的构建似乎有问题（它在 cjs 构建的客户端上完美运行），但是将完整的 stats 对象作为模块路径非常令人困惑。

UPD：演示https://www.dropbox.com/s/9r947cgg4qvqbu4/loadable-test.zip?dl=0

跑

yarn
yarn dev:server
# go to localhost:3000 and see the error in console

重建：

yarn
yarn dev:build-client
yarn dev:build-server
yarn dev:server # go to localhost:3000
4

1 回答 1

1

statsFile传递给的选项ChunkExtractor需要文件的路径loadable-stats.json，而不是文件的实际 JSON 内容。通过这样做require('../loadable-stats.json')，webpack 实际上会在构建期间解析 JSON 并将其分配给loadableJson变量。

您可以更改loadableJson如下：

import path from 'path';

const loadableJson = path.resolve(__dirname, '../bundle_client/loadable-stats.json');

这将解决您在问题上遇到的问题。但是，如果你只这样做，你会注意到你还有另一个问题。默认情况下可加载假定您的条目块名称为main. 在您的演示中不是这种情况，因为您已将条目块名称设置为app。

entry: {
    app: ['@babel/polyfill', './src/index.tsx']
},

entrypoints为了解决这个问题，只需通过将数组传递给构造函数来告诉 loadable 你的名字ChunkExtractor：

    const extractor = new ChunkExtractor({
        statsFile: loadableJson,
        entrypoints: ["app"], // name of your entry chunk
    });

就是这样，现在一切都应该正常工作了！

如果有帮助，我会在 GitHub 上设置演示，以便您可以轻松地看到我在此处所做的更改。

于 2020-07-25T05:18:10.030 回答