ReactJS:意外令牌'<' [英] ReactJS: unexpected token '<'

问题描述

您好，我尝试搜索其他问题，但我尝试过的上述解决方案均不适用于我.

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

使用命令时:

npm开始

npm start

我有一个错误:

./src/index.js中的错误 模块构建失败(来自./node_modules/babel-loader/lib/index.js): 语法错误:D:/Kodilla/Projekty/webpack-to-do-app/src/index.js:意外>令牌(6:4) 5 | ReactDOM.render( 6 | <App />, | ^ 7 | document.getElementById('app') 8 | );

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 | );

package.json中定义的命令:

Defined command in package.json:

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

index.js文件:

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文件:

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文件:

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文件:

.babelrc file:

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

链接到存储库

修改: 我从帖子中尝试了解决方案，您建议我复制但1:1复制对我不起作用.我将我的webpack配置更改为:

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.

1. 我使用babel-core@6.26.3和babel-loader@7.1.5，因为这些是项目的要求.
2. 已安装React和React-dom依赖项.
3. 预设:做出反应. env，es2015，stage-0已安装

1. I use babel-core@6.26.3 and babel-loader@7.1.5 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.

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

首先建议完成.babelrc配置:

First suggested .babelrc config done:

预设":["react"，"es2015"，"stage-0"]

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

发生错误的人:

Error occurrs:

找不到相对于目录的预设"@ babel/preset-env" "... webpack-to-do-app \ node_modules \ css-loader"

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

我还是在做错什么?

问题已解决.

有助于以下方面的事情: 1.将babel-env，babel-react的预设更新为@ babel/preset-env和@ babel/preset-react. @ babel-core已安装，但babel-core保留在原位.最终设定:

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.卸载并安装babel-loader，这导致需要错误版本的babel本身而引起问题. @Alireza，您的建议部分正确.感谢您的帮助.

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.

推荐答案

请考虑在.babelrc上的配置下面放置

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.

，我强烈建议您使用最新的babel(版本7).当您升级到babel 7时，您应该下载@babel/preset-react和@babel/preset-env，这样就足够了. 和.babelrc将如下所示:

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

这篇关于ReactJS:意外令牌'<'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！