ReactJS:意外令牌'<'

Posted

技术标签:

【中文标题】ReactJS:意外令牌\'<\'【英文标题】:ReactJS: unexpected token '<'ReactJS:意外令牌'<' 【发布时间】:2019-05-26 05:38:42 【问题描述】:

您好,我尝试搜索其他问题,但我尝试的提到的解决方案均不适合我。

使用命令时:

npm 开始

我有一个错误:

./src/index.js 中的错误 模块构建失败(来自 ./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:

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

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

    首先建议 .babelrc 配置完成:

    “预设”:[“react”,“es2015”,“stage-0”]

    发生错误:

    找不到相对于目录的预设“@babel/preset-env” "...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 您的建议部分正确。感谢您的帮助。

【问题讨论】:

reactjs Unexpected token '<'的可能重复 链接到 repo 根本没有帮助我。和你的代码不一样 【参考方案1】:

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


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

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

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


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

【讨论】:

配置本身有问题看看codesandbox.io/s/l7np0313k7 签出此链接codesandbox.io/s/z62m6kwwjx 你还应该在代码和框中安装 react 和 react-dom 的依赖项,我对你的链接所做的所有更改 是的,我也这样做了。 我使用 babel-core@6.26.3 和 babel-loader@7.1.5 因为这些是项目的要求。已安装 React 和 react-dom 依赖项。预设:反应。 env, es2015, stage-0 由 npm install babel-preset-... --save-dev 安装。首先 .babelrc config ("presets": ["react", "es2015", "stage-0"]) 完成。发生错误:找不到相对于目录“...webpack-to-do-app\\node_modules\\css-loader”的预设“@babel/preset-env”我做错了什么? 在 babel 7 上你必须安装 @babel/preset-env 和 @babel/preset-react 代替 (npm install -D @babel/preset-env @babel-preset-react) 的 babel-preset -react 和 ... 并像我上面提到的那样使用它们。

以上是关于ReactJS:意外令牌'<'的主要内容,如果未能解决你的问题,请参考以下文章

ReactJS:意外令牌'<'

意外的令牌 <Container> ,reactjs,打字稿

模块解析失败:意外的令牌 Reactjs?

条件下的ReactJs组件意外令牌错误[重复]

未捕获的 SyntaxError:意外的令牌导入 - Reactjs

在带有 Babel 的 ReactJS 上使用异步等待会导致错误:意外的令牌