ReactJS: unexpected token '<'

Question

Hello I tried to search in other questions but none of mentioned solutions I tried did not work for me.

When using command:

npm start

I have an error:

ERROR in ./src/index.js Module build failed (from ./node_modules/babel-loader/lib/index.js): SyntaxError: D:/Kodilla/Projekty/webpack-to-do-app/src/index.js: Unexpected > token (6:4) 5 | ReactDOM.render( 6 | <App />, | ^ 7 | document.getElementById('app') 8 | );

Defined command in package.json:

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

index.js file:

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

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

App.js file:

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 file:

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 file:

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

Link to repository

Edit: I tried the solution from post you suggest I duplicate but copied 1:1 did not work for me. I changed my webpack config to:

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

and problem still occurrs. I think I may be doing something wrong in other place than in mentioned example.

Edit 2:

1. I use [email protected] and [email protected] because these are requirement of the project.
2. React and react-dom dependencies installed.
3. Presets: react. env, es2015, stage-0 installed by

   npm install babel-preset-... --save-dev.

4. First suggested .babelrc config done:

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

5. Error occurrs:

   Couldn't find preset "@babel/preset-env" relative to directory "...webpack-to-do-app\node_modules\css-loader"

What am I still doing wrong?

Problem was solved.

Things that helped: 1. Update presets from babel-env, babel-react to @babel/preset-env and @babel/preset-react. @babel-core was installed but babel-core stayed on place. Final set:

"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. Uninstall and install babel-loader which caused problem with requiring wrong version of babel itself. @Alireza your suggestion was partially right. Thanks for helping.

Solution

please consider put below config on your .babelrc

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

it should work. also i see that you have nested array inside "presets". every preset should be one of presets elements.

and i'm strongly recommend that you use latest babel(version 7). when you upgrade to babel 7 you should download @babel/preset-react and @babel/preset-env and that should be enough. and .babelrc will look like this:

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

Comments

[Harish Soni]

Something is wrong with the configuration itself have a look codesandbox.io/s/l7np0313k7

[Alireza]

checkout this link codesandbox.io/s/z62m6kwwjx you should also install dependecies for react and react-dom in codesandbox that all change i did on your link

[Harish Soni]

Yeah I also did the same.

[galdranorn]

I use [email protected] and [email protected] because these are requirement of the project. React and react-dom dependencies installed. Presets: react. env, es2015, stage-0 installed by npm install babel-preset-... --save-dev. First .babelrc config ("presets": ["react", "es2015", "stage-0"]) done. Error occurrs: Couldn't find preset "@babel/preset-env" relative to directory "...webpack-to-do-app\\node_modules\\css-loader" What am I doing wrong?

[Alireza]

on babel 7 you must install @babel/preset-env and @babel/preset-react instead (npm install -D @babel/preset-env @babel-preset-react) of babel-preset-react and ... and use them just like what i mentioned above.

[galdranorn]

@Alireza As I said: Presets installed. Your structure in .babelrc ({"presets": [ "presets": ["react", "es2015", "stage-0"]]}) throws me an error so I used {"presets": ["react", "es2015", "stage-0"]}. Everything else identical. Still some error occurrs: Couldn't find preset "@babel/preset-env" relative to directory "...\\node_modules\\css-loader".

[Alireza]

Please install them as i mentioned npm install @babel/preset-env

[galdranorn]

"npm ERR! Invalid tag name "@babel-preset-react": Tags may not have any characters that encodeURIComponent encodes."

[Alireza]

You didnt type the name correctly. For more info babeljs.io/docs/en/babel-preset-env

[galdranorn]

Partially helped but the problem was also with babel-loader version which required wrong version of babel. Marked your answer as most useful and added full solution to the question, thanks for helping!