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?
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.