Почему webpack добавляет; в json и не может его парсить?

Question

[Salteos]

Пытаюсь в компонент добавить json

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { setProducts } from './actions/products';
import axios from 'axios';
import products from './products.json';

class App extends Component {
  componentWillMount() {
    const { setProducts } = this.props;
    const response = axios.get('products.json');

    setProducts(response.data);
  }

  render() {
    //const { products } = this.props;
    return (
      <ul>
        {!products
          ? 'Загрузка...'
          : products.map(product => {
              <li key={product.id}>
                <b>{product.title}</b> - {product.author}
              </li>;
            })}
      </ul>
    );
  }
}

const mapStateToProps = ({ products: { products } }) => ({
  products
});

const mapDispatchToProps = dispatch => ({
  setProducts: products => dispatch(setProducts(products))
});

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(App);

В итоге вылетает такая ошибка:

ERROR in ./src/products.json
Module parse failed: Unexpected token ; in JSON at position 4604 while parsing near '...99,
  "rating": 5
}];'
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token ; in JSON at position 4604 while parsing near '...99,
  "rating": 5
}];'
    at JSON.parse (<anonymous>)
    at parseJson (C:\Users\ssbor\Documents\Salteos\teaching\test-spa-react\node_modules\json-parse-better-errors\index.js:7:17)
    at JsonParser.parse (C:\Users\ssbor\Documents\Salteos\teaching\test-spa-react\node_modules\webpack\lib\JsonParser.js:16:16)
    at doBuild.err (C:\Users\ssbor\Documents\Salteos\teaching\test-spa-react\node_modules\webpack\lib\NormalModule.js:445:32)
    at runLoaders (C:\Users\ssbor\Documents\Salteos\teaching\test-spa-react\node_modules\webpack\lib\NormalModule.js:327:12)
    at C:\Users\ssbor\Documents\Salteos\teaching\test-spa-react\node_modules\loader-runner\lib\LoaderRunner.js:370:3
    at iterateNormalLoaders (C:\Users\ssbor\Documents\Salteos\teaching\test-spa-react\node_modules\loader-runner\lib\LoaderRunner.js:211:10)
    at iterateNormalLoaders (C:\Users\ssbor\Documents\Salteos\teaching\test-spa-react\node_modules\loader-runner\lib\LoaderRunner.js:218:10)
    at C:\Users\ssbor\Documents\Salteos\teaching\test-spa-react\node_modules\loader-runner\lib\LoaderRunner.js:233:3
    at context.callback (C:\Users\ssbor\Documents\Salteos\teaching\test-spa-react\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
 @ ./src/App.js 23:0-39 47:46-54 47:73-81
 @ ./src/index.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 (webpack)/hot/dev-server.js ./src/index.js

JSON файл:

[
  {
    "id": 0,
    "title": "Происхождение",
    "author": "Дэн Браун",
    "image":
      "https://cv7.litres.ru/sbc/33231270_cover_185-elektronnaya-kniga-den-braun-proishozhdenie-27624091.jpg",
    "price": 710,
    "rating": 3
  },
  {
    "id": 1,
    "title": "1984",
    "author": "Джордж Оруэлл",
    "image":
      "https://cv0.litres.ru/sbc/09233908_cover_185-elektronnaya-kniga--.jpg",
    "price": 415,
    "rating": 5
  },
  {
    "id": 2,
    "title": "Девушка в тумане",
    "author": "Донато Карризи",
    "image":
      "https://cv2.litres.ru/sbc/31635724_cover_185-elektronnaya-kniga-donato-karrizi-devushka-v-tumane.jpg",
    "price": 464,
    "rating": 4
  },
  {
    "id": 3,
    "title": "Империя должна умереть",
    "author": "Михаил Зыгарь",
    "image":
      "https://cv0.litres.ru/sbc/30804904_cover_185-elektronnaya-kniga-mihail-zygar-imperiya-dolzhna-umeret.jpg",
    "price": 741,
    "rating": 3
  },
  {
    "id": 4,
    "title": "Земное притяжение",
    "author": "Татьяна Устинова",
    "image":
      "https://cv9.litres.ru/sbc/30087292_cover_185-elektronnaya-kniga-tatyana-ustinova-zemnoe-prityazhenie.jpg",
    "price": 317,
    "rating": 1
  },
  {
    "id": 5,
    "title": "Зулейха открывает глаза",
    "author": "Гузель Яхина",
    "image":
      "https://cv5.litres.ru/sbc/17411250_cover_185-elektronnaya-kniga-guzel-yahina-zuleyha-otkryvaet-glaza-2.jpg",
    "price": 254,
    "rating": 0
  },
  {
    "id": 6,
    "title":
      "Очаровательный кишечник. Как самый могущественный орган управляет нами",
    "author": "Джулия Эндерс",
    "image":
      "https://cv6.litres.ru/sbc/32764469_cover_185-elektronnaya-kniga-dzhuliya-enders-ocharovatelnyy-kishechnik-kak-samyy-moguschestvennyy-organ-upravlyaet-nami-12178377.jpg",
    "price": 573,
    "rating": 4
  },
  {
    "id": 7,
    "title": "iPhuck 10",
    "author": "Виктор Пелевин",
    "image":
      "https://cv7.litres.ru/sbc/31221870_cover_185-elektronnaya-kniga-viktor-pelevin-iphuck-10-25564903.jpg",
    "price": 246,
    "rating": 0
  },
  {
    "id": 8,
    "title": "7 навыков высокоэффективных людей: Мощные...",
    "author": "Стивен Кови",
    "image":
      "https://cv9.litres.ru/sbc/33833192_cover_185-elektronnaya-kniga--.jpg",
    "price": 347,
    "rating": 5
  },
  {
    "id": 9,
    "title": "Девушка во льду",
    "author": "Роберт Брындза",
    "image":
      "https://cv3.litres.ru/sbc/31989433_cover_185-elektronnaya-kniga-robert-bryndza-12646976-devushka-vo-ldu.jpg",
    "price": 882,
    "rating": 2
  },
  {
    "id": 10,
    "title": "Магия утра. Как первый час дня определяет ваш успех",
    "author": "Хэл Элрод",
    "image":
      "https://cv9.litres.ru/sbc/30538397_cover_185-elektronnaya-kniga-hel-elrod-magiya-utra-kak-pervyy-chas-dnya-opredelyaet-vash-uspeh-19063017.jpg",
    "price": 829,
    "rating": 1
  },
  {
    "id": 11,
    "title":
      "Азиатская европеизация. История Российского государства. Царь Петр...",
    "author": "Борис Акунин",
    "image":
      "https://cv3.litres.ru/sbc/31629439_cover_185-elektronnaya-kniga-boris-akunin-aziatskaya-evropeizaciya-istoriya-rossiyskogo-gosudarstva-car-petr-alekseevich.jpg",
    "price": 389,
    "rating": 2
  },
  {
    "id": 12,
    "title": "Ведьмак (сборник)",
    "author": "Анджей Сапковский",
    "image":
      "https://cv6.litres.ru/sbc/33328364_cover_185-elektronnaya-kniga-andzhey-sapkovskiy-vedmak.jpg",
    "price": 424,
    "rating": 3
  },
  {
    "id": 13,
    "title": "Атлант расправил плечи",
    "author": "Айн Рэнд",
    "image":
      "https://cv9.litres.ru/sbc/32011296_cover_185-elektronnaya-kniga-ayn-rend-atlant-raspravil-plechi.jpg",
    "price": 157,
    "rating": 2
  },
  {
    "id": 14,
    "title": "Цена вопроса. Том 1",
    "author": "Александра Маринина",
    "image":
      "https://cv6.litres.ru/sbc/33285466_cover_185-elektronnaya-kniga-aleksandra-marinina-cena-voprosa-tom-1-22638660.jpg",
    "price": 664,
    "rating": 0
  },
  {
    "id": 15,
    "title": "Исчезнувшая",
    "author": "Гиллиан Флинн",
    "image":
      "https://cv2.litres.ru/sbc/11029722_cover_185-elektronnaya-kniga-gillian-flinn-ischeznuvshaya.jpg",
    "price": 476,
    "rating": 4
  },
  {
    "id": 17,
    "title": "Метро 2035",
    "author": "Дмитрий Глуховский",
    "image":
      "https://cv9.litres.ru/sbc/13698392_cover_185-elektronnaya-kniga-dmitriy-gluhovskiy-metro-2035.jpg",
    "price": 837,
    "rating": 4
  },
  {
    "id": 18,
    "title": "Снеговик",
    "author": "Ю Несбё",
    "image":
      "https://cv5.litres.ru/sbc/31604254_cover_185-elektronnaya-kniga-u-nesbe-snegovik-4578362.jpg",
    "price": 796,
    "rating": 5
  },
  {
    "id": 19,
    "title":
      "Как тренировать память. Не думайте о памяти – лучше используйте ее на все сто!",
    "author": "Джонатан Хэнкок",
    "image":
      "https://cv1.litres.ru/sbc/14195715_cover_185-elektronnaya-kniga-dzhonatan-henkok-kak-trenirovat-pamyat-ne-dumayte-o-pamyati-luchshe-ispolzuyte-ee-na-vse-sto.jpg",
    "price": 399,
    "rating": 5
  }
]

Webpack конфиг:

const path = require('path');
const HWP = require('html-webpack-plugin');

module.exports = {
  entry: path.join(__dirname, '/src/index.js'),
  output: {
    filename: 'build.js',
    path: path.join(__dirname, '/dist')
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)/,
        exclude: /node_modules/,
        loader: 'babel-loader'
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              importLoaders: 1,
              modules: true,
              localIdentName: '[name]__[local]--[hash:base64:5]'
            }
          }
        ]
      }
    ]
  },
  plugins: [
    new HWP({
      template: path.join(__dirname, '/src/index.html')
    })
  ]
};

Comments

[Mikhail Osher]

пример на https://codesandbox.io сделайте

[Станислав Некрасов]

Отформатируйте код под нужные языки.

Answer 1

[Salteos]

Ошибку нашёл, оказывается webpack-dev-server искал файлы в корне проекта, а они находились в /src, достаточно было указать ему путь в webpack конфиге

devServer: {
    contentBase: path.join(__dirname, '/src')
  },

Answer 2

[DarthJS]

Какая версия Вебпака?
Попробуй
{
test: /\.json$/,
exclude: /(node_modules)/,
loader: "json-loader"
}

И еще, в map функции у тебя нет return, ничего не отобразиться, либо используй ( html )

Comments

[Mikhail Osher]

да нормально json вебпаком обрабатывается, не надо никаких loaders :)

[Salteos]

Mikhail Osher, тогда в чём проблема? помечу он находит ";" когда его там нету?

[Salteos]

Артём Петренков, 4.23.1

[DarthJS]

Mikhail Osher, если не ошибаюсь, в старых версиях лоудер нужен был, с какой-то версии отменили нужду в лоудере :)

[Mikhail Osher]

DarthJS, я в своей голове только webpack 4+ поддерживаю) В старых, возможно, надо что-то допиливать