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

Question

看的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文件：

Answer 1

看题主的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",
   ]
}

Answer 2

import { createStore, compose ,applyMiddleware} from 'redux';
import thunk from 'redux-thunk';
const createStoreWithMiddleware = applyMiddleware(thunk)(createStore)
const configureStore = function(reducer) {
  return createStoreWithMiddleware(reducer);
}

let store = configureStore(reducer);

试一下~

Answer 3

遇到一样的问题，是没配置好babel的问题，
npm i babel-preset-es2015 --save-dev
npm i babel-preset-stage-0 --save-dev
配置.babelrc文件
{
"presets": ["es2015", "react", "stage-0"],
"plugins": [

"transform-decorators-legacy",
"transform-es2015-modules-commonjs"

]
}

Answer 4

你试试二楼说的方法，然后解决了嘛？？还是没有解决