Webpack React -组件问题

Question

我已经安装了'yarn add cdbreact'和'yarn add react-router-dom'，但为什么我有这个错误?

这是我在Sidebar.js

中的代码

const Sidebar = () => {
return (
<div
style={{ display: 'flex', height: '100vh', overflow: 'scroll initial' }}
>
<CDBSidebar textColor="#fff" backgroundColor="#333">
<CDBSidebarHeader prefix={<i className="fa fa-bars fa-large"></i>}>
<a
href="/"
className="text-decoration-none"
style={{ color: 'inherit' }}
>
Sidebar
</a>
</CDBSidebarHeader>

<CDBSidebarContent className="sidebar-content">
<CDBSidebarMenu>
<NavLink exact to="/" activeClassName="activeClicked">
<CDBSidebarMenuItem icon="columns">Dashboard</CDBSidebarMenuItem>
</NavLink>
<NavLink exact to="/tables" activeClassName="activeClicked">
<CDBSidebarMenuItem icon="table">Tables</CDBSidebarMenuItem>
</NavLink>
<NavLink exact to="/profile" activeClassName="activeClicked">
<CDBSidebarMenuItem icon="user">Profile page</CDBSidebarMenuItem>
</NavLink>
<NavLink exact to="/analytics" activeClassName="activeClicked">
<CDBSidebarMenuItem icon="chart-line">
Analytics
</CDBSidebarMenuItem>
</NavLink>

<NavLink
exact
to="/hero404"
target="_blank"
activeClassName="activeClicked"
>
<CDBSidebarMenuItem icon="exclamation-circle">
404 page
</CDBSidebarMenuItem>
</NavLink>
</CDBSidebarMenu>
</CDBSidebarContent>

<CDBSidebarFooter style={{ textAlign: 'center' }}>
<div
style={{
padding: '20px 5px',
}}
>
Sidebar Footer
</div>
</CDBSidebarFooter>
</CDBSidebar>
</div>
);
};

export default Sidebar;

编译有问题:X

错误。/node_modules/@fortawesome/fontawesome-free/webfonts/fa -品牌- 400.测试结束1:0

Module parse failed: Unexpected character ' ' (1:0处理此文件类型的适当加载程序，目前没有加载程序配置为处理此文件。看到https://webpack.js.org/concepts#loaders(此处省略源代码二进制文件)

Answer 1

可能您忘记为字体添加webpack加载器了。尝试添加以下部分:

{
test: /.(woff|woff2|eot|ttf|otf)$/i,
type: 'asset/resource',
},

像这样:

module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{
test: /.css$/i,
use: ['style-loader', 'css-loader'],
},
{
test: /.(png|svg|jpg|jpeg|gif)$/i,
type: 'asset/resource',
},
{
test: /.(woff|woff2|eot|ttf|otf)$/i,
type: 'asset/resource',
},
],
},
};