How do you get react-bootstrap to work in react-storybook

Question

I am very new to react and have been using react-storybook to build components to teach myself react UI. I am also trying to learn react-bootstrap which is recommended for the react Facebook boilerplate.

I am getting an error when I try to load a component that uses react-bootstrap

here is the error:

Nav is not defined
ReferenceError: Nav is not defined
    at eval (webpack:///./src/stories/index.js?:114:9)
    at renderMain (webpack:///./~/@kadira/storybook/dist/client/preview/render.js?:108:17)
    at renderPreview (webpack:///./~/@kadira/storybook/dist/client/preview/render.js?:141:12)
    at Array.renderUI (webpack:///./~/@kadira/storybook/dist/client/preview/index.js?:89:26)
    at Object.dispatch (webpack:///./~/redux/lib/createStore.js?:186:19)
    at ConfigApi._renderMain (webpack:///./~/@kadira/storybook/dist/client/preview/config_api.js?:48:24)
    at render (webpack:///./~/@kadira/storybook/dist/client/preview/config_api.js?:66:17)
    at ConfigApi.configure (webpack:///./~/@kadira/storybook/dist/client/preview/config_api.js?:91:9)
    at Object.eval (webpack:///./.storybook/config.js?:9:26)
    at eval (webpack:///./.storybook/config.js?:10:30)

Here is my config.js

import { configure } from '@kadira/storybook';


function loadStories() {
  require('../src/stories');
}

configure(loadStories, module);

Here is the navbar component called MenuHeader

import React from 'react';
import Navbar from 'react-bootstrap/lib/Navbar';


const Mainbar = ({}) => (
  <Navbar inverse collapseOnSelect>
    <Navbar.Header>
      <Navbar.Brand>
        <a href="#">mainBar</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>
);

export default Mainbar;

Here is the index.js

import React from 'react';
import { storiesOf, action, linkTo } from '@kadira/storybook';
import Button from './Button';
import Welcome from './Welcome';
import Mainbar from './MenuHeader';



storiesOf('Welcome', module)
  .add('to Storybook', () => (
    <Welcome showApp={linkTo('Button')}/>
  ));

storiesOf('Button', module)
  .add('with text', () => (
    <Button onClick={action('clicked')}>Hello Button</Button>
  ))
  .add('with some emoji', () => (
    <Button onClick={action('clicked')}>   </Button>
  ));

storiesOf('Mainbar', module)
  .add('Test Navbar',() => (  <Navbar inverse collapseOnSelect>
      <Navbar.Header>
        <Navbar.Brand>
          <a href="#">mainBar</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>));

Any help would greatly be appreciated

score 2 · Accepted Answer · answered Feb 01 '17 at 04:01

2

That's because in your MenuHeader Component, Nav and NavItem components are not defined.

You can import it as.

import React from 'react';
import Navbar from 'react-bootstrap/lib/Navbar';
import Nav from 'react-bootstrap/lib/Nav';
import NavItem from 'react-bootstrap/lib/NavItem';

const Mainbar = ({}) => (

Do check the import code as i haven't used react-bootstrap

answered Feb 01 '17 at 04:01

Dhruv Kumar Jha

6,421
8
37
48

1

I miss spoke. I was still getting an error after importing the additional Nav related elements to the MenuHeader Component BUT if I added the Nav related elements to the index.js I got a partial render of the element – DT90 Feb 01 '17 at 06:58
1

@DT90 Wherever you've used Nav, NavItem, or any other component/module.., you will have to import them there. So if you're using these in 100 different files, you will have to import them in all those files.** – Dhruv Kumar Jha Feb 01 '17 at 07:08

How do you get react-bootstrap to work in react-storybook

1 Answers1