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

Question

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

<ContentWidget>
  <BookDay />
</ContentWidget>

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

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

const ContentWidget = styled.div``;

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

./app/containers/Dashboard/Dashboard.js 中的错误 41:18 模块解析失败：意外的关键字“var”（41:18）您可能需要适当的加载程序来处理此文件类型。| 从“basicComponents/ForegroundBlob/ForegroundBlob”导入ForegroundBlob；| 从“basicComponents/ForegroundBlob/ForegroundBlobWrapper”导入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 标签更改标签时，它似乎都应该像它应该的那样构建。我从来没有像现在这样困惑过。

Answer 1

好的，所以我经过一些调试后发现了自己。

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