Getting a JSON error after importing react-bootsrap components into FB Create-React-App Boilerplate

Question

I am simply trying to understand react components.

I know I am doing something wrong but I dont know what.

I am just trying to get a navbar component to show up on the test page of the Create-React-App Boilerplate.

Here is my Package JSON:

 {

  "name": "Test_WebSite",

  "version": "0.1.0",

  "private": true,

  "devDependencies": {

    "react-scripts": "0.8.4"

  },

  "dependencies": {

    "react": "^15.4.1",

    "react-dom": "^15.4.1",

    "react-bootstrap": "^0.30.7"

  },

  "scripts": {

    "start": "react-scripts start",

    "build": "react-scripts build",

    "test": "react-scripts test --env=jsdom",

    "eject": "react-scripts eject"

  },

  }

  // ...

  "eslintConfig": {

    "extends": "react-app"

  },

}

Here is my App.js:

import React, { Component } from 'react';

import logo from './logo.svg';

import './App.css';

import { Navbar, Nav, NavItem } from 'react-bootstrap';



const MenuBar =({name, Link1, Link2})=>(



<Navbar inverse collapseOnSelect>

  <Navbar.Header>

    <Navbar.Brand>

      <a href="#">{name}</a>

    </Navbar.Brand>

    <Navbar.Toggle />

  </Navbar.Header>

  <Navbar.Collapse>

    <Nav>

      <NavItem eventKey={1} href="#">{Link1}</NavItem>

      <NavItem eventKey={2} href="#">{Link2}</NavItem>

    </Nav>

  </Navbar.Collapse>

</Navbar>

);







class App extends Component {

  render() {

    return (

      <div className="App">

        <div className="App-header">

          <img src={logo} className="App-logo" alt="logo" />

          <h2>Welcome to React</h2>

        </div>

        <p className="App-intro">

          To get started, edit <code>src/App.js</code> and save to reload.

        </p>

        <div>

          <MenuBar name="WTF"/>

        </div>



      </div>

    );

  }

}



export default App;

After adding

import { Navbar, Nav, NavItem } from 'react-bootstrap'

and creating the Menubar Component I get this error:

Failed to compile.



Error in ./src/App.js

Module not found: Syntax/Volumes/Main Drive/Test_WebSite/package.json (directory description file): SyntaxError: Unexpected token } in JSON at position 411



 @ ./src/App.js 21:22-48

I dont think it is JSON related though because if I remove everything I added the test page renders correctly.

I have no doubt it is something simple but I ca not see it. Any help would greatly be appresated

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

Here is how I got it to work:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import bootstrap from 'bootstrap/dist/css/bootstrap.css' //<< added this css file
import { Navbar, Nav, NavItem } from 'react-bootstrap';

const MenuBar =({Name, Link1, Link2})=>(
<Navbar inverse collapseOnSelect>
  <Navbar.Header>
    <Navbar.Brand>
      <a href="#">{Name}</a>
    </Navbar.Brand>
    <Navbar.Toggle />
  </Navbar.Header>
  <Navbar.Collapse>
    <Nav>
      <NavItem eventKey={1} href="#">{Link1}</NavItem>
      <NavItem eventKey={2} href="#">{Link2}</NavItem>
    </Nav>
  </Navbar.Collapse>
</Navbar>
);


class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <div>
          <MenuBar Name="Am I a Fool" Link1="Foo" Link2="Bar" />
        </div>
      </div>
    );
  }
}

export default App;

Getting a JSON error after importing react-bootsrap components into FB Create-React-App Boilerplate

Sign up