Построение статического HTML - WebpackError: нарушение инварианта: ошибка Minified React # 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.

---

Хотя сообщение немного загадочное. (не говорит, в каком компоненте он выходит из строя), кажется, что сначала проблема должна быть в реактивном шлеме.

Попытался обновить версии шлема реакции и шлема реагирования. Не сработало Стерли все следы реактивного шлема, и ошибка исчезла, но сразу после этого появилась похожая ошибка с 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

Answer 1

Когда вы следите за ошибкой сборки продукта, вы получаете:

Обычно возникает из-за проблемы с компонентом или страницей, из-за которой компонент возвращает ноль или ничего. В приведенном ниже коде я прокомментировал проверку окна, поскольку оно ничего не возвращает при создании статического содержимого.

В этом шаблоне вы проверили окно и вызвали ошибку выше.

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
        }
      }
    }
  }
`;