Как настроить ответ-редукс-пожарный магазин в СЛЕДУЮЩЕМ. JS - PullRequest
Новая
       19

Как настроить ответ-редукс-пожарный магазин в СЛЕДУЮЩЕМ. JS

0 голосов
/ 24 апреля 2020

Я мигрирую из приложения Create React (рендеринг на стороне клиента) в Next JS (рендеринг на стороне сервера) по причинам SEO. Миграция шла хорошо до использования React-Redux-Firebase / Firestore. Это страница, которую я пытаюсь загрузить:

Discover. js

import React, { Component } from 'react'
import { firestoreConnect, isEmpty } from 'react-redux-firebase';
import { compose } from 'redux'
import { connect } from "react-redux";
import { blogpostsQuery } from '../blogposts/blogpostsQuery';
import DiscoverList from "./DiscoverList";



const mapState = (state, ownProps) => {
  let blogposts = {};

  blogposts =
  !isEmpty(state.firestore.ordered.blogposts) &&
  state.firestore.ordered.blogposts;

  return {
    blogposts,
  };
};


class DiscoverPage extends Component {
  render() {
    const {blogposts} = this.props
     return (
      <div className="container">
        <div className="hero">
          <h1>Discover stories</h1>
          <p className="lead">Blogpost published:</p>
        </div>
      <DiscoverList blogposts={blogposts} />
    </div>
    )
  }
}


export default compose(
  firestoreConnect(() => blogpostsQuery()), 
  connect(mapState, null) 
)(DiscoverPage)

Я получил следующую ошибку: 

ReferenceError: XMLHttpRequest is not defined
    at Rn.ca (/Users/fridovandriem/timepath/node_modules/firebase/firebase-firestore.js:1:36966)
    at Ie (/Users/fridovandriem/timepath/node_modules/firebase/firebase-firestore.js:1:18723)
    at Se (/Users/fridovandriem/timepath/node_modules/firebase/firebase-firestore.js:1:18385)
    at Kn.a.Ia (/Users/fridovandriem/timepath/node_modules/firebase/firebase-firestore.js:1:39600)
    at jt (/Users/fridovandriem/timepath/node_modules/firebase/firebase-firestore.js:1:15360)
error Command failed with exit code 1.

Я не был Единственный с этой проблемой, и я нашел решение на GitHub по prescottprue: https://github.com/prescottprue/react-redux-firebase/issues/72

Включая документацию: http://react-redux-firebase.com/docs/recipes/ssr.html

 // needed to fix "Error: The XMLHttpRequest compatibility library was not found."
    global.XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest

Проблема в том (извините, я новый разработчик). Я понятия не имею, куда добавить эту строку кода? Добавление его в _app. js не работает .. я добавил https://www.npmjs.com/package/xmlhttprequest, но все равно не повезло ...

-app. js

import App from "next/app";
import { Provider } from "react-redux";
import React, { Fragment } from "react";
import withRedux from "next-redux-wrapper";
import "../src/styles.css";
import configureStore from "../src/app/store/configureStore";
import Header from "../src/app/layout/Header";
import NavBar from "../src/app/layout/nav/Navbar/NavBar";
import Footer from "../src/app/layout/Footer";
global.XMLHttpRequest = require('xmlhttprequest').XMLHttpRequest

class MyApp extends App {
  static async getInitialProps({ Component, ctx }) {
    const pageProps = Component.getInitialProps
      ? await Component.getInitialProps(ctx)
      : {};

    //Anything returned here can be accessed by the client
    return { pageProps: pageProps };
  }

  render() {
    const { Component, pageProps, store } = this.props;
    return (
      <Fragment>
        <Header />
        <NavBar />
        <Provider store={store}>
          <Component {...pageProps} />
        </Provider>
        <Footer />
      </Fragment>
    );
  }
}

export default withRedux(configureStore)(MyApp);

Может ли кто-нибудь мне помочь?

Большое спасибо

Frido

...