Bootstrap: Error while import bootstrap

[leebake]

I get an error when I try to import bootstrap. Version: "^4.0.0-beta",

ERROR in ./~/bootstrap/dist/js/bootstrap.js
Module parse failed: 
...\src\main\frontend\node_modules\bootstrap\dist\js\bootstrap.js this.state.current.addBlock is not a function
You may need an appropriate loader to handle this file type.
TypeError: this.state.current.addBlock is not a function

Module file:

import React from 'react';
import ReactDOM from 'react-dom';

import "../style/app.scss";

import "jquery";
import "popper.js";
import "bootstrap";

My webpack:

const PATHS = {
    source: path.join(__dirname, 'app'),
    output: path.join(__dirname, '../../../target/classes/static')
};

const common = {
    entry: [
        PATHS.source
    ],
    output: {
        path: PATHS.output,
        publicPath: '',
        filename: 'bundle.js'
    },
    module: {
        loaders: [{
            exclude: /node_modules/,
            loader: 'babel'
        }, {
            test: /\.css$/,
            loader: 'style!css'
        }, {
            test: /\.scss$/,
            loader: 'style!css!resolve-url-loader!sass'
        }, {
            test: /\.jpg|png$/,
            loader: "file?name=[path][name].[ext]"
        },{
            test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
            loader: "url-loader?limit=10000&mimetype=application/font-woff"
        }]
    },
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    plugins: [
        new webpack.ProvidePlugin({
            jQuery: 'jquery',
            $: 'jquery',
            'window.jQuery': 'jquery',
            "Tether": 'tether',
            Popper: ['popper.js', 'default']
            // In case you imported plugins individually, you must also require them here:
            // Util: "exports-loader?Util!bootstrap/js/dist/util",
            // Dropdown: "exports-loader?Dropdown!bootstrap/js/dist/dropdown",
        })
    ]
};

[Johann-S]

I'm not sure bootstrap is compatible with React you should use : https://reactstrap.github.io/

[leebake]

When I use alpha version, everything is right

[leebake]

React is not a cause, without import it, the problem still have

[rafalp]

Perhaps you should try dropping tether, seeing how its gone from betas? 🤔

[Johann-S]

Tether has been removed from Bootstrap since our first beta

[leebake]

The probable cause was the version of webpack and babel. Now, everything works great. Thank you guys!

[raghavsurya]

@leebake Can i know what version of webpack and babel are you using. I am still facing the same error while trying to reference bootstrap css

Uncaught Error: Module parse failed: /Applications/ReactProjects/adiddav1/node_modules/bootstrap/dist/css/bootstrap.css Unexpected token (7:5)
You may need an appropriate loader to handle this file type.
| /
| /! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
| html {
| font-family: sans-serif;
| -webkit-text-size-adjust: 100%;

[leebake]

It is not a problem with webpack/babel version. Probably ,you have to add loader for css
https://getbootstrap.com/docs/4.0/getting-started/webpack/#importing-styles
Please also look at the my webpack config