Question

不幸的是，由于我的项目很大，而且我不知道为什么会中断，因此我无法提供确切的副本。

构建项目然后运行它时，我会得到

0.4fce7d89.chunk.js:10807 Uncaught Error: An error occurred. See https://github.com/styled-components/styled-components/blob/master/packages/styled-components/src/utils/errors.md#1 for more information. Additional arguments: undefined
    at throwStyledComponentsError (0.4fce7d89.chunk.js:10807)
    at constructWithOptions (0.4fce7d89.chunk.js:10986)
    at styled (0.4fce7d89.chunk.js:11586)
    at Object.adf196256915bb4884ae (1.6cb64bdf.chunk.js:21896)
    at __webpack_require__ (runtime~main.bf917169.js:85)
    at Object.ee92f1fa8d9ef78bb0dc (1.6cb64bdf.chunk.js:27069)
    at __webpack_require__ (runtime~main.bf917169.js:85)
    at Module.9b1e837f9fa2db581602 (1.6cb64bdf.chunk.js:6160)
    at __webpack_require__ (runtime~main.bf917169.js:85)
    at Object.1 (1.6cb64bdf.chunk.js:23)

这里的相关块是

var ListItem = Object(styled_components_browser_esm["default"])(components["h" /* Card */]).withConfig({
  displayName: "ArticleView__ListItem",
  componentId: "sc-1k7vsbl-4"
})(["display:flex;align-items:center;box-shadow:none;background-color:", ";"], Object(app_helpers["b" /* get */])('colors', 'white'));

如下所示：

const ListItem = styled(Card)`
  display: flex;
  align-items: center;
  box-shadow: none;
  background-color: ${p => p.theme.colors.white};
`;

Card只是具有边界半径的div，是我们在错误发生之前使用的。

除了我检查了许多版本外，还重置了node_modules + yarn.lock

我不知道如何在这里调试它，因为仅当项目由webpack构建时才会发生错误。该项目没有服务器端渲染。

Answer 1

我不知道为什么，但是几天前我遇到了完全相同的错误，我设法解决了这个问题。罪魁祸首可能是您自己的自定义组件（您之前创建的组件）（通过“样式化”方法调用）–在这种情况下，是您的 ListItem < / strong>。

因此，解决方法实际上非常简单。您只需要更改编写“样式化”方法的方式即可。因此，不要这样做：

const ListItem = styled(Card)` display: flex; align-items: center; box-shadow: none; background-color: ${p => p.theme.colors.white}; `;

您应将其编写如下：

const ListItem = styled(props => <Card {...props} />)` display: flex; align-items: center; box-shadow: none; background-color: ${p => p.theme.colors.white}; `;

注意此行： styled(props => <Card {...props} />)

==================

现在，您可以尝试更改调用您自己的其他自定义组件的所有其他组件的语法-构建它，看看是否有帮助。

Answer 2

我也遇到了同样的问题！它主要发生在生产版本中，我无法在本地重现该错误！！经过几个小时的谷歌搜索后，我没有找到解决方案。最后，我在本地运行生产版本，发现我的 split(lazy-load) 页面上有循环依赖样式组件，并且当一个页面加载时，它没有引用在另一个页面上定义的导出样式组件。它在本地工作，因为我们有 webpack 运行。 因此，最佳做法是将样式化组件移动到单独的未拆分文件中。尽量不要从需要在另一个页面上引用的拆分页面导出样式组件。

样式的组件仅在生产中中断

2 个答案: