Question

我想混合使用webpack外部组件和React的延迟负载来优化构建。

我的设置摘要如下：

shared-ui-components ->是一个带有React组件的npm模块，其构建输出进入s3存储桶，以便主应用程序可以使用。

这是通过webpack中的输出配置完成的

  output: {
    //...
    library: 'SUIC',
  }

和

主应用程序->使用共享的用户界面组件

这是通过webpack中的输出配置完成的

  externals: {
    "shared-ui-components": "SUIC"
  }

并将脚本标签链接到存储区uri，以包含shared-ui-components内置的输出。

一切正常。

接下来，由于shared-ui-components中包含多个重要组成部分，我想懒加载一些组件并使用块。

示例片段：

import * as React from 'react';
import { lazy, Suspense } from 'react';

const Feed = lazy(() => import('../Feed/Feed'));

const LoadableFeed = () => {
  return <div className="central-comp">
    <Suspense fallback={<p>Loading feed…</p>}>
      <Feed />
    </Suspense>
  </div>
}

export default LoadableFeed

我在两个项目中都使用以下tsconfig：

 "compilerOptions": {
    "lib": ["es6", "dom"],
    "module": "esnext",
    "moduleResolution": "node",
    "target": "es5",
    "jsx": "react",
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true
  }

shared-ui-components构建似乎正在产生适当的块。

现在，当我在主应用中使用Feed时，

import { LoadableFeed } from 'shared-ui-components';

const CentralContent = () => {
  return <div className="central-comp">
    <h4>Central Content</h4>
    <LoadableFeed />
  </div>
}

export default CentralContent

我可以看到shared-ui-components中的bundle js可以加载所需的块，但无法呈现组件。

错误消息说 Uncaught TypeError: Cannot read property 'call' of undefined at o

和react-dom.development.js:17252 The above error occurred in one of your React components: in Unknown (created by c)，其中我发现的c是指LoadableFeed

似乎主应用程序的包无法渲染shared-ui-components中定义的延迟加载的组件束，或者在其他地方使用时，延迟加载的组件本身也无法渲染。

有没有办法解决这个问题？

Answer 1

通过在主应用的module中将commonjs设置为tsconfig来解决此问题。有道理，最终的应用程序构建输出应使用commonjs而不是esnext

尝试从外部捆绑包加载延迟加载的组件时出错

1 个答案: