not working out of the box

[albertalquisola]

ran 'npm install --save bootstrap-webpack' added in font/jquery dependencies in webpack.config.js added require('bootstrap-webpack') to top of main entry js file

result getting module not found errors like this: Error: Cannot resolve module 'bootstrap/js/transition'

I'm not seeing a bootstrap directory within the node module itself so the path seems incorrect

[tehfailsafe]

Same thing here, tons of errors being thrown about modules not found. Shouldn't the modules bootstrap-webpack relies on be dependencies of it and get installed automatically?

[jorgecas99]

I get the same issue too, see below:

ERROR in ./~/bootstrap/js/tab.js Module build failed: Error: Final loader didn't return a Buffer or String at DependenciesBlock.onModuleBuild (/Users/jorgejcastillo/saweb/src/main/webapp/node_modules/webpack-core/lib/NormalModuleMixin.js:299:42) at nextLoader (/Users/jorgejcastillo/saweb/src/main/webapp/node_modules/webpack-core/lib/NormalModuleMixin.js:275:25) at /Users/jorgejcastillo/saweb/src/main/webapp/node_modules/webpack-core/lib/NormalModuleMixin.js:292:15 at runSyncOrAsync (/Users/jorgejcastillo/saweb/src/main/webapp/node_modules/webpack-core/lib/NormalModuleMixin.js:160:12) at nextLoader (/Users/jorgejcastillo/saweb/src/main/webapp/node_modules/webpack-core/lib/NormalModuleMixin.js:290:3) at /Users/jorgejcastillo/saweb/src/main/webapp/node_modules/webpack-core/lib/NormalModuleMixin.js:259:5 at Storage.finished (/Users/jorgejcastillo/saweb/src/main/webapp/node_modules/enhanced-resolve/lib/CachedInputFileSystem.js:38:16) at /Users/jorgejcastillo/saweb/src/main/webapp/node_modules/graceful-fs/graceful-fs.js:76:16 at FSReqWrap.readFileAfterClose as oncomplete @ ./~/bootstrap-webpack/bootstrap-scripts.loader.js!./bootstrap.config.js 11:0-27

Do Bootstrap plugin Js files needs to be listed in package.json under dependencies too?

[jorgecas99]

Solution A: You don't need this line 'bootstrap-webpack!./bootstrap.config.js' in your entry section of webpack.config.js you can simply 'import' the plugin(s) you need through your app.js or index.js (whichever file you execute first). i.e.: import 'bootstrap/js/tab.js';

Solution B: Leave this line in your entry section of webpack.config.js: 'bootstrap-webpack!./bootstrap.config.js' no need to import anything.

In order for you to get rid of your red (errors) while compiling, simply install the imports-loader like this: npm install imports-loader --save-dev

You should be able to build now without any errors.

[manodupont]

Doesnt work at all for me.

/**
 * React Starter Kit (https://www.reactstarterkit.com/)
 *
 * Copyright © 2014-2016 Kriasoft, LLC. All rights reserved.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE.txt file in the root directory of this source tree.
 */

import path from 'path';
import webpack from 'webpack';
import merge from 'lodash.merge';
import AssetsPlugin from 'assets-webpack-plugin';

const DEBUG = !process.argv.includes('--release');
const VERBOSE = process.argv.includes('--verbose');
const AUTOPREFIXER_BROWSERS = [
  'Android 2.3',
  'Android >= 4',
  'Chrome >= 35',
  'Firefox >= 31',
  'Explorer >= 9',
  'iOS >= 7',
  'Opera >= 12',
  'Safari >= 7.1',
];
const GLOBALS = {
  'process.env.NODE_ENV': DEBUG ? '"development"' : '"production"',
  __DEV__: DEBUG,
};

//
// Common configuration chunk to be used for both
// client-side (client.js) and server-side (server.js) bundles
// -----------------------------------------------------------------------------

const config = {
  entry: [
    "bootstrap-webpack!./bootstrap.config.js",
  ],
  output: {
    publicPath: '/',
    sourcePrefix: '  ',
  },

  cache: DEBUG,
  debug: DEBUG,

  stats: {
    colors: true,
    reasons: DEBUG,
    hash: VERBOSE,
    version: VERBOSE,
    timings: true,
    chunks: VERBOSE,
    chunkModules: VERBOSE,
    cached: VERBOSE,
    cachedAssets: VERBOSE,
  },

  plugins: [
    new webpack.optimize.OccurenceOrderPlugin(),
  ],

  resolve: {
    extensions: ['', '.webpack.js', '.web.js', '.js', '.jsx', '.json', 'css'],
  },

  module: {
    loaders: [
      {
        test: /\.css$/,
        loader: "style-loader!css-loader"
      },
      // **IMPORTANT** This is needed so that each bootstrap js file required by
      // bootstrap-webpack has access to the jQuery object

      {test: /bootstrap\/js\//, loader: 'imports?jQuery=jquery'},

      // Needed for the css-loader when [bootstrap-webpack](https://github.com/bline/bootstrap-webpack)
      // loads bootstrap's css.
      {test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/font-woff"},
      {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "url?limit=10000&mimetype=application/octet-stream"},
      {test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: "file"},

      {
        test: /\.jsx?$/,
        include: [
          path.resolve(__dirname, '../node_modules/react-routing/src'),
          path.resolve(__dirname, '../src'),
        ],
        loader: 'babel-loader',
      }, {
        test: /\.scss$/,
        loaders: [
          'isomorphic-style-loader',
          'css-loader?' + (DEBUG ? 'sourceMap&' : 'minimize&') +
          'modules&localIdentName=[name]_[local]_[hash:base64:3]',
          'postcss-loader',
        ],
      }, {
        test: /\.json$/,
        loader: 'json-loader',
      }, {
        test: /\.txt$/,
        loader: 'raw-loader',
      }, {
        test: /\.(png|jpg|jpeg|gif|svg|woff|woff2)$/,
        loader: 'url-loader?limit=10000',
      }, {
        test: /\.(eot|ttf|wav|mp3)$/,
        loader: 'file-loader',
      },
    ],
  },

  postcss: function plugins(bundler) {
    return [
      require('postcss-import')({addDependencyTo: bundler}),
      require('precss')(),
      require('autoprefixer')({browsers: AUTOPREFIXER_BROWSERS}),
    ];
  },
};

//
// Configuration for the client-side bundle (client.js)
// -----------------------------------------------------------------------------

const clientConfig = merge({}, config, {
  entry: './src/client.js',
  output: {
    path: path.join(__dirname, '../build/public'),
    filename: DEBUG ? '[name].js?[hash]' : '[name].[hash].js',
  },
  // Choose a developer tool to enhance debugging
  // http://webpack.github.io/docs/configuration.html#devtool
  devtool: DEBUG ? 'cheap-module-eval-source-map' : false,
  plugins: [
    new webpack.DefinePlugin(GLOBALS),
    new AssetsPlugin({
      path: path.join(__dirname, '../build'),
      filename: 'assets.js',
      processOutput: x => `module.exports = ${JSON.stringify(x)};`,
    }),
    ...(!DEBUG ? [
      new webpack.optimize.DedupePlugin(),
      new webpack.optimize.UglifyJsPlugin({
        compress: {
          // jscs:disable requireCamelCaseOrUpperCaseIdentifiers
          screw_ie8: true,

          // jscs:enable requireCamelCaseOrUpperCaseIdentifiers
          warnings: VERBOSE,
        },
      }),
      new webpack.optimize.AggressiveMergingPlugin(),
    ] : []),
  ],
});

//
// Configuration for the server-side bundle (server.js)
// -----------------------------------------------------------------------------

const serverConfig = merge({}, config, {
  entry: './src/server.js',
  output: {
    path: './build',
    filename: 'server.js',
    libraryTarget: 'commonjs2',
  },
  target: 'node',
  externals: [
    /^\.\/assets$/,
    function filter(context, request, cb) {
      const isExternal =
        request.match(/^[@a-z][a-z\/\.\-0-9]*$/i) && !request.match(/^react-routing/) && !context.match(/[\\/]react-routing/);
      cb(null, Boolean(isExternal));
    },
  ],
  node: {
    console: false,
    global: false,
    process: false,
    Buffer: false,
    __filename: false,
    __dirname: false,
  },
  devtool: 'source-map',
  plugins: [
    new webpack.DefinePlugin(GLOBALS),
    new webpack.BannerPlugin('require("source-map-support").install();',
      {raw: true, entryOnly: false}),
  ],
});

export default [clientConfig, serverConfig];

[manodupont]

So the important lines are :

...
const config = {
  entry: [
    "bootstrap-webpack!./bootstrap.config.js",
  ],
...

But this, doesnt load anything. I dont see any bootstrap.css loaded in Chrome Dev Tools for example and neither i see the style on the screen with an html like this

<button type="button" class="btn btn-primary" data-reactid=".gnt59td91c.0.0.0.0">Primary</button>

[manodupont]

And i dont have any loading errors on anything in the console. Its pretty confusing.

[jorgecas99]

I created a basic template that is framework agnostic. You can use Angular or React or whatever. You can get it here: https://github.com/jorgecas99/webpack-bootstrap-fontawesome