Question

我的代码有一个奇怪的问题，我有一个样式化的组件div，它包裹着另一个这样的组件：

<ContentWidget>
  <BookDay />
</ContentWidget>

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

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

const ContentWidget = styled.div``;

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

  ./app/containers/Dashboard/Dashboard.js中的
ERROR 41:18模块解析   失败：意外的关键字“ var”（41:18）您可能需要适当的关键字   加载程序来处理此文件类型。 |从导入ForegroundBlob   “ basicComponents / ForegroundBlob / ForegroundBlob”； |进口   来自的ForegroundBlobWrapper   “ basicComponents / ForegroundBlob / ForegroundBlobWrapper”;


导入BookDay，{var _ref = | / ＃纯 / | _jsx（ContentWidget，{}，void 0，_jsx（BookDay，{}）））; }来自“ 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 @多     ./node_modules/react-app-polyfill/ie11.js ./app/app.js

我发现，每当我用标准div标签更改标签时，它的构建似乎就应该如此。我从未像现在这样困惑过。

Answer 1

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

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

Answer 2

我遇到此错误：

模块解析失败：意外的关键字“ var”（13:23）您可能需要适当的加载程序来处理此文件类型。

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

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

2 个答案: