提问者:小点点

ReactJS:意外的标记“<”


你好,我尝试在其他问题中搜索,但没有一个提到的解决方案,我尝试对我不起作用。

使用命令时:

npm启动

我有一个错误:

/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,^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"]
    ]
}

链接到存储库

编辑:我试过从你建议我复制的帖子的解决方案,但复制1:1对我不起作用。我将webpack配置更改为:

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

而问题仍然会发生。我想我可能在其他地方做错了什么而不是在提到的例子。

编辑2:

>

  • 我使用babel-core@6.26.3和babel-loader@7.1.5,因为这是项目的要求。
  • 已安装React和react-dom依赖项。
  • 预设:反应。环境,es2015,stage-0安装者

    NPM安装Babel-预置-...--保存-开发。

    “预设”:[“反应”、“ES2015”、“Stage-0”]

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

    我还做错了什么?

    问题解决了。

    帮助的事情: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你的建议有一部分是对的。感谢你的帮助.


  • 共1个答案

    匿名用户

    请考虑在您的.babelrc上设置以下配置

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

    应该管用。我还看到你在“预置”里面有嵌套数组。每个预置都应该是预置元素之一。

    我强烈建议您使用最新的巴别塔(版本7)。当您升级到Babel7时,应该下载@babel/preset-react@babel/preset-env,这就足够了。而.Babelrc将会是这样的:

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

    相关问题