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

When using mand:

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 mand 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.

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

When using mand:

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 mand 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.

• javascript
• reactjs
• webpack
• jsx
• babeljs

• 6 Possible duplicate of reactjs Unexpected token '<' – Matt Morgan Commented Dec 28, 2018 at 11:33
• link to the repo didn't helped me at all. it's not the same as your code – Alireza Commented Dec 28, 2018 at 12:02

1 Answer 1

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 remend 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"
  ]
}