Question

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

但是当我在生产模式下运行webpack时，出现Uncaught TypeError：无法读取未定义的属性__emotion_forwardProp。似乎该标签未定义。

我在@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插件进行压缩。 Webpack 4.31.0 @emotion 10.0.10

您有什么建议吗？

Answer 1

这是由您导入/导出组件的方式引起的。

当您拥有index.js时，它将导入多个组件，然后将其导出，然后从索引中导入组件，如下所示：

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

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

因此，按组件的相对路径导入组件而无需“重定向”将对其进行修复。

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

1 个答案: