Error: Invalid JSON RPC response: ""

Question

I'm trying to get some info from an array using web3, when I try this

    async componentDidMount() {
      const product = await store.methods.storeProducts(0).call();
      console.log(product);
      }

everything works fine, it finds the data and everything, but when I try with getInitialProps(), it returns the error " Error: Invalid JSON RPC response: "" ";

  ListProduct.getInitialProps = async () => {
  const product = await store.methods.storeProducts(0).call();
  return {product}
   }

This is the import statements:

  import React, {Component} from 'react';
  import 'semantic-ui-css/semantic.min.css';
  import store from "../ethereum/OnlineStore"

This is what my package.json looks like:

    "@truffle/hdwallet-provider": "^1.4.0",
    "dotenv": "^10.0.0",
    "fs-extra": "^10.0.0",
    "ganache-cli": "^6.12.2",
    "mocha": "^8.4.0",
    "next": "^10.2.3",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "solc": "^0.8.5",
    "truffle": "^5.3.9",
    "truffle-hdwallet-provider": "^1.0.17",
    "web3": "^1.3.6"

Answer 1

So, after some days I got back to it, and managed to solve it.

The problem was that the contract I had deployed did not have any data in it.

So, the storeproducts had a length of zero (nothing on it), so I belive that is the reason why it did not work

Second thing that might have done is I got a newer version of Nextjs and Web3

Also recreated the whole project so that might have helped too.

I hope this helps anyone in the future!