7

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.

2
  • 6
    Possible duplicate of reactjs Unexpected token '<' 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 Commented Dec 28, 2018 at 12:02

1 Answer 1

3

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"
  ]
}
Sign up to request clarification or add additional context in comments.

10 Comments

Something is wrong with the configuration itself have a look codesandbox.io/s/l7np0313k7
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
Yeah I also did the same.
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?
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.
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.