javascript - React 风格的组件在生产中导致构建错误，但在开发中运行良好

Question

我的代码有一个奇怪的问题，我有一个样式化的组件 div 包裹着另一个组件，如下所示:

<ContentWidget>
  <BookDay />
</ContentWidget>

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

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

const ContentWidget = styled.div``;

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

ERROR in ./app/containers/Dashboard/Dashboard.js 41:18 Module parse failed: Unexpected keyword 'var' (41:18) You may need an appropriate loader to handle this file type. | import ForegroundBlob from "basicComponents/ForegroundBlob/ForegroundBlob"; | import ForegroundBlobWrapper from "basicComponents/ForegroundBlob/ForegroundBlobWrapper";

import BookDay, { var _ref = | /#PURE/ | _jsx(ContentWidget, {}, void 0, _jsx(BookDay, {})); } from "components/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 @ multi ./node_modules/react-app-polyfill/ie11.js ./app/app.js

我发现，每当我用标准的 div 标签更改标签时，它似乎都能正常构建。我从来没有像现在这样困惑过。

Answer 1

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

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