# Create Containers

**URL:** <https://discourse.sst.dev/t/create-containers/62>\
**Category:** Chapter Comments\
**Created:** [May 9, 2018, 6:39pm UTC](https://discourse.sst.dev/t/create-containers/62 "2018-05-09T18:39:13Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![anomalyinnovations](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/anomalyinnovations/32/10_2.png) [@anomalyinnovations](https://discourse.sst.dev/u/anomalyinnovations)\
**Post date:** [May 9, 2018, 6:39pm UTC](https://discourse.sst.dev/t/create-containers/62/1 "2018-05-09T18:39:13Z")

</div>

_From @jayair on Mon Apr 10 2017 01:02:28 GMT+0000 (UTC)_  
  
Link to chapter - [http://serverless-stack.com/chapters/create-containers.html](http://serverless-stack.com/chapters/create-containers.html)  
  
_Copied from original issue: [https://github.com/AnomalyInnovations/serverless-stack-com/issues/34](https://github.com/AnomalyInnovations/serverless-stack-com/issues/34)_

---

<div class="post-metadata">

**Author:** ![ravin018](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/ravin018/32/333_2.png) [@ravin018](https://discourse.sst.dev/u/ravin018)\
**Post date:** [December 2, 2018, 12:21pm UTC](https://discourse.sst.dev/t/create-containers/62/2 "2018-12-02T12:21:58Z")

</div>

```auto
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `Route`.

```

I am facing this issue when i added in App.js. I am sure i am doing something silly. Anyone else faced this issue ?

---

<div class="post-metadata">

**Author:** ![jayair](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/jayair/32/9_2.png) [@jayair](https://discourse.sst.dev/u/jayair)\
**Post date:** [December 2, 2018, 10:09pm UTC](https://discourse.sst.dev/t/create-containers/62/3 "2018-12-02T22:09:48Z")

</div>

Can you tell me after which step you are seeing this?

---

<div class="post-metadata">

**Author:** ![interactivenyc](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/interactivenyc/32/391_2.png) [@interactivenyc](https://discourse.sst.dev/u/interactivenyc)\
**Post date:** [January 29, 2019, 10:11pm UTC](https://discourse.sst.dev/t/create-containers/62/4 "2019-01-29T22:11:05Z")

</div>

I’m seeing this too, after pasting in the code for App.js.

When I delete the \<Navbar.Header\> and \</Navbar.Header\> tags, the error goes away, but the display doesn’t look right. it’s complaining about the fluid attribute of Navbar being a Boolean.

Here’s my code:

```
import React, { Component } from 'react';
import Routes from './Routes';
import { Link } from 'react-router-dom';
import { Navbar } from 'react-bootstrap';
import './App.css';

class App extends Component {
    render() {
        return (
            <div className="App container">
                <Navbar fluid collapseOnSelect>
                    <Navbar.Brand>
                        <Link to="/">Scratch</Link>
                    </Navbar.Brand>
                    <Navbar.Toggle />
                </Navbar>
                <Routes />
            </div>
        );
    }
}

```

export default App;And here’s the error on the page:

 ![fluidError](https://canada1.discourse-cdn.com/flex032/uploads/serverless_stack/original/1X/94966bfa6b1a07c03bd03775f27a81ef9bf08038.png)

---

<div class="post-metadata">

**Author:** ![interactivenyc](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/interactivenyc/32/391_2.png) [@interactivenyc](https://discourse.sst.dev/u/interactivenyc)\
**Post date:** [January 29, 2019, 11:18pm UTC](https://discourse.sst.dev/t/create-containers/62/5 "2019-01-29T23:18:32Z")

</div>

This is a problem with the version of react-bootstrap.

If you install this version of the package, you will not see these errors:

```
"react-bootstrap": "^0.32.4"

```

I was having a problem with the latest version, which is currently:

```
"react-bootstrap": "^1.0.0-beta.5"
```

---

<div class="post-metadata">

**Author:** ![jayair](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/jayair/32/9_2.png) [@jayair](https://discourse.sst.dev/u/jayair)\
**Post date:** [January 30, 2019, 11:57am UTC](https://discourse.sst.dev/t/create-containers/62/6 "2019-01-30T11:57:23Z")

</div>

Thanks for letting me know. I’ll update the tutorial to pin the version for now.

---

<div class="post-metadata">

**Author:** ![mohamed-albgal](https://avatars.discourse-cdn.com/v4/letter/m/f04885/32.png) [@mohamed-albgal](https://discourse.sst.dev/u/mohamed-albgal)\
**Post date:** [October 24, 2019, 2:14am UTC](https://discourse.sst.dev/t/create-containers/62/7 "2019-10-24T02:14:07Z")

</div>

I’m still getting the same error you got despite using the version of react-bootstrap you suggest. The same thing is happening. Removing the \<Navbar.Header\> fixes it but the display the layout looks bad. Any suggestions?

---

<div class="post-metadata">

**Author:** ![jayair](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/jayair/32/9_2.png) [@jayair](https://discourse.sst.dev/u/jayair)\
**Post date:** [October 26, 2019, 2:34am UTC](https://discourse.sst.dev/t/create-containers/62/8 "2019-10-26T02:34:05Z")

</div>

Whats the issue you are having?

---

<div class="post-metadata">

**Author:** ![dwpdx](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/dwpdx/32/641_2.png) [@dwpdx](https://discourse.sst.dev/u/dwpdx)\
**Post date:** [October 28, 2019, 4:09pm UTC](https://discourse.sst.dev/t/create-containers/62/9 "2019-10-28T16:09:28Z")

</div>

I was able to resolve this issue and use the latest version of react-bootstrap ("^1.0.0-beta.14") by updating my App function to the following. I used the guide from the RBS [documentation](https://react-bootstrap.github.io/components/navbar/).

Hope this can help anyone else getting a similar problem.

```
function App(props) {
  return (
    <div className="App container">
      <Navbar bg="light" expand="lg">
        <Navbar.Brand href="/">Scratch</Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" />
      </Navbar>
      <Routes />
    </div>
  );
}
```

---

<div class="post-metadata">

**Author:** ![jayair](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/jayair/32/9_2.png) [@jayair](https://discourse.sst.dev/u/jayair)\
**Post date:** [November 3, 2019, 1:29am UTC](https://discourse.sst.dev/t/create-containers/62/10 "2019-11-03T01:29:08Z")

</div>

Just a heads up, there might be a lot of other changes you’ll need to make for that version of React Bootstrap. We are holding off until v1 comes out of beta.

---

<div class="post-metadata">

**Author:** ![dwpdx](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/dwpdx/32/641_2.png) [@dwpdx](https://discourse.sst.dev/u/dwpdx)\
**Post date:** [November 3, 2019, 1:59am UTC](https://discourse.sst.dev/t/create-containers/62/11 "2019-11-03T01:59:56Z")

</div>

Oh yea definitely discovered that 🙂 So far the biggest change has been only needing to import the Form component and using its dot options. If anyone needs I’d be happy to share. Thanks for this walk through it’s been very helpful!

---

<div class="post-metadata">

**Author:** ![boxabirds](https://avatars.discourse-cdn.com/v4/letter/b/c57346/32.png) [@boxabirds](https://discourse.sst.dev/u/boxabirds)\
**Post date:** [December 15, 2019, 4:19pm UTC](https://discourse.sst.dev/t/create-containers/62/12 "2019-12-15T16:19:10Z")

</div>

Hi y’all I had some problems with styling for a while because in the PDF version, the CSS string is truncated and I had just `https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css`:

[[Album] Imgur ![](https://canada1.discourse-cdn.com/flex032/uploads/serverless_stack/original/1X/13433de4834f96fdfceafad14675720e2e6eeb1b.jpeg "Imgur") ](https://imgur.com/a/iPRwffQ)

The right URL for bootstrap css of course as per the html page is as of this date:

`https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css`

---

<div class="post-metadata">

**Author:** ![jayair](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/jayair/32/9_2.png) [@jayair](https://discourse.sst.dev/u/jayair)\
**Post date:** [December 16, 2019, 1:42am UTC](https://discourse.sst.dev/t/create-containers/62/13 "2019-12-16T01:42:51Z")

</div>

Thanks for pointing it out!

---

<div class="post-metadata">

**Author:** ![JMAWS](https://avatars.discourse-cdn.com/v4/letter/j/a88e57/32.png) [@JMAWS](https://discourse.sst.dev/u/JMAWS)\
**Post date:** [April 28, 2020, 11:24am UTC](https://discourse.sst.dev/t/create-containers/62/14 "2020-04-28T11:24:46Z")

</div>

Please guide for below error

 ![image](https://canada1.discourse-cdn.com/flex032/uploads/serverless_stack/original/1X/92c02d9a9160be10f4601537d1217d00218d1601.png)

---

<div class="post-metadata">

**Author:** ![JMAWS](https://avatars.discourse-cdn.com/v4/letter/j/a88e57/32.png) [@JMAWS](https://discourse.sst.dev/u/JMAWS)\
**Post date:** [May 1, 2020, 4:18pm UTC](https://discourse.sst.dev/t/create-containers/62/15 "2020-05-01T16:18:17Z")

</div>

Still not able to shootout the above issue. Any help ?

---

<div class="post-metadata">

**Author:** ![JMAWS](https://avatars.discourse-cdn.com/v4/letter/j/a88e57/32.png) [@JMAWS](https://discourse.sst.dev/u/JMAWS)\
**Post date:** [May 1, 2020, 4:19pm UTC](https://discourse.sst.dev/t/create-containers/62/16 "2020-05-01T16:19:19Z")

</div>

RESOLVED!!!  
There was some issue with index.js file  
Thanks

Please help for Error: Invariant failed: You should not use outside a

While creating container…

> **[Create Containers](https://serverless-stack.com/chapters/create-containers.html)**
>
> To split up our React.js app into different routes we are going to structure it using containers in React Router v4. We are also going to add the Navbar React-Bootstrap component to our App container.

---

<div class="post-metadata">

**Author:** ![AgfeV](https://avatars.discourse-cdn.com/v4/letter/a/53a042/32.png) [@AgfeV](https://discourse.sst.dev/u/AgfeV)\
**Post date:** [June 7, 2020, 3:21am UTC](https://discourse.sst.dev/t/create-containers/62/17 "2020-06-07T03:21:27Z")

</div>

Also if you are using the updated v1 react-bootstrap dont for get to update the CDN for styles

```
<link
  rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
  integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
  crossorigin="anonymous"
/>
```

---

<div class="post-metadata">

**Author:** ![mrenrich84](https://avatars.discourse-cdn.com/v4/letter/m/dfb087/32.png) [@mrenrich84](https://discourse.sst.dev/u/mrenrich84)\
**Post date:** [July 19, 2020, 10:40am UTC](https://discourse.sst.dev/t/create-containers/62/18 "2020-07-19T10:40:28Z")

</div>

in Routes.js

```
import { Route, Switch } from "react-router-dom";

```

WebStorm is flagging Route and Switch with

```
Cannot resolve symbol

```

package.json

```
    "react-router-dom": "^5.1.2",

```

package-lock.json

```
"react-router-dom": {
      "version": "5.1.2",

```

Although the page seems to look fine and there are no errors reported on the server or the browser consoles…

---

<div class="post-metadata">

**Author:** ![jayair](https://yyz2.discourse-cdn.com/flex032/user_avatar/discourse.sst.dev/jayair/32/9_2.png) [@jayair](https://discourse.sst.dev/u/jayair)\
**Post date:** [July 20, 2020, 1:54am UTC](https://discourse.sst.dev/t/create-containers/62/19 "2020-07-20T01:54:47Z")

</div>

Hmm not sure. Sadly I’m not a WebStorm user. But Create React App which we use, should handle this well. Maybe post over on their Github Issues page?

---

<div class="post-metadata">

**Author:** ![Brystephor](https://avatars.discourse-cdn.com/v4/letter/b/bbce88/32.png) [@Brystephor](https://discourse.sst.dev/u/Brystephor)\
**Post date:** [July 20, 2020, 7:00pm UTC](https://discourse.sst.dev/t/create-containers/62/20 "2020-07-20T19:00:05Z")

</div>

Hi, also running into the same issue with `<Navbar.Header>` being a problem and causing an error. Once removed, it compiles and the link appears along with the toggle item however there is no background to the navbar (even if i add `bg="light"`). This is running on `react-bootstrap: 1.2.2` with `bootstrap:4.5.0`. It’d be great to get an update to this section since it’s such a crucial part and the current version the tutorial is being used with seems to be out of date.

[Next page](https://discourse.sst.dev/t/create-containers/62.md?page=2)