#javascript #reactjs #webpack #webpack-dev-server #react-table
#javascript #reactjs #webpack #webpack-dev-server #react-таблица
Вопрос:
Я использую react-table с дополнительной функциональностью FoldableTable, которая является специальной. При запуске скрипта сборки выдается следующая ошибка
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
скрипт для 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
изображений, но я предполагаю, что ему все еще нужно обрабатывать img
тег. Что здесь нужно сделать по-другому?
Я могу предоставить здесь некоторый контекст. В HOC есть следующий фрагмент:
import React from 'react'
import left from './left.svg'
import right from './right.svg'
const defaultFoldIconComponent = ({ collapsed }) => {
const style = { width: 25 }
if (collapsed) return <img src={right} style={style} alt="right" />
return <img src={left} style={style} alt="left" />
}
Ответ №1:
return (<img src={right} style={style} alt="right" />)
использование должно обернуть его, а затем вернуть ()