reactjs意外的令牌'<'

Posted 2023-03-24

【中文标题】reactjs意外的令牌\'<\'

【英文标题】：reactjs Unexpected token '<'reactjs意外的令牌'<'

【发布时间】：2018-04-17 00:19:22

【问题描述】：

我用 react-redux,redux 创建了 reactjs 应用程序。 启动 reactjs 项目时，在索引文件的第 13 行出现意外的令牌错误。 索引文件如下。

ERROR in ./src/index.js
Module build failed: SyntaxError: D:/Reactjs_work/
/src/index.js: Unexpected token (13:2)

  11 |
  12 | ReactDOM.render(
> 13 |   <Provider store=createStoreWithMiddleware(reducers)>
     |   ^
  14 |     <App />
  15 |   </Provider>
  16 |   , document.querySelector('.container'));

 @ multi main
webpack: Failed to compile.

下面是 index.js 文件

import React from 'react';
import ReactDOM from 'react-dom';
import  Provider  from 'react-redux';
import  createStore, applyMiddleware  from 'redux';

import App from './components/app';
import reducers from './reducers';

const createStoreWithMiddleware = applyMiddleware()(createStore);

ReactDOM.render(
  <Provider store=createStoreWithMiddleware(reducers)>
    <App />
  </Provider>
  , document.querySelector('.container'));

我在这里完成了以下主题。但没有成功。 Reactjs: Unexpected token '<' Error ReactJS Syntax Error: Unexpected Token

webpack.config.js

module.exports = 
  entry: [
    './src/index.js'
  ],
  output: 
    path: __dirname,
    publicPath: '/',
    filename: 'bundle.js'
  ,
  module: 
    loaders: [
      exclude: /node_modules/,
      loader: 'babel'
    ]
  ,
  resolve: 
    extensions: ['', '.js', '.jsx']
  ,
  devServer: 
    historyApiFallback: true,
    contentBase: './'
  
;

【问题讨论】：

你有.babelrc文件吗？

你在.babelrc里面设置预设吗？

因为我是 reactjs 新手，不太了解。我从github.com/RoadToCode822/react-side-projects 下载了项目并尝试制作它

【参考方案1】：

用以下代码替换模块

module: 
    loaders: [
      test: /\.(js|jsx)?$/,
        exclude: /node_modules/,
        loader: 'babel-loader',

        query: 
           presets: ['es2015', 'react']
        
    ]
  ,

【讨论】：

这应该是对问题的评论，而不是答案。

现在我已经编辑了我的答案，希望这会有所帮助。我无法评论，因为我是这个堆栈社区的新手！！！！

@https.tejassdotin：好多了 - 将我的反对票改为赞成票 :)

@https.tejassdotin: 我已经投了赞成票，从现在开始你可以评论了:)

在 rails-react 项目中我应该在哪里添加它？我在项目中没有找到任何 webpack-config 或 .babelrc 文件

【参考方案2】：

有同样的错误：

ERROR in ./src/main.js
Module build failed: SyntaxError: Unexpected token (11:1)

   9 | 
  10 | ReactDOM.render(
> 11 |  <Provider store=store>
     |  ^
  12 |      <App />
  13 |  </Provider>,
  14 |  mountNode

 @ multi main
webpack: Failed to compile.

模块部分的改动我不帮忙。

我的错误：缺少 .babelrc 文件

使用内容创建 .babelrc 后：

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

我的错误消失了。如此简单:-)