Fetch API cannot load webpack://... error

Question

I am trying to learn some new tricks with Apollo Client and GraphQL but I have run into an error that I can't figure out what is causing it. The stack I am using is GraphQL and ApolloClient. The error is

Fetch API cannot load webpack://%5Bname%5D_%5Bchunkhash%5D/./node_modules/react-dom/cjs/react-dom.development.js?. URL scheme must be "http" or "https" for CORS request.

I checked my CORS setup and I can make other queries with no problem. The error appears with this specific query:

query SINGLE_STORE_QUERY($id: ID!) {
    store(where: { id: $id }) {
      id
      name
      description
      image
      address
      lat
      lng
      reviews {
        user {
          name
        }
        text
        rating
      }
    }
  }

My Apollo Query in the NextJS component is:

    <Query
        query={SINGLE_STORE_QUERY}
        variables={{ id: this.props.id }}
        errorPolicy="all"
      >
        {({ data: { store }, error, loading }) => {
          if (error) return <Error error={error} />;
          if (loading) return <p>Loading...</p>;

          console.log(store);
          return (
            <div>
              <StoreHero>
                <SingleTitle>{store.name}</SingleTitle>
              </StoreHero>

              <Container>
                <p className="location">{store.address}</p>
                <p className="description">{store.description}</p>
                {store.reviews.map((review, ind) => (
                  <Review review={review} key={ind} />
                ))}
                <ReviewForm id={this.props.id} />
              </Container>
            </div>
          );
        }}
      </Query>

The interesting thing is that when I remove the reviews from the query I don't get the error. However, in the GraphQL playground it works fine, so I know the data is there. Also, if I refresh the page, it loads properly. It is only on the first load of the page that it errors out.

Can anyone point me in the right direction for how to better structure this query? I know I am close, but I am missing something minor. Thanks!

Answer 1

I had similar situation with the same error and found out, that basically this error is not connected with GraphQL or Apollo specifically. It's a react-error-overlay bug and basically means "There was an error, displaying your error" or "Couldn't display your error".

About your case: Could it be, that in Review component you are trying to access something on undefined property, like, review.text.length, and there are some reviews without this property?