TypeError: Cannot read property 'replace' of undefined #24

MontoyaAndres · 2020-01-17T00:27:06Z

These are the versions I'm using:

"dependencies": {
    "@material-ui/core": "^4.8.3",
    "@material-ui/icons": "^4.5.1",
    "graphql": "^14.5.8",
    "graphql-tag": "^2.10.1",
    "isomorphic-unfetch": "^3.0.0",
    "next": "^9.2.0",
    "next-urql": "^0.2.4",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-is": "^16.12.0",
    "styled-components": "^5.0.0",
    "urql": "^1.8.2"
  },
  "devDependencies": {
    "@types/node": "^13.1.7",
    "@types/react": "^16.9.17",
    "typescript": "^3.7.4"
  },

This is the config of the _app.tsx file:

import React from "react";
import App from "next/app";
import Head from "next/head";
import { withUrqlClient } from "next-urql";
import { ThemeProvider } from "@material-ui/core/styles";
import CssBaseline from "@material-ui/core/CssBaseline";

import theme from "../lib/theme";
import { Layout } from "../components/Layout";

class MyApp extends App {
  componentDidMount() {
    // Remove the server-side injected CSS.
    const jssStyles = document.querySelector("#jss-server-side");

    if (jssStyles) {
      jssStyles.parentElement.removeChild(jssStyles);
    }
  }

  render() {
    const { Component, pageProps } = this.props;

    return (
      <>
        <Head>
          <title>Diey | Shooter</title>
          <meta
            name="viewport"
            content="minimum-scale=1, initial-scale=1, width=device-width"
          />
        </Head>
        <ThemeProvider theme={theme}>
          {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
          <CssBaseline />
          <Layout>
            <Component {...pageProps} />
          </Layout>
        </ThemeProvider>
      </>
    );
  }
}

export default withUrqlClient({
  url: process.env.GRAPHQL_API,
  fetchOptions: {
    headers: {
      "x-hasura-admin-secret": process.env.GRAPHQL_API_PASSWORD
    }
  }
})(MyApp);

This is the page index, the component index.tsx. This error comes when I just run a simple query:

import React from "react";
import Link from "next/link";
import { useQuery } from "urql";

import Container from "@material-ui/core/Container";
import Typography from "@material-ui/core/Typography";
import Box from "@material-ui/core/Box";
import MuiLink from "@material-ui/core/Link";

function Copyright() {
  return (
    <Typography variant="body2" color="textSecondary" align="center">
      {"Copyright © "}
      <MuiLink color="inherit" href="https://material-ui.com/">
        Your Website
      </MuiLink>{" "}
      {new Date().getFullYear()}
      {"."}
    </Typography>
  );
}

const index = () => {
  const [{ data }] = useQuery({
    query: `
    query getSections {
      Sections {
        Publications {
          title
          description
          image
        }
      }
    }  
  `
  });

  console.log(data);

  return (
    <Container maxWidth="sm">
      <Box my={4}>
        <Typography variant="h4" component="h1" gutterBottom>
          Next.js example
        </Typography>
        <Link href="/about">Go to the about page</Link>
        <Copyright />
      </Box>
    </Container>
  );
};

export default index;

How can I solve it? When I add it in index.tsx page happens the same, This is the complete message:

andres@andres:~/Documents/shooter-app$ yarn dev
yarn run v1.21.1
$ next
[ wait ]  starting the development server ...
[ info ]  waiting on http://localhost:3000 ...
[ info ]  bundled successfully, waiting for typecheck results...
[ wait ]  compiling ...
[ info ]  bundled successfully, waiting for typecheck results...
[ ready ] compiled successfully - ready on http://localhost:3000
[ event ] build page: /
[ wait ]  compiling ...
[ info ]  bundled successfully, waiting for typecheck results...
[ ready ] compiled successfully - ready on http://localhost:3000
/home/andres/Documents/shooter-app/node_modules/react-ssr-prepass/dist/react-ssr-prepass.development.js:382
      throw error;
      ^

TypeError: Cannot read property 'replace' of undefined
    at /home/andres/Documents/shooter-app/node_modules/isomorphic-unfetch/index.js:3:36
    at executeFetch (/home/andres/Documents/shooter-app/node_modules/urql/dist/cjs/core.js:274:30)
    at /home/andres/Documents/shooter-app/node_modules/urql/dist/cjs/core.js:256:5
    at /home/andres/Documents/shooter-app/node_modules/wonka/dist/wonka.js:106:9
    at _1 (/home/andres/Documents/shooter-app/node_modules/wonka/dist/wonka.js:178:20)
    at /home/andres/Documents/shooter-app/node_modules/wonka/dist/wonka.js:1017:7
    at _1 (/home/andres/Documents/shooter-app/node_modules/wonka/dist/wonka.js:178:20)
    at /home/andres/Documents/shooter-app/node_modules/wonka/dist/wonka.js:477:13
    at /home/andres/Documents/shooter-app/node_modules/wonka/dist/wonka.js:498:12
    at /home/andres/Documents/shooter-app/node_modules/wonka/dist/wonka.js:748:28
    at b (/home/andres/Documents/shooter-app/node_modules/wonka/dist/wonka.js:865:14)
    at Array.forEach (<anonymous>)
    at b (/home/andres/Documents/shooter-app/node_modules/wonka/dist/wonka.js:864:77)
    at /home/andres/Documents/shooter-app/node_modules/wonka/dist/wonka.js:748:28
    at b (/home/andres/Documents/shooter-app/node_modules/wonka/dist/wonka.js:865:14)
    at Array.forEach (<anonymous>)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

The text was updated successfully, but these errors were encountered:

MontoyaAndres · 2020-01-17T03:35:58Z

Why occurs this error: https://twitter.com/JoviDeC/status/1217970632962576385?s=20

MontoyaAndres closed this as completed Jan 17, 2020

parkerziegler mentioned this issue Jan 17, 2020

warn when creating a client without url urql-graphql/urql#512

Merged

kevinwolfcr mentioned this issue Jan 23, 2020

Error when wrapping withUrqlClient with another HOC #26

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

TypeError: Cannot read property 'replace' of undefined #24

TypeError: Cannot read property 'replace' of undefined #24

MontoyaAndres commented Jan 17, 2020 •

edited

Loading

MontoyaAndres commented Jan 17, 2020

TypeError: Cannot read property 'replace' of undefined #24

TypeError: Cannot read property 'replace' of undefined #24

Comments

MontoyaAndres commented Jan 17, 2020 • edited Loading

MontoyaAndres commented Jan 17, 2020

MontoyaAndres commented Jan 17, 2020 •

edited

Loading