Gatsby - Сборка - WebpackError: Инвариант не удался - PullRequest
Новая
       17

Gatsby - Сборка - WebpackError: Инвариант не удался

0 голосов
/ 30 сентября 2019

У меня проблемы со сборкой моего проекта в Гэтсби. Разработка работает нормально, но когда я пытаюсь собрать, я получаю сообщение об ошибке: 

ERROR #95313

Building static HTML failed for path "/Components/Layout/Footer/"

See our docs page for more info on this error: https://gatsby.dev/debug-html


   7 |
   8 |   if (isProduction) {
  9 |     throw new Error(prefix);
     | ^
  10 |   } else {
  11 |     throw new Error(prefix + ": " + (message || ''));
  12 |   }


  WebpackError: Invariant failed

  - tiny-invariant.esm.js:9 invariant
    [front-gatsby]/[tiny-invariant]/dist/tiny-invariant.esm.js:9:1

  - react-router-dom.js:172 Object.children
    [front-gatsby]/[react-router-dom]/esm/react-router-dom.js:172:132

  - static-entry.js:240 Module.../../../../../front-gatsby/.cache/static-entry.js.__webpack_exports__.default
    /front-gatsby/.cache/static-entry.js:240:18

  - api-runner-ssr.js:19 MappingPromiseArray.PromiseArray._iterate
    /front-gatsby/.cache/api-runner-ssr.js:19:1

Я понятия не имею, с чего начать отладку. Мой сайт довольно простой, с некоторыми статическими страницами и редукцией.

Ниже приведен мой код. У меня есть в основном статический сайт, использующий Redux и реагирующий маршрутизатор DOM для навигации. Раньше у меня была ошибка при сборке: «не удалось найти магазин», поэтому мне пришлось создать и gatsby-browser, и gatsby-ssr для включения провайдера:

index.js: 

import React, { Component } from 'react';
import './App.css';
import Navigation from './Components/Navigation'
import { library } from '@fortawesome/fontawesome-svg-core'
import { faStroopwafel, faStar, faCircle, faCheckCircle,faTimesCircle} from '@fortawesome/free-solid-svg-icons'
import 'bootstrap/dist/css/bootstrap.min.css';

class App extends Component {

  render() {

    library.add(faStroopwafel, faStar, faCircle, faCheckCircle, faTimesCircle)

    return (

      <div className="App">
        <Navigation/>
      </div>
    );
  }
}

export default App;

ReduxWrapper: 

import React, { Component } from 'react';
import shop from './reducers/shop.reducer'; // importation du shop
import erreur from './reducers/erreur.reducer'; // importation du erreur
import panier from './reducers/panier.reducer'; // importation du erreur
import {Provider} from 'react-redux';  // importation du provider
import createEngine from 'redux-storage-engine-localstorage';
import {createStore, combineReducers, applyMiddleware}  from 'redux'; // importation du reduceur
import * as storage from 'redux-storage'; // storage

const reducer = storage.reducer(combineReducers({shop, erreur,panier}));
const engine = createEngine('my-save-key');
const middleware = storage.createMiddleware(engine);
const createStoreWithMiddleware = applyMiddleware(middleware)(createStore);
const store = createStoreWithMiddleware(reducer);
const load = storage.createLoader(engine);

load(store);


export default ({ element }) => (
  <Provider store={store}>{element}</Provider>
);

gatsby-browser & gatsby-ssr (идентичные) 

export { default as wrapRootElement } from './src/pages/ReduxWrapper';

Мой Package.json: 

{
  "name": "gatsby-starter-hello-world",
  "private": true,
  "description": "",
  "version": "0.1.0",
  "license": "MIT",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop",
    "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
    "start": "npm run develop",
    "serve": "gatsby serve",
    "test": "echo \"Write tests! -> https://gatsby.dev/unit-testing \""
  },
  "dependencies": {
    "@feathersjs/feathers": "^4.3.0-pre.1",
    "@feathersjs/rest-client": "^4.3.0-pre.1",
    "@fortawesome/fontawesome-svg-core": "^1.2.18",
    "@fortawesome/free-solid-svg-icons": "^5.8.2",
    "@fortawesome/react-fontawesome": "^0.1.4",
    "bootstrap": "^4.3.1",
    "emailjs-com": "^2.4.0",
    "express": "^4.17.0",
    "express-favicon": "^2.0.1",
    "fs": "0.0.1-security",
    "gatsby": "^2.15.28",
    "gatsby-plugin-mailchimp": "^5.1.2",
    "gatsby-plugin-react-helmet": "^3.1.10",
    "gatsby-plugin-stripe": "^1.2.3",
    "react": "^16.10.1",
    "react-bootstrap": "^1.0.0-beta.10",
    "react-dom": "^16.10.1",
    "react-helmet": "^5.2.1",
    "react-redux": "^7.0.3",
    "react-responsive-carousel": "^3.1.49",
    "react-router-dom": "^5.0.0",
    "react-router-hash-link": "^1.2.1",
    "react-router-hash-link-offset": "^1.0.1",
    "react-scripts": "2.1.8",
    "react-scroll-to-component": "^1.0.2",
    "react-stripe-checkout": "^2.6.3",
    "react-stripe-elements": "^4.0.0",
    "reactstrap": "^7.1.0",
    "redux": "^4.0.1",
    "redux-storage": "^4.1.2",
    "redux-storage-engine-localstorage": "^1.1.4",
    "uuid": "^3.3.3"
  },
  "devDependencies": {
    "prettier": "^1.18.2"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/gatsbyjs/gatsby-starter-hello-world"
  },
  "bugs": {
    "url": "https://github.com/gatsbyjs/gatsby/issues"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

Этоне работает при запуске "gatsby build", останавливается на шаге "Сборка статического HTML для страниц" и появляется ошибка выше

1 Ответ

0 голосов
/ 03 октября 2019

Бьюсь об заклад, проблема в том, что вы используете избыточное хранилище. Гэтсби не может получить доступ к каким-либо API-интерфейсам браузера во время сборки, поэтому вам нужно обернуть условную проверку, чтобы убедиться, что localalstorage доступен (для страницы отладки html, которая уже была предложена).

Я не являюсьзнаком с использованием избыточности в gatsby, но я бы переписал вашу оболочку избыточности, чтобы она была ближе к официальному примеру , и поместил бы настройку избыточного хранилища в if (typeof window !== 'undefined') блок

...