javascript - 构建静态 HTML - WebpackError: Invariant Violation: Minified React error #152

问题描述

在构建静态 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 中安装，但没有成功。

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

我之前检查了每个组件返回。我更进一步，放弃了隐式返回，并在 React 中使所有返回显式。

仍然没有工作

降级节点或更新 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

标签： javascriptreactjsgatsby

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

通常由组件或页面问题导致组件返回 null 或不返回任何内容。在下面的代码中，我注释掉了检查窗口，因为它在构建静态内容时不会返回任何内容。

在此模板中，您检查了 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
        }
      }
    }
  }
`;

javascript - 构建静态 HTML - WebpackError: Invariant Violation: Minified React error #152

问题描述

解决方案

推荐阅读