使用react-bulma-components的Navbar报Element type is invalid错误如何解决

你遇到的报错核心原因是react-bulma-components库的Navbar组件导入方式不符合你安装的版本规范，你单独导入的子组件（如NavbarBrand/NavbarContainer等）实际为undefined，导致React渲染时无法识别有效组件类型。

步骤1：修正导入语句 #

目前react-bulma-components v4及以上版本中，Navbar的所有子组件都作为Navbar的属性导出，无需单独导入。将你的导入部分修改为：

import React from 'react';
import { Navbar } from 'react-bulma-components';

步骤2：替换组件调用方式 #

把原来单独使用的子组件，全部改为Navbar.子组件名的形式调用，比如原来的NavbarBrand改为Navbar.Brand，NavbarItem改为Navbar.Item，完整的MyNavbar部分代码如下：

const MyNavbar = <Navbar>
    <Navbar.Brand>
        <Navbar.Item href="#">
            <img
                alt="Bulma: a modern CSS framework based on Flexbox"
                height="28"
                src="https://bulma.io/images/bulma-logo.png"
                width="112"
            />
        </Navbar.Item>
        <Navbar.Burger />
    </Navbar.Brand>
    <Navbar.Menu>
        <Navbar.Container>
            <Navbar.Item href="#">
                <Navbar.Link>
                    First
                </Navbar.Link>
                <Navbar.Dropdown>
                    <Navbar.Item href="#">
                        Subitem 1
                    </Navbar.Item>
                    <Navbar.Item href="#">
                        Subitem 2
                    </Navbar.Item>
                    <Navbar.Divider />
                    <Navbar.Item href="#">
                        After divider
                    </Navbar.Item>
                </Navbar.Dropdown>
            </Navbar.Item>
            <Navbar.Item href="#">
                Second
            </Navbar.Item>
        </Navbar.Container>
        <Navbar.Container align="end">
            <Navbar.Item href="#">
                At the end
            </Navbar.Item>
        </Navbar.Container>
    </Navbar.Menu>
</Navbar>

可选校验 #

如果修改后仍有报错，可执行npm list react-bulma-components查看你安装的库版本，若为v3及以下版本，可升级到最新稳定版后重试，或参考对应版本的导出规则调整导入方式。

内容的提问来源于stack exchange，提问作者floflo29