模块解析失败:意外的令牌。无法加载img标签

时间:2019-04-01 08:08:08

标签: javascript reactjs webpack webpack-dev-server react-table

我正在使用带有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

1 个答案:

答案 0 :(得分:0)

return (<img src={right} style={style} alt="right" />)

使用应将其包装起来,然后返回()