javascript - ReactJS:意外 token '<'

Question

您好，我尝试搜索其他问题，但我尝试过的所有解决方案都不适合我。

使用命令时:

npm start

我有一个错误:

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 中定义的命令:

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

index.js 文件:

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

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

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

Link to repository

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

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

问题依旧。我想我可能在其他地方做错了，而不是在提到的例子中。

编辑 2:

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

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

4. 首先建议 .babelrc 配置完成:

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

5. 错误发生:

   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 留在原地。最终集:

"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 你的建议部分正确。感谢您的帮助。

Answer 1

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

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

它应该可以工作。我还看到您在“预设”中嵌套了数组。每个预设都应该是预设元素之一。

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

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