Ошибка при сборке: “Module parse failed: Unexpected token” [закрыт]

149
29 декабря 2019, 18:20
Закрыт. Этот вопрос не по теме. Ответы на него в данный момент не принимаются.

Хотите улучшить этот вопрос? Update the question so it's on-topic for Stack Overflow на русском.

Закрыт 9 месяцев назад.

Файл index.js

import App from './app';
import { BrowserRouter } from 'react-router-dom';
import ReactDOM from 'react-dom';
ReactDOM.render((
  <BrowserRouter>
    <App />
  </BrowserRouter>
), document.getElementById('root'));

Файл app.js

import Home from './pages/Home/Home';
import React from 'react';
import { HashRouter, Route, Switch } from 'react-router-dom';
class App extends React.Component {
  render() {
    return (
      <HashRouter>
        <Switch>
          <Route exact path='/' component={Home}/>
        </Switch>
      </HashRouter>
    );
  }
}
export default App;

Файл webpack.config

const path = require('path');
const conf = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: '[name].js',
    publicPath: 'dist/'
  }
};
module.exports = conf;

Ошибка при сборке:

ERROR in ./src/index.js 6:2
Module parse failed: Unexpected token (6:2)
You may need an appropriate loader to handle this file type.
|
| ReactDOM.render((
>   <BrowserRouter>
|     <App />
|   </BrowserRouter>
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./src/index.js main[1]

Не понимаю, как исправить ошибку?

Answer 1

По всей видимости не могут распознаться открывающиеся и закрывающиеся скобки тэгов < и >. Эта ошибка достаточно часто возникает при начале работы с React. Решение является простым, вам поможет "бабелизация".

Первое, что нужно сделать - это добавить файл .babelrc в тот же каталог, где лежит файл package.json. В этом файле необходимо указать пресет react и env, получится вот такой файл:

{
    "presets": ["env", "react"]
}

Не так давно бабел переехал в монорепу, поэтому в обновленном формате это выглядит так:

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}

Данный файл .babelrc - сообщит babel, какие из пресетов использовать для транспайлинга кода. Обращу ваше внимание, что последовательность указания пресетов важна.

Перед тем, как добавлять файл конфигурации бабела, нужно установить парочку пакетов, для всего этого добра:

  • babel-loader - транспайлинг кода и задание пресетов
  • babel-core - преобразует код ES6 в ES5
  • babel-preset-react - пресет, преобразующий JSX в JavaScript
  • babel-preset-env - пресет конвертации кода ES6, ES7 и ES8 в код ES5

По ссылкам можно найти и примеры и документацию. Самая важная для вас ссылка - это babel-preset-react. Ну и webpack.config конечно же нужно дописать:

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        },
      }
    ]
  }

Здесь babel-loader используется для загрузки наших JSX/JavaScript файлов.

Также, я рекомендую вам посмотреть в сторону style-loader и css-loader. Так css-loader для загрузки и объединения всех CSS файлов в один, а style-loader добавит все стили внутрь тега документа style. А еще, раз уж на то пошло, то и html-webpack-plugin не помешает - плагин генерирует HTML файл, затем вставляет в него скрипт и записывает файл в dist/index.html.

READ ALSO
Не могу получить параметры запроса bodyParser
javascript

Не могу получить параметры запроса bodyParser

Пишу свой первый backend для базы данных RethinkDB и столкнулся с такой проблемой, что не могу разобрать запрос в bodyParser

 132
При смене картинки фона на странице идет белый кадр , как будто не прогружается заранее фон, как решить?
javascript

При смене картинки фона на странице идет белый кадр , как будто не прогружается заранее фон, как решить?

 164
Откуда этот обьект __proto__?
javascript

Откуда этот обьект __proto__?

Не могу понять, вот у нас есть функция-конструктор, дальше я создаю сам экземпляр этого конструктора

 130
Автоматические бэкапы всех баз данных MongoDB
javascript

Автоматические бэкапы всех баз данных MongoDB

Использую для работы с MongoDB NodeJS на Windows Server 2012Бывало такое, что, при изменении настроек MongoDB, все базы данных удалялись, а бэкапов для восстановления...

 165