Building Static HTML - WebpackError: Invariant Violation: Minified React error #152

Question

在构建静态 HTML 时出现错误：

8 |  else
9 |          root["lib"] = factory(root["@reach/router"], root["core- 
js/modules/es6.array.sort"], root["fs"], root["lodash"], root["path"], 
root["react"], root["react-dom/server"], root["react-helmet"]);
> 10 | })(this, function(__WEBPACK_EXTERNAL_MODULE__reach_router__, 
__WEBPACK_EXTERNAL_MODULE_core_js_modules_es6_array_sort__, 
__WEBPACK_EXTERNAL_MODULE_fs__, __WEBPACK_EXTERNAL_MODULE_lodash__, 
__WEBPACK_EXTERNAL_MODULE_path__, __WEBPACK_EXTERNAL_MODULE_react__, 
__WEBPACK_EXTERNAL_MODULE_react_dom_server__, 
__WEBPACK_EXTERNAL_MODULE_react_helmet__) {
 |  ^
 11 | return


  WebpackError: Invariant Violation: Minified React error #152; visit 
https://reactjs.org/docs/error-decoder.html? 
invariant=152&args[]=Component for the f  ull message or use the non- 
minified dev environment for full errors and additional helpful 
warnings.

虽然消息有点含糊。（没有说是哪个组件失败了），看来问题应该出在react-helmet上。

尝试更新 react-helmet 和 react-plugin-helmet 的版本。没用。删除了 react-helmet 的所有痕迹，错误消失了，但之后出现了与 lodash 类似的错误（Invariant Violation: Minified React error #152）。 Lodash 仅在 package-lock.json 中被引用。尝试在 package.json lodash 和 gatsby-plugin lodash 中安装但没有成功。

在开发模式下，正如预期的那样，一切正常。

我之前检查了每个组件 return。我走得更远，放弃了隐式 return 并使 React 中的所有 return 显式。

仍然没有工作

构建问题不会随着节点降级或更新 gatsby 而消失，并对最新版本做出反应。

这是代码库

https://github.com/pedrotavaresgoncalves/gatsby-debug

环境：

System:
OS: macOS 10.14
CPU: x64 Intel(R) Core(TM) i7-3615QM CPU @ 2.30GHz
Shell: 3.2.57 - /bin/bash
Binaries:
Node: v10.13.0 - /usr/local/bin/node
npm: 6.4.1 - /usr/local/bin/npm
Browsers:
Chrome: 70.0.3538.77
Firefox: 60.0.2
Safari: 12.0
npmPackages:
gatsby: 2.0.19 => 2.0.19
gatsby-image: ^2.0.19 => 2.0.19
gatsby-plugin-lodash: ^3.0.2 => 3.0.2
gatsby-plugin-manifest: 2.0.2 => 2.0.2
gatsby-plugin-offline: 2.0.5 => 2.0.5
gatsby-plugin-react-helmet: ^3.0.1 => 3.0.1
gatsby-plugin-sass: 2.0.1 => 2.0.1
gatsby-plugin-sharp: 2.0.6 => 2.0.6
gatsby-plugin-typography: ^2.2.0 => 2.2.0
gatsby-source-filesystem: 2.0.1 => 2.0.1
gatsby-transformer-json: 2.1.2 => 2.1.2
gatsby-transformer-remark: 2.1.3 => 2.1.3
gatsby-transformer-sharp: 2.1.3 => 2.1.3
npmGlobalPackages:
gatsby-cli: 2.4.4

Answer 1

当您遵循生产构建错误时，您会得到：

通常是由组件或页面问题引起的，导致组件 return 为 null 或什么都没有。在下面的代码中，我注释掉了 window 的检查，因为在构建静态内容时它不会 return 任何东西。

在此模板中，您检查了 window 并导致了上述错误。

import React from 'react';
import Layout from '../components/layout';
import {graphql} from 'gatsby';

export default ({pageContext: {locale, folderName}, data}) => {
  // if (typeof window !== `undefined`) {
    const fileFrontmatter = data.file.childMarkdownRemark.frontmatter;

    return (
      <Layout path="/" locale={locale}>
        <div>{fileFrontmatter.title}</div>
      </Layout>
    );
  // }
};

export const query = graphql`
  query Template($locale: String, $folderName: String) {
    file(name: { eq: $locale }, relativeDirectory: { eq: $folderName }) {
      childMarkdownRemark{
        frontmatter{
          title
        }
      }
    }
  }
`;

Building Static HTML - WebpackError: Invariant Violation: Minified React error #152

Building Static HTML - WebpackError: Invariant Violation: Minified React error #152

javascript

reactjs

gatsby