React 样式的组件在生产中导致构建错误，但在开发中运行良好

Posted 2023-02-22

【中文标题】React 样式的组件在生产中导致构建错误，但在开发中运行良好

【英文标题】：React styled component causes build error in production, but runs fine in development

【发布时间】：2019-08-08 15:29:01

【问题描述】：

我的代码有一个奇怪的问题，我有一个样式化的组件 div，它围绕着另一个组件，如下所示：

<ContentWidget>
  <BookDay />
</ContentWidget>

（Bookday 返回一个空的 div，所以这应该不是问题）

我的样式组件 ContentWidget 是一个空的样式组件 div，声明如下：

const ContentWidget = styled.div``;

奇怪的是，我有更多的 contentwidgets 填充了我的 webapp 中加载其他组件的内容。所有导入都很好，因为它在开发中工作得非常好。但是每当我运行 npm run build 时，我都会在控制台中收到以下错误消息。

./app/containers/Dashboard/Dashboard.js 中的错误 41:18 模块解析 失败：意外的关键字 'var' (41:18) 您可能需要一个合适的 loader 来处理这种文件类型。 |从导入 ForegroundBlob “基本组件/ForegroundBlob/ForegroundBlob”； |进口 ForegroundBlobWrapper 来自 "basicComponents/ForegroundBlob/ForegroundBlobWrapper";

导入 BookDay， var _ref = | /#纯/ | _jsx(ContentWidget, , void 0, _jsx(BookDay, )); 来自“组件/BookDay/BookDay”； @ ./app/containers/PracticePage/PracticePage.js 40:0-55 58:5-14 @ ./app/containers/PracticePage/Loadable.js @ ./app/containers/App/App.js @ ./app/app.js @ 多 ./node_modules/react-app-polyfill/ie11.js ./app/app.js

我发现，每当我使用标准 div 标签更改标签时，它似乎都按照应有的方式构建。我从来没有像现在这样困惑过。

【问题讨论】：

您能展示一下您对 BookDay 的实现吗？

【参考方案1】：

我收到了这个错误：

模块解析失败：意外的关键字 'var' (13:23) 您可能需要一个 适当的加载器来处理这种文件类型。

我不清楚确切的原因，但是将我正在使用的样式化组件移动到我正在使用它们的文件中，而不是从不同的文件中导入它们，解决了这个问题。事实上，"@babel/plugin-transform-react-constant-elements" 如何处理styled-components 似乎确实存在某种问题；可能需要对循环依赖做一些事情。

【参考方案2】：

好的，经过一点调试，我发现了自己。

"@babel/plugin-transform-react-constant-elements", babel 插件似乎与样式化组件混淆了。

【讨论】：

可能晚了，这里有什么解决办法？

我没有找到除了删除插件之外的其他解决方案，因为我自己不需要它。

谢谢。也为我工作。但我不确定对我的项目的影响。 ?

对我来说幸运的是它没有（任何）后果，所以希望对你来说也是如此。