No export in component? React

Question

I'm so so sorry for wasting people's time on such a stupid error. But it's driving me crazy, I don't know why its occurring. To my knowledge I've done everything correct. So I'm trying to import a component called NewSiteNav into my NewSite component. The path I am directing to is correct, I even know because I'm using the VSC tool that helps you autocomplete path selections. I have the import written correctly, have tried it with and without these {} and I have exported the NewSiteNav correctly using both export default class... at the beginning and export default NewSiteNav at the end. Please help

NewSiteNav component:

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

export default class NewSiteNav extends Component {
    render() {
        return (
                <div>
                    <Navbar>
                        <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
                        <Navbar.Toggle aria-controls="basic-navbar-nav" />
                        <Navbar.Collapse id="basic-navbar-nav">
                            <Nav className="mr-auto">
                                <Nav.Link href="#home">Home</Nav.Link>
                                <Nav.Link href="#link">Link</Nav.Link>
                            </Nav>
                        </Navbar.Collapse>
                    </Navbar>
                </div>
        )
    }
}

NewSite component:

import React, { Component } from 'react'
import { NewSiteNav } from '../components/NewSiteNav';

class NewSite extends Component {
  render () {
    return (
      <div className="App">
        <NewSiteNav />
        <div className="lander">
          <h1>New Site</h1>
        </div>
      </div>
    )
  }
}

export default NewSite;

score 3 · Answer 1 · answered Feb 06 '19 at 11:05

3

try to change

import { NewSiteNav } from '../components/NewSiteNav';

to

import NewSiteNav from '../components/NewSiteNav';

answered Feb 06 '19 at 11:05

rvandoni

3,297
4
32
46

When I do this I get the following error `Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. 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 `NewSiteNav`.` – TiernO Feb 06 '19 at 11:06

Sviat Kuzhelev · Answer 2 · 2019-02-06T11:12:34.543

Try to rewrite your child component NewSiteNav component:

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

   export class NewSiteNav extends Component {
        render() {
            return (
                    <div>
                        <Navbar>
                            <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
                            <Navbar.Toggle aria-controls="basic-navbar-nav" />
                            <Navbar.Collapse id="basic-navbar-nav">
                                <Nav className="mr-auto">
                                    <Nav.Link href="#home">Home</Nav.Link>
                                    <Nav.Link href="#link">Link</Nav.Link>
                                </Nav>
                            </Navbar.Collapse>
                        </Navbar>
                    </div>
            )
        }
    }

    export default NewSiteNav

If it doesn't help you sound check you export/import files on circling loop. Maybe some of them are still not loaded when you try to use it in other file. Check this post: Redux/React. You must pass a component to the function returned by connect. Instead received undefined

When I do this I still get the original error `./src/containers/NewSite.js Attempted import error: 'NewSiteNav' is not exported from '../components/NewSiteNav'.` — TiernO, Feb 06 '19 at 11:15
Okay, so in this case check here https://stackoverflow.com/questions/49590362/redux-react-you-must-pass-a-component-to-the-function-returned-by-connect-inst answer describing. The person there has the same problem as you — Sviat Kuzhelev, Feb 06 '19 at 11:22

score 0 · Answer 3 · answered Feb 06 '19 at 11:22

When you make

export default class NewSiteNav extends Component

you can import it with whatever name you want

import foooName from './path'

but when you you make

export class NewSiteNav extends Component

make sure that you import it with the correct name

import newStireNave from './path'

if this solution doesn't work for you try to change extends from Component to React.Component

export default class NewSiteNav extends React.Component{
        render() {
            return (
                    <div>
                        <Navbar>
                            <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
                            <Navbar.Toggle aria-controls="basic-navbar-nav" />
                            <Navbar.Collapse id="basic-navbar-nav">
                                <Nav className="mr-auto">
                                    <Nav.Link href="#home">Home</Nav.Link>
                                    <Nav.Link href="#link">Link</Nav.Link>
                                </Nav>
                            </Navbar.Collapse>
                        </Navbar>
                    </div>
            )
        }
    }

When I do this it gets rid of the original error and compiles. But then i am presented with this: `Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. 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 `NewSiteNav`.` — TiernO, Feb 06 '19 at 11:28

score 0 · Answer 4 · answered Feb 06 '19 at 12:41

0

Try to export your component like this

class NewSiteNav extends Component { ... } export default NewSiteNav

And import like this

import NewSiteNav from '../components/NewSiteNav';

Look at this answer to more explanation about ES6 import.

answered Feb 06 '19 at 12:41

Tolotra Raharison

3,034
1
10
15

No export in component? React

4 Answers4