question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Bug] useLocation returns undefined

See original GitHub issue

I am attempting to use the useLocation hook but am getting undefined even when using it from the index.js page provided by a default setup of react-static (v7.1.0)

Environment

System:
    OS: macOS High Sierra 10.13.6
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
    Memory: 449.25 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 10.15.0 - ~/.nvm/versions/node/v10.15.0/bin/node
    npm: 6.9.0 - ~/.nvm/versions/node/v10.15.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Browsers:
    Chrome: 76.0.3809.100
    Firefox: 68.0
    Safari: 11.1.2
  npmPackages:
    react: ^16.8.2 => 16.8.6
    react-dom: ^16.8.2 => 16.8.6
    react-static: ^7.0.0 => 7.1.0
    react-static-plugin-reach-router: ^7.0.0 => 7.0.10
    react-static-plugin-sitemap: ^7.0.0 => 7.0.10
    react-static-plugin-source-filesystem: ^7.0.0 => 7.1.0
  npmGlobalPackages:
    react-static: 7.1.0

of course include any other package versions here if relevant.

Steps to Reproduce the problem

  1. Installed brand new project with react-static create
  2. Modify src/page/index.js to this:
    import React from "react";
    import { useLocation } from "react-static";
    
    export default () => {
      const location = useLocation();
      console.log(location);
      return (
        <div style={{ textAlign: "center" }}>
          <h1>Welcome to React-Static</h1>
        </div>
      );
    };
    
  3. location logs as undefined

Expected Behavior

I’m assuming it should have some location information, however there aren’t any docs on how to use useLocation.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:5 (3 by maintainers)

github_iconTop GitHub Comments

5reactions
SleeplessBytecommented, Aug 14, 2019

Change that snippet:

   export default function Doc() {
     const { content } = useRouteData();
     const { tableOfContents } = useSiteData();
     let currentSection;
-    if (typeof window !== undefined) {
+    if (typeof window !== 'undefined') {
       const [_, route, page, section, doc] = window.location.pathname.split("/");
       currentSection = tableOfContents[route][page].children[section];
     }
   
     return (...)
   }
0reactions
Jaredk3ntcommented, Aug 14, 2019

I went and looked for useLocation because I was getting build errors for using window inside one of my containers for a dynamic route. Even when adding a check before use window I get this:

Failed exporting HTML for URL blog/testBlog (  ../src/containers/Doc): window is not defined

Here is a snippet of what the Doc component was doing:

export default function Doc() {
  const { content } = useRouteData();
  const { tableOfContents } = useSiteData();
  let currentSection;
  if (typeof window !== undefined) {
    const [_, route, page, section, doc] = window.location.pathname.split("/");
    currentSection = tableOfContents[route][page].children[section];
  }

  return (...)
}
Read more comments on GitHub >

github_iconTop Results From Across the Web

useLocation returns undefined - reactjs - Stack Overflow
I use useLocation hook in my app from react-router-dom v5. However, it always returns me undefined. Here is the minimal setup to reproduce ......
Read more >
React Router, why useLocation and useHistory might return ...
I was having some head scratching moment when using the useLocation and useHistory hooks with React Router. ... They both returned undefined ....
Read more >
UseLocation returns undefined : r/reactjs - Reddit
UseLocation returns undefined. I have my routes in a component named AppEngine like this: <Router> <Navbar /> <Switch> <Route path="/" exact ...
Read more >
cannot read properties of undefined (reading 'location ...
Navigate to that route. Observe app crashing with error in useLocation(), where RouterContext is undefined. Expected behavior. I would expect app to not...
Read more >
Cannot read properties of undefined (reading 'pathname')
To solve the error, set the to prop on the Link to the specific path, e.g. <Link to="/">Home</Link> . cannot read property pathname...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found