react.js - 已经引入了react-redux，使用Provider的时候却报错unexpected token

问题描述

问 题

看的Redux中文教程，其中一个示例Todo List，没有找到源码，就自己拷贝示例中给出的代码，安装依赖，但是明明已经安装了react-redux，index.js页面中也引入了provider，进行webpack的时候却报错：

index.js页面代码：

import React from 'react'
import { render } from 'react-dom'
import { createStore } from 'redux'
import { Provider } from 'react-redux'
import App from './containers/App'
import todoApp from './reducers'

let store = createStore(todoApp)

let rootElement = document.getElementById('root')
render(
  <Provider store={store}>
    <App />
  </Provider>,
  rootElement
)

package.json文件：

webpack.config.js文件：

解决方案

看题主的webpack报错是 SyntaxError，而且指的是<Provider ...的尖括号，推断应该是不识别JSX的语法。

再看下题主的webpack.config.js，其中babel的test要求是.jsx的文件，但题主的主文件却是.js的，可能是没有匹配到。

此外，babel也许要正确的配置.babelrc来支持JSX，可以参考：

{
   "presets": [ "react", "es2015" ],
   "plugins": [
      "transform-es2015-modules-commonjs",
      "transform-react-constant-elements",
   ]
}

这篇关于react.js - 已经引入了react-redux，使用Provider的时候却报错unexpected token的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！