问题
i was using react-bootstrap components without any problem before adding webpack to my react project, now i am experiencing some weird things.
Navbar Component:
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;
adding this basic dropdown example to my Navbar component (which works fine without this dropdown part):
<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>
will cause this error:
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
webpack.config:
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'
})
]
}
};
using "react-bootstrap": "^0.33.1"
tried upgrading/downgrading and deleting node_modules without any success.
来源：https://stackoverflow.com/questions/59680413/react-bootstrap-dropdown-compatibility-with-webpack-and-babel