正在解决缺少的加载程序，以处理React中第三方模块中的文件类型

Question

我正在为React应用程序使用第三方模块，该模块包括实现聊天机器人。安装模块并将组件并入另一个模块后，如下所示：

import SidePanel from "./SidePanel/SidePanel";
import Messages from "./Messages/Messages";
import MetaPanel from "./MetaPanel/MetaPanel";
import {Chatbot} from 'react-chatbot-kit';
function App({ currentUser, currentChannel, isPrivateChannel, userPosts, primaryColor, secondaryColor }) {
return (
<Grid columns="equal" className="app" style={{ background: secondaryColor }}>
<SidePanel
key={currentUser && currentUser.uid}
currentUser={currentUser}
primaryColor={primaryColor} />
<Grid.Column style={{ marginLeft: 320 }}>
<Messages
key={currentChannel && currentChannel.id}
currentChannel={currentChannel}
currentUser={currentUser}
isPrivateChannel={isPrivateChannel} />
</Grid.Column>
<Grid.Column width={4}>
<MetaPanel
key={currentChannel && currentChannel.name}
userPosts={userPosts}
currentChannel={currentChannel}
isPrivateChannel={isPrivateChannel} />
</Grid.Column>
<Grid.Column>
<Chatbot/>
</Grid.Column>
</Grid>
);
}
export default App;

它没有给出预期的输出(带有聊天机器人的对话窗口(，而是在index.js文件中给出以下错误，后面跟着一堆代码。

./node_modules/react-chatbot-kit/build/index.js
Module parse failed: Unexpected token (1:15703)
You may need an appropriate loader to handle this file type.

它特别指出了这一行及其第一个逗号：

return e}).apply(this,arguments)}var d=({styles:e={},...t})=>o.a.createElement("svg",p({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 512 512"},t)

一段时间以来，我一直在努力解决这个问题。如何修复？

编辑：添加devDependencies

我的项目的package.json

"devDependencies": {
"@babel/core": "^7.12.3",
"@babel/node": "^7.12.1",
}

react聊天机器人套件/软件包.json

"devDependencies": {
"@babel/cli": "7.8.4",
"@babel/core": "7.9.0",
"@babel/plugin-proposal-class-properties": "7.8.3",
"@babel/plugin-proposal-object-rest-spread": "7.9.0",
"@babel/plugin-transform-react-jsx": "7.9.4",
"@babel/preset-env": "7.9.0",
"@babel/preset-react": "7.9.4",
"babel-loader": "8.1.0",
"prop-types": "15.7.2",
"react-svg-loader": "^3.0.3",
"style-loader": "^1.1.3",
"webpack": "4.42.1",
"webpack-cli": "3.3.11"
}

Answer 1

问题是您没有svg加载程序。首先用以下命令安装svg加载程序：

npm i svg-url-loader --save-dev

接下来，将此代码添加到webpack配置文件：

module.exports = {
entry: './src/index.js',
module: {
rules: [
{
test: /.(js|jsx)$/,
exclude: /node_modules/,
use: ['babel-loader'],
},
{
test: /.svg$/,
use: [
{
loader: 'svg-url-loader',
options: {
limit: 10000,
},
},
],
},
],
},
...
};

然后，例如这个代码

const App = () => <img src={rectangle} alt="" />;

将被翻译成：

<img src="ebbc8779488b4073081931bd519478e8.svg" alt="" />