Can't Get Bootstrap v4 Working in react-slingshot - reactjs

Question

I am using react-slingshot to build my React applications, and I am trying to integrate Bootstrap v4 into it and not having any luck with getting the JavaScript working.
So far, I have a package.json file that looks like the following:
{
"name": "react-slingshot",
"version": "5.0.0",
"description": "Starter kit for creating apps with React and Redux",
"engines": {
"npm": ">=3"
},
"scripts": {
"preinstall": "node tools/nodeVersionCheck.js",
"setup": "node tools/setup/setupMessage.js && npm install && node tools/setup/setup.js",
"remove-demo": "babel-node tools/removeDemo.js",
"start-message": "babel-node tools/startMessage.js",
"prestart": "npm-run-all --parallel start-message remove-dist",
"start": "npm-run-all --parallel test:watch open:src lint:watch",
"open:src": "babel-node tools/srcServer.js",
"open:dist": "babel-node tools/distServer.js",
"lint": "esw webpack.config.* src tools --color",
"lint:watch": "npm run lint -- --watch",
"clean-dist": "npm run remove-dist && mkdir dist",
"remove-dist": "rimraf ./dist",
"prebuild": "npm run clean-dist && npm run lint && npm run test",
"build": "babel-node tools/build.js && npm run open:dist",
"test": "mocha tools/testSetup.js \"src/**/*.spec.js\" --reporter progress",
"test:cover": "babel-node node_modules/isparta/bin/isparta cover --root src --report html node_modules/mocha/bin/_mocha -- --require ./tools/testSetup.js \"src/**/*.spec.js\" --reporter progress",
"test:cover:travis": "babel-node node_modules/isparta/bin/isparta cover --root src --report lcovonly _mocha -- --require ./tools/testSetup.js \"src/**/*.spec.js\" && cat ./coverage/lcov.info | node_modules/coveralls/bin/coveralls.js",
"test:watch": "npm run test -- --watch",
"open:cover": "npm run test:cover && open coverage/index.html"
},
"author": "Cory House",
"license": "MIT",
"dependencies": {
"bootstrap": "4.0.0-alpha.4",
"bootstrap-loader": "2.0.0-beta.12",
"imports-loader": "0.6.5",
"jquery": "3.1.1",
"moment": "2.15.1",
"object-assign": "4.1.0",
"react": "15.3.1",
"react-addons-transition-group": "15.3.2",
"react-dom": "15.3.1",
"react-redux": "4.4.5",
"react-router": "2.7.0",
"react-router-redux": "4.0.5",
"reactstrap": "3.3.2",
"redux": "3.5.2",
"redux-thunk": "2.1.0",
"tether": "1.3.7"
},
"devDependencies": {
"autoprefixer": "6.4.0",
"babel-cli": "6.14.0",
"babel-core": "6.14.0",
"babel-loader": "6.2.5",
"babel-plugin-react-display-name": "2.0.0",
"babel-plugin-transform-react-constant-elements": "6.9.1",
"babel-plugin-transform-react-remove-prop-types": "0.2.9",
"babel-preset-latest": "6.14.0",
"babel-preset-react": "6.11.1",
"babel-preset-react-hmre": "1.1.1",
"babel-preset-stage-1": "6.13.0",
"babel-register": "6.14.0",
"bootstrap": "4.0.0-alpha.4",
"browser-sync": "2.14.0",
"chai": "3.5.0",
"chalk": "1.1.3",
"connect-history-api-fallback": "1.3.0",
"coveralls": "2.11.12",
"cross-env": "2.0.1",
"css-loader": "0.24.0",
"enzyme": "2.4.1",
"eslint": "3.4.0",
"eslint-plugin-import": "1.14.0",
"eslint-plugin-jsx-a11y": "2.2.0",
"eslint-plugin-react": "6.2.0",
"eslint-watch": "2.1.14",
"extract-text-webpack-plugin": "1.0.1",
"file-loader": "0.9.0",
"html-webpack-plugin": "2.22.0",
"isparta": "4.0.0",
"mocha": "3.0.2",
"mockdate": "1.0.4",
"node-sass": "3.8.0",
"npm-run-all": "3.0.0",
"open": "0.0.5",
"postcss-loader": "0.11.0",
"prompt": "1.0.0",
"react-addons-test-utils": "15.3.1",
"redux-immutable-state-invariant": "1.2.3",
"replace": "0.3.0",
"resolve-url-loader": "1.6.0",
"rimraf": "2.5.4",
"sass-loader": "4.0.0",
"sinon": "1.17.5",
"sinon-chai": "2.8.0",
"style-loader": "0.13.1",
"url-loader": "0.5.7",
"webpack": "1.13.2",
"webpack-dev-middleware": "1.6.1",
"webpack-hot-middleware": "2.12.2",
"webpack-md5-hash": "0.0.5"
},
"keywords": [
"react",
"reactjs",
"react-router",
"hot",
"reload",
"hmr",
"live",
"edit",
"webpack",
"redux",
"flux",
"boilerplate",
"starter"
],
"repository": {
"type": "git",
"url": "https://github.com/coryhouse/react-slingshot"
}
}
I have a webpack file that looks like:
import webpack from 'webpack';
import HtmlWebpackPlugin from 'html-webpack-plugin';
import autoprefixer from 'autoprefixer';
import path from 'path';
export default {
resolve: {
extensions: ['', '.js', '.jsx']
},
debug: true,
devtool: 'eval-source-map', // more info:https://webpack.github.io/docs/build-performance.html#sourcemaps and https://webpack.github.io/docs/configuration.html#devtool
noInfo: true, // set to false to see a list of every file being bundled.
entry: [
'bootstrap-loader',
'./src/webpack-public-path',
'webpack-hot-middleware/client?reload=true',
path.resolve(__dirname, 'src/index.js') // Defining path seems necessary for this to work consistently on Windows machines.
],
target: 'web', // necessary per https://webpack.github.io/docs/testing.html#compile-and-test
output: {
path: path.resolve(__dirname, 'dist'), // Note: Physical files are only output by the production build task `npm run build`.
publicPath: '/',
filename: 'bundle.js'
},
plugins: [
new webpack.ProvidePlugin({
$: "jquery",
jQuery: "jquery",
"window.jQuery": "jquery",
Tether: "tether",
"window.Tether": "tether",
Tooltip: "exports?Tooltip!bootstrap/js/dist/tooltip",
Alert: "exports?Alert!bootstrap/js/dist/alert",
Button: "exports?Button!bootstrap/js/dist/button",
Carousel: "exports?Carousel!bootstrap/js/dist/carousel",
Collapse: "exports?Collapse!bootstrap/js/dist/collapse",
Dropdown: "exports?Dropdown!bootstrap/js/dist/dropdown",
Modal: "exports?Modal!bootstrap/js/dist/modal",
Popover: "exports?Popover!bootstrap/js/dist/popover",
Scrollspy: "exports?Scrollspy!bootstrap/js/dist/scrollspy",
Tab: "exports?Tab!bootstrap/js/dist/tab",
Util: "exports?Util!bootstrap/js/dist/util",
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('development'), // Tells React to build in either dev or prod modes. https://facebook.github.io/react/downloads.html (See bottom)
__DEV__: true
}),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
new HtmlWebpackPlugin({ // Create HTML file that includes references to bundled CSS and JS.
template: 'src/index.ejs',
minify: {
removeComments: true,
collapseWhitespace: true
},
inject: true
})
],
module: {
loaders: [
{ test: /bootstrap.+\.(jsx|js)$/, loader: 'imports?jQuery=jquery,$=jquery,this=>window' },
{test: /\.jsx?$/, exclude: /node_modules/, loaders: ['babel']},
{test: /\.eot(\?v=\d+.\d+.\d+)?$/, loader: 'file'},
{test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url?limit=10000&mimetype=application/font-woff"},
{test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=application/octet-stream'},
{test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'url?limit=10000&mimetype=image/svg+xml'},
{test: /\.(jpe?g|png|gif)$/i, loader: 'file?name=[name].[ext]'},
{test: /\.ico$/, loader: 'file?name=[name].[ext]'},
{test: /(\.css|\.scss)$/, loaders: ['style', 'css?sourceMap', 'postcss', 'sass?sourceMap']},
]
},
postcss: ()=> [autoprefixer]
};
And I am getting the following error:
ERROR in ./~/bootstrap-loader/lib/bootstrap.loader.js!./~/bootstrap-loader/no-op.js
Module build failed: Error:
Could not find bootstrap version: '3'. Did you install it?
The package is 'bootstrap' for bootstrap v4 and 'bootstrap-sass' for v3.
at Object.module.exports.pitch (/Users/ryannealmes/sites/work/andromeda/node_modules/bootstrap-loader/lib/bootstrap.loader.js:143:11)
# ./~/bootstrap-loader/loader.js 6:17-61
Child html-webpack-plugin for "index.html":
I have Googled around and found many answers around this, but none of them work. Can anyone point me in the direction I should be looking to get Bootstrap v4 JavaScript working for react-slingshot?

Answer 1

Are you attempting to use bootstrap v3 or v4? You have v4 installed if you are looking to use that you need to additionally have a .bootstraprc in your project root that has a minimum "bootstrapVersion": 3.
Additionally, I would move down the bootstrap-loader in your entry below the ./src/webpack-public-path as this file fixes issues relative paths to icon fonts. This was mostly an issue with bootstrap 3, but may have ill effects if not first in the list.
source