How to setup react-redux-firestore in NEXT.JS

Question

I am migrating from my Create React App (client-side-rendering) to Next JS (server-side rendering) due to SEO reasons. Migrating was going well until using React-Redux-Firebase / Firestore. This is the page I am trying to load:

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)

The error I received is this:

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.

I wasn't the only one with this problem and I have found the solution on GitHub by prescottprue: https://github.com/prescottprue/react-redux-firebase/issues/72

Including documentation: 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

The problem is (sorry i am new developer) I have no idea where to add this line of code? Adding it to _app.js doesnt work.. i've added https://www.npmjs.com/package/xmlhttprequest but still no luck...

-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);

Could somebody help me?

Many thanks

Frido

How to setup react-redux-firestore in NEXT.JS

0 Answers0

Linked