Create Containers

Chapter Comments
1

From @jayair on Mon Apr 10 2017 01:02:28 GMT+0000 (UTC)

Link to chapter - http://serverless-stack.com/chapters/create-containers.html

Copied from original issue: https://github.com/AnomalyInnovations/serverless-stack-com/issues/34

2 
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 ?

3

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

4

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
fluidError.png1283×434 84.9 KB

5

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"
1 Like
6

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

7

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?

8

Whats the issue you are having?

9

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.

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>
  );
}
2 Likes
10

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.

11

Oh yea definitely discovered that :slight_smile: 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!

2 Likes
12

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

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

1 Like
13

Thanks for pointing it out!

14

Please guide for below error

image
image2117×1411 171 KB

15

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

16

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…

1 Like
17

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"
/>
1 Like
18

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…

19

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?

20

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.