Kann kein Webpack + react + jquery + bootstrap-Projekt einrichten

Question

Mein Projekt ist korrekt kompiliert. Aber ich habe diesen Fehler in der Konsole, wenn ich die Webseite laden:

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 

Hier sind meine Hauptdateien:

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> 
     ); 
    } 
} 

es angenommen hat, "Reagieren Sie einfach Starter" auf der HTML-Seite, aber es anzuzeigen nicht.

Bitte helfen Sie und lassen Sie mich wissen, wenn Sie andere Dateien

PS sehen wollen: mit webpack Ich bin sehr neu

Answer 1

Versuchen Hinzufügen babel-preset-env und babel-preset-react zu Ihrem devDependencies und entfernen babel-preset-es2015:

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

und ändern Sie Ihre .babelrc:

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

Edit:

Versuchen Sie redux Speicher wie folgt zu erstellen:

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

Statt:

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

Answer 2

Der Fehler in OP scheint darauf hinzudeuten, dass der Code von index.js gelandet im codierten Format im entsprechenden Bundle. Sind Sie sicher, dass die index.js richtige Zeichen an oder nach der Zeile mit Code const createStoreWithMiddleware = applyMiddleware()(createStore); verwendet?