0

Пытаюсь создать React приложение по туториалу.
app/main.js

var React = require('react');
var ReactDOM = require('react-dom');

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('example')
);

webpack.config.js

module.exports = {
  entry: './app/main.jsx',
  output: {
    filename: 'app.js'
  },
  module: {
    loaders: [
    {
      test: /\.(js|jsx)$/,
      exclude: /node_modules/,
      loader: 'babel-loader'
    }
    ],
    resolve: {
      extensions: ['', '.js', '.jsx']
    }
  }
};

Возникает ошибка:

Module build failed: SyntaxError: E:\app\main.jsx: Unexpected token (6:2)

Что я делаю не так?

5
  • package.json в пост закинь через правку 6 апр 2016 в 6:13
  • А где его взять? 6 апр 2016 в 6:18
  • Эм, тогда структуру папок скинь, и как ты запускаешь приложение 6 апр 2016 в 6:20
  • Запускаю через консольку командой webpack-dev-server Папки такие: Корень joxi.ru/EA4X0LaCMe6WAb App joxi.ru/n2YZpgYcygQ3A6 6 апр 2016 в 6:31
  • 1
    Я не понял, почему ты вызываешь weback-dev-server, когда в доке написана команда webpack. НО, я когда изучал вхождение в react, долго искал хорошие мануалы, нашел только 1 - maxfarseer.gitbooks.io/redux-course-ru/content/chapter1.html, который реально открыл мне свет на происходящее. Сделай все по нему, т.к. там архитектурно правильное создание приложения идет, через npm и сборщиков. Все достаточно просто для новичка. Как ни странно офф доки изменились с момента моего изучения, в худшую сторону, начало всегда шло с инициализации npm 6 апр 2016 в 6:41

1 ответ 1

1

Что-то мне подсказывает, что ваш туториал безнадежно протух. А проблема заключается в том, что Babel с версии 6.х требует указания плагинов-трансформаторов кода (presets) в явном виде. Однако, при указании загрузчика (loader) для webpack вы эти плагины не указываете. Как следствие никакой трансоформации jsx -> js по факту не происходит. Отсюда и ругань на неопознанный токен.

Решение тривиально: вместо строки

loader: 'babel-loader'

вам нужно указать:

loader: 'babel-loader?presets[]=es2015&presets[]=react'

А еще стоит установить пакеты babel-preset-es2015 и babel-preset-react, если они у вас до сих пор не установлены.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.