CODEWITHSUNDEEP
reactjsreact-router
Kevin Leong
Kevin Leong

Reputation: 39

REACT Website npm start doesn't start website

When I use NPM Start it opens up a webpage in Chrome but after a while, it says

"Aw, Snap! Something went wrong while displaying this webpage."

GitHub Repository for the code. I can't give a small piece fo code because I don't know what is giving the error.

I would like it to run and show my webpages. Not sure why it isn't working. The first time I started the server using NPM start it gave me this page. Page loading error

Upvotes: 1

Views: 1030

Answers (2)

Joseph Alex
Joseph Alex

Reputation: 1

I was having this issue, for me the problem was caused by adding a button component so i deleted a part of my codes

const checkButtonStyle = STYLES.includes(buttonStyle)?buttonStyle:STYLES[0]
const checkButtonSize = SIZE.includes(buttonSize) ? buttonSize: SIZE[0]

try this link for more options on how to solve it

1:

Upvotes: 0

Sylens
Sylens

Reputation: 1177

The issue is with the Navbar.js

The issue is your class name here was Nav but Nav was also used in the render function. I have renamed Nav to CustomNavbar and imported the bootstrap nav from the npm package.

change your code to this

import React from 'react';
import { Link } from 'react-router-dom';
import Navbar  from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';
import { Button, FormControl, Form, NavDropdown } from "react-bootstrap";

export default class CustomNavbar extends React.Component {
  render() {
    return (
      <div>
        <Navbar bg="light" expand="lg">
          <Navbar.Brand href="#home">Pawsitively Delicious</Navbar.Brand>
          <Navbar.Toggle aria-controls="basic-navbar-nav" />
          <Navbar.Collapse id="basic-navbar-nav">
            <Nav className="mr-auto">
              <Nav.Link href="/">Home</Nav.Link>
              <Nav.Link href="AboutUs.js">About Us</Nav.Link>
              <NavDropdown title="Ingredients" id="basic-nav-dropdown">
                <NavDropdown.Item href="./TypesOfDogTreats">Types of Dog Treats</NavDropdown.Item>
                <NavDropdown.Item href="AllIngredients.js">Ingredients</NavDropdown.Item>
              </NavDropdown>
            </Nav>
            <Form inline>
              <FormControl type="text" placeholder="Search" className="mr-sm-2" />
              <Button variant="outline-success">Search</Button>
            </Form>
          </Navbar.Collapse>
        </Navbar>
      </div>
    );
  } // END OF RENDER
} // END OF Navbar

Upvotes: 2

Related Questions