Unable to setup a webpack+react+jquery+bootstrap project

Question

My project is compiled correctly. But I get this error in the console whenever I load the webpage :

    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

Here are my main files :

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

It's supposed to display "React simple starter" on the html page, but it doesn't.

Please help and let me know if you want to see other files

PS: I'm very new with webpack

Dyo · Accepted Answer · 2017-12-18 16:13:45Z

1

Try adding babel-preset-env and babel-preset-react to your devDependencies and remove babel-preset-es2015:

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

And change your .babelrc :

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

Edit:

Try creating your redux store like this:

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

Instead of :

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

edited Dec 18, 2017 at 16:13

answered Dec 18, 2017 at 15:32

Dyo

4,4641 gold badge18 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Dyo Over a year ago

Same error ? Do you run your app with webpack-dev-server (serve script in your package.json)

Rakesh Kumar Cherukuri · Accepted Answer · 2017-12-18 16:54:33Z

0

The error in OP seems to indicate that the code from index.js ended up in encoded format in corresponding bundle. Are you sure the index.js is using proper characters on or after line with code const createStoreWithMiddleware = applyMiddleware()(createStore); ?

answered Dec 18, 2017 at 16:54

Rakesh Kumar Cherukuri

1,27112 silver badges25 bronze badges

Collectives™ on Stack Overflow

Unable to setup a webpack+react+jquery+bootstrap project

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related