我正在使用带有FoldableTable附加功能(HOC)的react-table。运行构建脚本时,会出现以下错误
ERROR in ./node_modules/react-table/src/hoc/foldableTable/index.js 10:24
Module parse failed: Unexpected token (10:24)
You may need an appropriate loader to handle this file type.
| const style = { width: 25 }
|
> if (collapsed) return <img src={right} style={style} alt="right" />
| return <img src={left} style={style} alt="left" />
我的webpack.config.js
的{{1}}脚本如下:
npm run build
我的const path = require("path");
const webpack = require("webpack");
const BundleTracker = require('webpack-bundle-tracker');
module.exports = {
context: __dirname,
entry: [
'react-hot-loader/patch',
'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server',
'./src/index.js',
],
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/static/app/track_dashboard/dist/',
},
devtool: 'source-map',
devServer: {
hot: true,
contentBase: path.resolve(__dirname, 'dist'),
publicPath: '/',
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: ['babel-loader'],
},
{
test: /\.js?$/,
exclude: /node_modules/,
use: ['babel-loader'],
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader?modules'],
},
{
test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
loader: 'url-loader?limit=100000'
},
],
},
plugins: [
new BundleTracker({filename: './webpack-stats.json'}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NamedModulesPlugin(),
],
}
:
.babelrc
我提供了{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
"@babel/plugin-proposal-class-properties"
]
}
来处理url-loader
图像,但我想它仍然需要处理svg
标签。在这里必须做些什么?
我可以在这里提供一些背景信息。 HOC具有以下代码段:
img
答案 0 :(得分:0)
return (<img src={right} style={style} alt="right" />)
使用应将其包装起来,然后返回()