使用Webpack运行react-redux的问题

穆罕默德·赖汉·穆海敏

嗨,我正在阅读教程,并且已经根据教程设置了Webpack配置

无论我有以下文件 index.js

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

let store = createStore(todoApp)

let App = React.createClass({
  render: () => {
    return (
      <Provider store={store}>
        <AppComp />
      </Provider>
    )
  }
});

render(
  <App/>,
  document.getElementById('app')
)

而我的webpack配置是

var HtmlWebpackPlugin = require ('html-webpack-plugin');
var HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
    template: __dirname + '/app/index.html',
    filename: 'index.html',
    inject: 'body'
});

module.exports = {
    entry: [
        './app/index.js'
    ],
    output: {
        path: __dirname + '/dist',
        filename: 'index_build.js'
    },

    module: {
        loaders: [
            { 
                test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader', presets: ['es2015', 'react']  
            },
        ]
    },
    plugins: [HtmlWebpackPluginConfig]
};

当我使用webpack运行应用程序时,出现以下错误

ERROR in ./app/index.js
Module build failed: SyntaxError: Unexpected token (13:6)

  11 |   render: () => {
  12 |     return (
> 13 |       <Provider store={store}>
     |       ^
  14 |         <App />
  15 |       </Provider>
  16 |     )

任何人都可以帮助我解决此错误?

编辑:问题是我定义Webpack配置的方式,预设应位于查询块内。这是我更新的webpack配置文件

var HtmlWebpackPlugin = require('html-webpack-plugin')
var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
  template: __dirname + '/app/index.html',
  filename: 'index.html',
  inject: 'body'
});

module.exports = {
  entry: [
    './app/index.js'
  ],
  output: {
    path: __dirname + '/dist',
    filename: "index_bundle.js"
  },
  module: {
    loaders: [
      { 
          test: /\.js$/, 
          exclude: /node_modules/, 
          loader: 'babel-loader',
          query: {
            presets: ['react', 'babel-preset-react']
          } 
      }
    ]
  },
  plugins: [HTMLWebpackPluginConfig]
};
埃斯蒂克·艾哈迈德(Mr.Estiak Ahmmed)

您必须指定babel预设。您可以使用.babelrc

{
  "presets": [
  "react",
  "es2015"
 ]
}

或者您可以在您的加载程序查询中指定它:

loaders: [ 'babel?presets[]=react,presets[]=es2015' ]

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

React + Redux 更新问题

来自分类Dev

React 和 Redux 架构问题

来自分类Dev

使用Redux在React中调度动作的问题

来自分类Dev

使用 Redux-Saga 的问题

来自分类Dev

使用Webpack调试Redux / React

来自分类Dev

React react-redux redux-persist性能问题

来自分类Dev

React-Redux动作调度问题

来自分类Dev

在React / Redux中调度动作的问题

来自分类Dev

useDispatch挂钩问题-React Native / Redux

来自分类Dev

React-Redux动作调度问题

来自分类Dev

react-redux上slice()的问题

来自分类Dev

React/Redux 异步问题隐藏了 mapStateToProps 数据?

来自分类Dev

学习 react/redux 并遇到 connect() 问题

来自分类Dev

更新操作的 React-Redux 问题

来自分类Dev

正确使用 Redux 的一般问题

来自分类Dev

无法在React中使用Redux状态来解决问题

来自分类Dev

Redux React Express和Node如何克服CORS问题?

来自分类Dev

树结构和React / Redux中的shouldComponentUpdate的性能问题

来自分类Dev

打字稿中的React-Redux连接问题

来自分类Dev

在React Redux中的数据映射有问题吗?

来自分类Dev

如何解决react-redux解决问题?

来自分类Dev

Visual Studio 2019的React Redux Project模板,JavaScript问题

来自分类Dev

react-redux组件之间的存储映射问题

来自分类Dev

React Redux存储将道具传递给孩子的问题

来自分类Dev

React Native 中的 redux-form 有问题

来自分类Dev

React、Redux 和three.js 的性能问题

来自分类Dev

React + Redux 前端与 Rest 后端通信有问题

来自分类Dev

一般问题-什么时候使用Redux Store?

来自分类Dev

React-Redux,读取通过redux thunk获取的对象时出现问题