Reactjs React bootstrap下拉列表与webpack和babel的兼容性

在将Web包添加到react项目之前，我使用react引导组件没有任何问题，现在我遇到了一些奇怪的事情

导航栏组件：

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import {Dropdown, DropdownButton} from 'react-bootstrap';

class Navbar extends Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    toggleOffcanvas() {
        document.querySelector('.sidebar-offcanvas').classList.toggle('active');
    }
    toggleRightSidebar() {
        document.querySelector('.right-sidebar').classList.toggle('open');
    }

    render() {
        return (
            <nav className="navbar p-0 fixed-top d-flex flex-row">
                <div className="navbar-brand-wrapper d-flex d-lg-none align-items-center justify-content-center">
                    <Link className="navbar-brand brand-logo-mini" to={{ pathname: `/` }}><img src={require('../../assets/images/logo-mini.png')} alt="logo" /></Link>
                </div>
                <div className="navbar-menu-wrapper flex-grow d-flex align-items-stretch">
                    <button className="navbar-toggler align-self-center" type="button" onClick={ () => document.body.classList.toggle('sidebar-icon-only') }>
                        <span className="mdi mdi-menu"/>
                    </button>
                    <ul className="navbar-nav pl-2">
                        <li className="nav-item" style={{ width: 600 }}>
                            <form className="nav-link mt-2 mt-md-0 d-none d-lg-flex search">

                            </form>
                        </li>
                    </ul>
                    <ul className="navbar-nav navbar-nav-right">
                        <DropdownButton id="dropdown-basic-button" title="Dropdown button">
                            <Dropdown.Item href="#/action-1">Action</Dropdown.Item>
                            <Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
                            <Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
                        </DropdownButton>
                    </ul>
                    <button className="navbar-toggler navbar-toggler-right d-lg-none align-self-center" type="button" onClick={this.toggleOffcanvas}>
                        <span className="mdi mdi-format-line-spacing"/>
                    </button>
                </div>
            </nav>
        );
    }
}

export default Navbar;

使用“反应引导”：“^0.33.1”

---

已尝试升级/降级和删除节点模块，但未成功。

问题中的错误部分已被截断。抱歉，已更新的完整错误请在问题中包括导航栏模块中导入的代码。已添加导航栏类

<DropdownButton id="dropdown-basic-button" title="Dropdown button">
    <Dropdown.Item href="#/action-1">Action</Dropdown.Item>
    <Dropdown.Item href="#/action-2">Another action</Dropdown.Item>
    <Dropdown.Item href="#/action-3">Something else</Dropdown.Item>
</DropdownButton>

react-dom.development.js:26629 
Uncaught Error: Element type is invalid: expected a string (for builtin 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 `Navbar`.
    at createFiberFromTypeAndProps (react-dom.development.js:26629)
    at createFiberFromElement (react-dom.development.js:26652)
    at createChild (react-dom.development.js:14958)
    at reconcileChildrenArray (react-dom.development.js:15232)
    at reconcileChildFibers (react-dom.development.js:15598)
    at reconcileChildren (react-dom.development.js:18089)
    at updateHostComponent (react-dom.development.js:18611)
    at beginWork$1 (react-dom.development.js:20193)
    at HTMLUnknownElement.callCallback (react-dom.development.js:336)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:385)
The above error occurred in the <ul> component:
    in ul (created by DropdownMenu)
    in RootCloseWrapper (created by DropdownMenu)
    in DropdownMenu (created by Dropdown)
    in div (created by ButtonGroup)
    in ButtonGroup (created by Dropdown)
    in Dropdown (created by Uncontrolled(Dropdown))
    in Uncontrolled(Dropdown) (created by ForwardRef)
    in ForwardRef (created by Navbar)
    in ul (created by Navbar)
    in div (created by Navbar)
    in nav (created by Navbar)
    in Navbar (created by App)
    in div (created by App)
    in div (created by App)
    in App (created by Context.Consumer)
    in withRouter(App)
    in Router (created by BrowserRouter)
    in BrowserRouter

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/docs/error-boundaries.html to learn more about error boundaries.
logCapturedError    @   react-dom.development.js:21843
logError            @   react-dom.development.js:21880
update.callback     @   react-dom.development.js:23232
callCallback        @   react-dom.development.js:13829
commitUpdateEffects @   react-dom.development.js:13867
commitUpdateQueue   @   react-dom.development.js:13857
commitLifeCycles    @   react-dom.development.js:22160
commitLayoutEffects @   react-dom.development.js:25344
callCallback        @   react-dom.development.js:336
invokeGuardedCallbackDev    @   react-dom.development.js:385
invokeGuardedCallback       @   react-dom.development.js:440
commitRootImpl              @   react-dom.development.js:25082
unstable_runWithPriority    @   scheduler.development.js:697
runWithPriority$2           @   react-dom.development.js:12149
commitRoot                  @   react-dom.development.js:24922
finishSyncRender            @   react-dom.development.js:24329
performSyncWorkOnRoot       @   react-dom.development.js:24307
scheduleUpdateOnFiber       @   react-dom.development.js:23698
updateContainer             @   react-dom.development.js:27103
(anonymous)                 @   react-dom.development.js:27528
unbatchedUpdates            @   react-dom.development.js:24433
legacyRenderSubtreeIntoContainer    @   react-dom.development.js:27527
render                              @   react-dom.development.js:27608
./src/client/index.js   @   index.js:8
__webpack_require__     @   bootstrap:790
fn                      @   bootstrap:150
0                       @   main.bundle.js:2672
__webpack_require__     @   bootstrap:790
checkDeferredModules    @   bootstrap:45
webpackJsonpCallback    @   bootstrap:32
(anonymous).            @   main.bundle.js:1

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');

const outputDirectory = 'dist';

module.exports = env => {
    return {
        entry: './src/client/index.js',
        output: {
            path: path.join(__dirname, outputDirectory),
            filename: 'bundle.js'
        },
        optimization: {
            runtimeChunk: 'single',
            splitChunks: {
                cacheGroups: {
                    vendor: {
                        test: /[\\/]node_modules[\\/]/,
                        name: 'vendors',
                        chunks: 'all'
                    }
                }
            }
        },
        module: {
            rules: [
                {
                    test: /\.js$/,
                    exclude: /node_modules/,
                    use: {
                        loader: 'babel-loader'
                    }
                },
                {
                    test: /\.scss$/,
                    use: [
                        'style-loader',
                        'css-loader',
                        'sass-loader',
                    ]
                },
                {
                    test: /\.css$/,
                    use: ['style-loader', 'css-loader']
                },
                {
                    test: /\.(png|jpg|woff|woff2|eot|ttf|svg|gif)$/,
                    use: {
                        loader: 'url-loader'
                    }
                }
            ]
        },
        devServer: {
            port: 3000,
            open: true,
            proxy: {
                '/api': 'http://localhost:8080'
            }
        },
        plugins: [
            new CleanWebpackPlugin([outputDirectory]),
            new HtmlWebpackPlugin({
                template: './public/index.html',
                favicon: './public/favicon.ico'
            })
        ]
    }
};