Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ReactJS: unexpected token '<'

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.

like image 887
galdranorn Avatar asked Dec 28 '18 11:12

galdranorn


People also ask

Why ReactDOM Render is not working?

Use createRoot instead" occurs because the ReactDOM. render method has been deprecated. To solve the error, create a root element and use the ReactDOMClient.

How do I fix an unexpected token?

As you write your JavaScript application, the unexpected token error always occurs because JavaScript expected a specific syntax that's not fulfilled by your current code. You can generally fix the error by removing or adding a specific JavaScript language symbol to your code.

What is unexpected token error in react?

The JavaScript exceptions "unexpected token" occurs when a specific language construct was expected, but something else was provided. This might be a simple typo. Fortunately for developers, such errors are highlighted by the linters in code editors, so developers can fix it even before the app runs in the browser.

What does react createElement do?

createElement()Create and return a new React element of the given type. The type argument can be either a tag name string (such as 'div' or 'span' ), a React component type (a class or a function), or a React fragment type.


1 Answers

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"
  ]
}
like image 72
Alireza Avatar answered Oct 03 '22 04:10

Alireza