ReactJS: неожиданный токен '<'

Question

Здравствуйте. Я попытался найти другие вопросы, но ни одно из упомянутых решений, которые я пробовал, не сработало.

При использовании команды:

npm start

У меня ошибка:

ОШИБКА в ./src/index.js Ошибка сборки модуля (из ./node_modules/babel-loader/lib/index.js): SyntaxError: D: /Kodilla/Projekty/webpack-to-do-app/src/index.js: неожиданный> токен (6: 4) 5 | ReactDOM.render( 6 | <App />, | ^ 7 | document.getElementById('app') 8 | );

Определенная команда в package.json:

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack"
  },

файл index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './containers/App';

ReactDOM.render(
    <App />,
    document.getElementById('app')
);

Файл App.js:

import React from 'react';
import uuid from 'uuid';
import style from './App.css';

class App extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            data: []
        };
    }
    addTodo(val){
        const todo = {
            text: val,
            id: uuid.v4(),
        };
        const data = [...this.state.data, todo];
        this.setState({data});
    }
    removeTodo(id) {
        const remainder = this.state.data.filter(todo => todo.id !== id);
        this.setState({data: remainder});
    }
    render() {
        return (
            <div className={style.TodoApp}>
                Tutaj pojawią się komponenty naszej aplikacji.
            </div>
        );
    }
}

export default App;

Файл webpack.config.js:

const path = require('path');

module.exports = {
    entry: './src/index.js',
        output: {
        path: path.resolve(__dirname, 'build'),
        filename: 'app.bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                loader: "babel-loader"
            },
            {
                test: /\.css$/,
                use: [
                    { loader: 'style-loader'},
                    {
                        loader: 'css-loader',
                        options: {
                            modules: true
                        }
                    }
                ]
            }
        ]
    }
};

Файл .babelrc:

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

Ссылка на репозиторий

Редактировать: Я попробовал решение из поста, который вы предлагаете, я продублировал, но скопировал 1:1 не работает для меня.Я изменил свою конфигурацию веб-пакета на:

module: {
    loaders: [...
      {
      test: /\.(js|jsx)?$/,
        loader: 'babel-loader',
        query: {
           presets: ['es2015', 'react']
        }
    }]
  },

, и проблема все еще возникает.Я думаю, что я могу делать что-то не так в другом месте, чем в упомянутом примере.

Редактировать 2:

1. Я использую babel-core@6.26.3 иbabel-loader@7.1.5, потому что это требование проекта.
2. Установлены зависимости React и response-dom.
3. Пресеты: реагировать.env, es2015, stage-0, установленный

   npm, установить babel-preset -... --save-dev.

4. Первая предложенная конфигурация .babelrc выполнена:

   "presets": ["реагировать", "es2015", "stage-0"]

5. Произошли ошибки:

   Не удалось найти предустановку "@ babel / preset-env" относительно каталога "... webpack-to-do-app \ node_modules \ css-loader"

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

Проблема была решена.

Что помогло: 1. Обновлениепресеты из babel-env, babel-реагируют на @ babel / preset-env и @ babel / preset-реагируют.@ babel-core был установлен, но babel-core остался на месте.Финальный набор:

"devDependencies": {
    "@babel/core": "^7.2.2",
    "@babel/preset-env": "^7.2.3",
    "@babel/preset-react": "^7.0.0",
    "babel": "^6.23.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.4",
    "css-loader": "^2.1.0",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "style-loader": "^0.23.1",
    "webpack": "^4.28.2",
    "webpack-cli": "^3.1.2"
  },

2.Удалите и установите babel-loader, что вызвало проблему с неверной версией самой babel.@Alireza ваше предложение было частично верно.Спасибо за помощь.

Answer 1

, пожалуйста, рассмотрите возможность установки ниже конфигурации на вашем .babelrc

{
    "presets": ["react", "es2015", "stage-0"]
}

это должно работать.также я вижу, что у вас есть вложенный массив внутри "пресетов".каждый пресет должен быть одним из элементов пресетов.

, и я настоятельно рекомендую использовать последнюю версию babel (версия 7).когда вы обновляетесь до Babel 7, вы должны загрузить @babel/preset-react и @babel/preset-env, и этого должно быть достаточно.и .babelrc будет выглядеть так:

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