生产模式样式组件缩小导致类型错误

Question

当我构建我的应用程序时，在 webpack 开发模式下，一切正常。

但是当我在生产模式下运行 webpack 时，我得到 Uncaught TypeError: Cannot read 属性 __emotion_forwardProp of undefined。似乎标签未定义。

我在@emotion 中发现了这段导致错误的代码，但无法弄清楚为什么以及如何修复它：

if (process.env.NODE_ENV !== 'production') {
  if (tag === undefined) {
    throw new Error('You are trying to create a styled element with an undefined component.\nYou may have forgotten to import it.');
  }
}

在非缩小版本上，即使是生产环境 NODE_ENV 我也没有收到错误，这意味着问题不在我的代码中，而是在情感和缩小方面。

我正在使用默认的 Terser webpack 插件进行缩小。网页包 4.31.0 @情感 10.0.10

你有什么建议吗？

Answer 1

这是您 import/export 组件的方式造成的。

当您有 index.js 导入多个组件然后导出它们时，您可以像这样从索引中导入组件：

import { SomeComponent } from '..' or '../'

这导致标签在 emotion createStyled 函数中未定义，这似乎是 terser 或 @emotion 的错误。

因此，在没有 'redirections' 的情况下通过相对路径导入组件将修复它。

生产模式样式组件缩小导致类型错误

Production mode styled components minification cause typeerror

reactjs

webpack

styled-components

terser