Question

我在构建我的gatsby项目时遇到了麻烦。开发工作正常，但是当我尝试构建时，出现错误：

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。

下面是我的代码。我基本上有一个使用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浏览器和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”步骤中停止，并显示上述错误

Answer 1

我敢打赌，问题在于您对redux-storage的使用。 Gatsby在构建期间无法访问任何浏览器API，因此您需要包装条件检查以确保本地存储可用（根据已经建议的html调试页面）。

我不熟悉gatsby中的redux用法，但是我会重写redux包装器使其更接近the official example，并将redux-storage设置放在import discord import discord.ext client = discord.Client() @client.event async def on_guild_channel_create(channel): await print('the channel has been create ') return client.run('TOKEN')块中

Gatsby-构建-WebpackError：不变式失败

1 个答案: