无法设置webpack + react + jquery + bootstrap项目

Question

我的项目编译正确。但我在控制台中这个错误，每当我加载网页：

bundle.4bc8d06487c51394a532.js:71 Uncaught Error: Module build failed: SyntaxError: Unexpected token (31:4) 

[0m [90m 29 | [39m 
[90m 30 | [39m[33mReactDOM[39m[33m.[39mrender(
[31m[1m>[22m[39m[90m 31 | [39m [33m<[39m[33mProvider[39m store[33m=[39m{createStoreWithMiddleware(reducers)}[33m>[39m 
[90m | [39m [31m[1m^[22m[39m 
[90m 32 | [39m  [33m<[39m[33mApp[39m [33m/[39m[33m>[39m 
[90m 33 | [39m [33m<[39m[33m/[39m[33mProvider[39m[33m>[39m 
[90m 34 | [39m [33m,[39m document[33m.[39mquerySelector([32m'.container'[39m))[33m;[39m[0m 


    at Object.106 (bundle.4bc8d06487c51394a532.js:71) 
    at __webpack_require__ (bundle.4bc8d06487c51394a532.js:20) 
    at 106 (bundle.4bc8d06487c51394a532.js:63) 
    at bundle.4bc8d06487c51394a532.js:66 

这里是我的主要文件：

webpack.config.js

const webpack = require('webpack') 
const ExtractTextPlugin = require("extract-text-webpack-plugin") 
const path = require('path') 

const extractSass = new ExtractTextPlugin({ 
    filename: "styles.css", 
}); 

const VENDOR_LIBS = [ 
    'react', 'lodash', 'redux', 'react-redux', 'react-dom', 'react-input-range', 'redux-form', 'redux-thunk' 
]; 


module.exports = { 
    entry: { 
     bundle: './src/index.js', 
     vendor: VENDOR_LIBS 
    }, 
    output: { 
     filename: '[name].[chunkhash].js', 
     path: path.resolve(__dirname, 'build') 
    }, 
    module: { 
     rules: [ 
      { 
       loader: 'babel-loader', 
       test: /\.js$/, 
       include: path.resolve(__dirname, 'src'), 
      }, 
      { 
       test: /\.(scss)$/, 
       use: extractSass.extract({ 
        fallback: 'style-loader', 
        //resolve-url-loader may be chained before sass-loader if necessary 
        use: [{ 
         loader: "css-loader" // translates CSS into CommonJS 
        }, { 
         loader: "sass-loader" // compiles Sass to CSS 
        }] 
       }) 
      }, 

      { 
       test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)(\?.*$|$)/, 
       loader: 'file-loader' 
      } 

     ] 
    }, 
    plugins: [ 
     new webpack.ProvidePlugin({ 
      $: "jquery", // Used for Bootstrap JavaScript components 
      jQuery: "jquery", // Used for Bootstrap JavaScript components 
      Tether: 'tether', 

      Popper: ['popper.js', 'default'] // Used for Bootstrap dropdown, popup and tooltip JavaScript components 
     }), 
     extractSass 
    ] }; 

.babelrc

{ 
    "presets": ["babel-preset-env", "react"] 
} 

package.json

{ 
    "name": "app-test", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "clean": "rimraf dist", 
    "build": "webpack", 
    "serve": "webpack-dev-server" 
    }, 
    "repository": "", 
    "author": "Edgar KAMDEM", 
    "license": "ISC", 
    "dependencies": { 
    "bootstrap": "^4.0.0-alpha.6", 
    "file-loader": "^1.1.5", 
    "font-awesome": "^4.7.0", 
    "jquery": "^3.2.1", 
    "jquery-ui-dist": "^1.12.1", 
    "lodash": "^4.17.4", 
    "mxgraph": "^3.8.0", 
    "popper.js": "^1.12.9", 
    "react": "^16.2.0", 
    "react-dom": "^16.2.0", 
    "react-input-range": "^1.2.2", 
    "react-redux": "^5.0.6", 
    "react-router": "^4.2.0", 
    "redux": "^3.7.2", 
    "redux-form": "^7.2.0", 
    "redux-thunk": "^2.2.0" 
    }, 
    "devDependencies": { 
    "autoprefixer": "^7.1.6", 
    "babel-core": "^6.26.0", 
    "babel-loader": "^7.1.2", 
    "babel-preset-es2015": "^6.24.1", 
    "css-loader": "^0.28.7", 
    "extract-text-webpack-plugin": "^3.0.2", 
    "node-sass": "^4.7.2", 
    "postcss-loader": "^2.0.9", 
    "precss": "^2.0.0", 
    "sass-loader": "^6.0.6", 
    "style-loader": "^0.19.0", 
    "webpack": "^3.8.1", 
    "webpack-dev-server": "^2.9.7" 
    } 
} 

个

index.js

// Bootstrap dependencies 
window.$ = window.jQuery = require('jquery') // required for bootstrap 
window.Popper = require('popper.js') // required for tooltip, popup... 
import 'bootstrap' 
// import '../scss/main.scss' import it in prod 


import './index.scss' // include bootstrap css file with own modifications 

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'; 



// tooltip and popover require javascript side modification to enable them (new in Bootstrap 4) 
// use tooltip and popover components everywhere 
$(function(){ 
    $('[data-toggle="tooltip"]').tooltip(); 
    $('[data-toggle="popover"]').popover(); 
}); 


const createStoreWithMiddleware = applyMiddleware()(createStore); 

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

的index.html

<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>app test</title> 
    <link rel="stylesheet" type="text/css" href="build/styles.css"> 
    <link rel="stylesheet" href="external/jqueryui-ruler/css/jquery.ui.ruler.css"> 
</head> 
<body > 
<header > 

</header> 

<!-- Begin page content --> 
<div role="main" class="container"> 

</div> 


<footer> 

</footer> 


<script src="build/bundle.4bc8d06487c51394a532.js"></script> 
<script src="build/vendor.b97aa871a1eeaedf871a.js"></script> 

</body> 
</html> 

app.js

import React, { Component } from 'react'; 

export default class App extends Component { 
    render() { 
     return (
      <div style="font-size: 40px">React simple starter</div> 
     ); 
    } 
} 

它应该显示HTML页的 “阵营简单首发”，但它没有。

请帮帮忙，让你想看其他文件

PS我知道：我很新用的WebPack

Answer 1

尝试增加babel-preset-env和babel-preset-react您devDependencies并删除babel-preset-es2015：

yarn add -d babel-preset-env babel-preset-react或npm install -D babel-preset-env babel-preset-react

并更改您的.babelrc：

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

编辑：

尝试创建终极版店是这样的：

const store = createStore(reducers) //assuming reducers is your combined reducers 
... 
<Provider store={store}> 

相反的：

const createStoreWithMiddleware = applyMiddleware()(createStore); 
... 
<Provider store={createStoreWithMiddleware(reducers)}> 

Answer 2

在OP的错误似乎表明，从index.js代码结束了以相应捆绑中的编码格式。您确定index.js在代码const createStoreWithMiddleware = applyMiddleware()(createStore);之后或之后是否使用了正确的字符？