Сбой при разборе модуля: неожиданный токен, вам может понадобиться соответствующий загрузчик для обработки этого типа файлов

Question

Я продолжаю получать эту ошибку, и я не уверен, почему. Вот моя ошибка:

ОШИБКА: ОШИБКА в ./components/TaglocationList 6: 4 Ошибка синтаксического анализа модуля: неожиданный токен (6: 4) Вам может понадобиться соответствующий загрузчик для обработки этого типа файлов. | | const TaglocationList = (props) => (

<div>
|         Taglocation List:
|         <ul>
 @ ./components/DashBoard.js 11:23-51
 @ ./routers/AppRouter.js
 @ ./App/index.js
  @ ./index.js @ multi ../node_modules/webpack-dev-server/client? 

http://0.0.0.0:3000 Webpack / ч ot / dev-server реакции-горячий загрузчик / патч webpack-dev-server / client? http://localhost: 3000 ./index.js i? wdm ?: Не удалось скомпилировать.

webpack.config

const { resolve } = require('path')
const webpack = require('webpack')


module.exports = {
  context: resolve(__dirname, 'src'),
  entry: [
    'react-hot-loader/patch',
    'webpack-dev-server/client?http://localhost:3000',
     './index.js',
    'webpack/hot/only-dev-server',
  ],
  output: {
    filename: 'bundle.js',
    path: resolve(__dirname, 'dist')
  },
  devServer: {
    contentBase: resolve(__dirname, 'dist'),
    host: '0.0.0.0',
    hot: true,
    port: 3000,
    publicPath: '/'
  },
  module: {
    rules: [
        {
        test: /\.jsx?$/,
        use: ['babel-loader'],
        exclude: /node_modules/
      },
      {
        test: /\.s?css$/,
        use: [
            'style-loader', 
            'css-loader', 
            'sass-loader'
            ]
      }
    ]
  },
  plugins: [
    new webpack.NoEmitOnErrorsPlugin(),
    new webpack.NamedModulesPlugin(),
    new webpack.HotModuleReplacementPlugin()
  ]
}

package.json

{
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "main": "src/index.js",
  "dependencies": {
    "axios": "0.18.0",
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^0.28.7",
    "enzyme": "^2.9.1",
    "eslint": "^4.7.2",
    "eslint-config-standard": "^10.2.1",
    "eslint-config-standard-jsx": "^4.0.2",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-node": "^5.1.1",
    "eslint-plugin-promise": "^3.5.0",
    "eslint-plugin-react": "^7.3.0",
    "eslint-plugin-standard": "^3.0.1",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-hot-loader": "^3.0.0-beta.7",
    "react-redux": "^5.0.7",
    "react-router-dom": "^4.3.1",
    "react-scripts": "1.1.4",
    "redux": "^4.0.0",
    "redux-thunk": "^2.3.0",
    "style-loader": "^0.18.2",
    "stylelint": "^8.1.1",
    "stylelint-config-standard": "^17.0.0",
    "webpack-cli": "^3.0.8",
    "webpack-dev-server": "^3.1.4",
    "babel-cli": "6.24.1",
    "babel-preset-env": "1.6.1",
    "node-sass": "4.8.3",
    "sass-loader": "6.0.7"
  },
  "scripts": {
    "start": "webpack-dev-server --config ./webpack.config.js --mode development",
    "build": "webpack --mode production",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "devDependencies": {
    "webpack": "^4.14.0"
  }
}

TaglocationList.js

import React from 'react';
import { connect } from 'react-redux';
import Taglocation from './Taglocation';

const TaglocationList = (props) => (
    <div>
        Taglocation List:
        <ul>
            {props.taglocations.map(taglocation => {
                return (
                    <li key={taglocation.id}>
                        <Taglocation {...taglocation} />
                    </li>
                );
            })}
        </ul>

    </div>
);

const mapStateToProps = (state) => {
    return {
        taglocations: state
    };
}

export default connect(mapStateToProps)(TaglocationList);

. / App / index.js

import React from 'react'
import ReactDOM from 'react-dom';
import AppRouter from '../routers/AppRouter';
import getAppStore from '../store/store';
import { getTaglocations } from '../actions/taglocations';

import { Provider } from 'react-redux';

const store = getAppStore();

const template = (
        <Provider store={store}>
            <AppRouter />
        </Provider>
    );

store.dispatch(getTaglocations()).then(() => {
    ReactDOM.render(template, document.getElementById('app'));
});

export default App