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.

Unable to load specific routes manually

See original GitHub issue

Bug report

Solved

Resolved by updating next to last version.

An error occurs when I try to access to a specific route manually

I can’t load /myroute manually, it just works if I first load / (same issue for other routes) The error is:

Element is not defined
ReferenceError: Element is not defined
    at Object.<anonymous> (/Users/maastrich/Epitech/EIP/website/web/node_modules/react-transition-group/cjs/Transition.js:452:44)
    at Module._compile (internal/modules/cjs/loader.js:1176:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1196:10)
    at Module.load (internal/modules/cjs/loader.js:1040:32)
    at Function.Module._load (internal/modules/cjs/loader.js:929:14)
    at Module.require (internal/modules/cjs/loader.js:1080:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.<anonymous> (/Users/maastrich/Epitech/EIP/website/web/node_modules/react-transition-group/cjs/CSSTransition.js:14:42)
    at Module._compile (internal/modules/cjs/loader.js:1176:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1196:10)
    at Module.load (internal/modules/cjs/loader.js:1040:32)
    at Function.Module._load (internal/modules/cjs/loader.js:929:14)
    at Module.require (internal/modules/cjs/loader.js:1080:19)
    at require (internal/modules/cjs/helpers.js:72:18)
    at Object.<anonymous> (/Users/maastrich/Epitech/EIP/website/web/node_modules/react-transition-group/cjs/index.js:6:45)
    at Module._compile (internal/modules/cjs/loader.js:1176:30)

Seps To Reproduce

Run it

1: Go to terminal and run yarn run dev 2: Launch Chrome (or any other Browser) and load: http://website.domain/landing

For information, loading http://website.domain/ will correctly redirect to http://website.domain/landing and will work fine

Code snippets

next.config.js:

const withPlugins = require("next-compose-plugins");
const withImages = require("next-images");
const withSass = require("@zeit/next-sass");
const webpack = require("webpack");
const path = require("path");

module.exports = withPlugins([[withSass], [withImages]], {
  webpack(config, options) {
    config.resolve.modules.push(path.resolve("./"));
    return config;
  }
});

pages/_app.js:

import React from "react";
import ReactDOM from "react-dom";
import App from "next/app";
import Head from "next/head";
import Router from "next/router";
import PageChange from "components/PageChange/PageChange.js";
import "assets/scss/nextjs-material-kit.scss?v=1.0.0";

export default class MyApp extends App {
  static async getInitialProps({ Component, router, ctx }) {
    let pageProps = {};
    if (Component.getInitialProps) {
      pageProps = await Component.getInitialProps(ctx);
    }
    return { pageProps };
  }
  componentDidMount() {
    Router.events.on("routeChangeStart", url => {
      console.log(`Loading: ${url}`);
      document.body.classList.add("body-page-transition");
      ReactDOM.render(
        <PageChange path={url} />,
        document.getElementById("page-transition")
      );
    });
    Router.events.on("routeChangeComplete", () => {
      ReactDOM.unmountComponentAtNode(document.getElementById("page-transition"));
      document.body.classList.remove("body-page-transition");
    });
    Router.events.on("routeChangeError", () => {
      ReactDOM.unmountComponentAtNode(document.getElementById("page-transition"));
      document.body.classList.remove("body-page-transition");
    });
  }
  render() {
    const { Component } = this.props;
    return (
      <React.Fragment>
        <Head>
          <title>Global Security and Audit product</title>
        </Head>
        <Component />
      </React.Fragment>
    );
  }
}

pages/index.js:

import React, { Component } from "react";
import Router from "next/router"

export default class Index extends Component {
  componentDidMount = () => {
    Router.push("/landing");
  };
  render() {
    return <div />;
  }
}

pages/landing/index.js:

import React from "react";
import classNames from "classnames";
import { makeStyles } from "@material-ui/core/styles";
import Header from "components/Header/Header.js";
import Footer from "components/Footer/Footer.js";
import GridContainer from "components/Grid/GridContainer.js";
import GridItem from "components/Grid/GridItem.js";
import Button from "components/CustomButtons/Button.js";
import HeaderLinks from "components/Header/HeaderLinks.js";
import Parallax from "components/Parallax/Parallax.js";
import Router from "next/router"
import styles from "assets/jss/nextjs-material-kit/pages/landingPage.js";

const dashboardRoutes = [];
const useStyles = makeStyles(styles);

export default function LandingPage(props) {
  const classes = useStyles();
  const { ...rest } = props;
  return (
    <div>
// All Content
    </div>
  );
}

Expected behavior

Expecting to load landing page even when writing the route manually

Screenshots

System information

OS: macOS Catalina v10.15.4
Browser: Chrome
Version of Next.js: v9.3.6
Version of Node.js: v14.2.0

Issue Analytics

State:
Created 3 years ago
Comments:7 (4 by maintainers)

Top GitHub Comments

1reaction

Maastrichcommented, May 9, 2020

I cloned your repository, started the dev server, went to http://localhost:3000/landing and the page loaded as expected with no console errors. Are there any other reproduction steps I can follow?

It works since I accept the PR from dependabot (that upgrade next) Thank you for your help, I’ll close the ISSUE

0reactions

balazsorban44commented, Jan 30, 2022

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.