reactjs - 生产模式风格的组件缩小导致类型错误
问题描述
当我构建我的应用程序时,在 webpack 开发模式下,一切正常。
但是当我在生产模式下运行 webpack 时,我得到了 Uncaught TypeError: Cannot read property __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 插件进行缩小。Webpack 4.31.0 @emotion 10.0.10
你有什么建议吗?
解决方案
这是由您导入/导出组件的方式引起的。
当您有 index.js 导入多个组件然后导出它们并从索引中导入组件时,如下所示:
import { SomeComponent } from '..' or '../'
这会导致标签在情感 createStyled 函数中未定义,这似乎是 terser 或 @emotion 的错误。
因此,通过它们的相对路径导入组件而不使用“重定向”将解决它。
推荐阅读
- google-apps-script - 使用表格权限和 getvalue 改变行为?
- javascript - Plotly 图表在 ajax 成功响应中不起作用
- sql - Redshift 嵌套 case when/ If then else
- c - 在结构数组中,为什么 strcmp 函数不适用于字符串?
- scala - RateLimiter 的未来
- idris - 伊德里斯将非线性参数解释为线性
- api - METAMASK - 注入 - 用户如何使用 metamask API 支付自定义价值的 ETH?
- angular - Angular 中的 Postcss 中度漏洞
- python - Python - 使用 urllib 的 url 请求的尝试/异常和退出代码
- amazon-web-services - 使用 Cloud Watch 事件触发时,Lambda 不会删除 DynamoDB 记录