Bootstrap not imported

[alex88]

Hi there,

in my project I'm using bootstrap--loader within the entry configuration, in storybook I have:

import { configure } from '@kadira/storybook';
import 'bootstrap-loader';

function loadStories() {
  require('../src/views/visualization/widgets/widget-container/react-component-stories.jsx');
  require('../src/views/visualization/widgets/horizontal-data/react-component-stories.jsx');
}

configure(loadStories, module);

and

const path = require('path');
const paths = {
  root: __dirname,
  src: path.join(__dirname, '..', 'src'),
  build: path.join(__dirname, '..', 'dist'),
  static: path.join(__dirname, '..', 'static'),
  node_modules: path.join(__dirname, '..', 'node_modules')
};
const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  module: {
    loaders: [
      { test: /\.less$/, loader: `style!css?root=${paths.static}&sourceMap&importLoaders=2&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!less?outputStyle=expanded&sourceMap` },
      { test: /\.scss$/, loader: `style!css?root=${paths.static}&sourceMap&importLoaders=2&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap` },
      { test: /\.css$/, loader: `style!css?root=${paths.static}&sourceMap&importLoaders=2&localIdentName=[local]___[hash:base64:5]` },
      { test: /\.sass$/, loader: `style!css?root=${paths.static}&sourceMap&importLoaders=2&localIdentName=[local]___[hash:base64:5]!autoprefixer?browsers=last 2 version!sass?outputStyle=expanded&sourceMap&indentedSyntax` },
      { test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: 'file?limit=10000&mimetype=application/font-woff&name=assets/fonts/[name]-[hash].[ext]' },
      { test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: 'file?limit=10000&mimetype=application/font-woff&name=assets/fonts/[name]-[hash].[ext]' },
      { test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: 'file?limit=10000&mimetype=application/octet-stream&name=assets/fonts/[name]-[hash].[ext]' },
      { test: /\.eot(\?v=\d+\.\d+\.\d+)?$/, loader: 'file?name=assets/fonts/[name]-[hash].[ext]' },
      { test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'file?limit=10000&mimetype=image/svg+xml&name=assets/images/[name]-[hash].[ext]' },
      { test: /\.(png|jpg|gif)$/, loader: 'file?name=assets/images/[name]-[hash].[ext]' }
    ]
  },
  resolve: {
    modulesDirectories: ['src', 'node_modules'],
    extensions: ['', '.json', '.js', '.jsx'],
    root: [paths.src, paths.static]
  },
  plugins: [
    new ExtractTextPlugin('assets/stylesheets/[name]-[chunkhash].css', { allChunks: true })
  ]
};
``

but still, no errors and bootstrap isn't included, is there anything else I need to do to include it?

In the css guide it says just to require it in `config.js``

[hirviid]

Hi alex88, did you manage to get this to work?

[alex88]

Hi @hirviid, unfortunately nope, I haven't :(

[unoriginalscreenname]

same issue. I'm specifically trying to get the javascript to load. have you had any luck here?

[michael-martin]

For anyone that comes back to this later, I've got it working by:

• Add bootstrap-loader as an entry point to Storybook's webpack.config.js
• Import it in config.js as @alex88 did.

Full webpack.config.js (Mostly just the CSS loaders from React Redux Starter Kit):

const path = require('path');

const BASE_CSS_LOADER = 'css?sourceMap&-minimize';

module.exports = {
  module: {
    entry: {
      app: ['bootstrap-loader']
    },
    loaders: [
      {
        test: /\.scss$/,
        loaders: [
          'style',
          BASE_CSS_LOADER,
          'postcss',
          'sass?sourceMap'
        ]
      },
      {
        test: /\.css?$/,
        loaders: [
          'style',
          BASE_CSS_LOADER,
          'postcss'
        ],
        include: path.resolve(__dirname, '../')
      }
    ]
  }
}

And then in storybook/config.js:

import 'bootstrap-loader';

[AlexandreRoba]

Hi all, thanks for the solution. Unfortunately it fails for me. I'm getting webpack errors for file extention such as "ttf", "svg", "woff"... I tried to add the following loader to my webpack config file:

loaders: [
... other loaders
{
    test: /\.(eot|woff|woff2|ttf|svg|png|jpg)$/,
    loader: 'url-loader?limit=30000&name=[name]-[hash].[ext]'
}

but after this none of my stories loads. Any idea?

Thanks

[AlexandreRoba]

I manage to isolate the issue but I have no idea why this is not working. My config files is the following:

import { configure } from '@kadira/storybook';
import { setStubbingMode } from 'react-komposer';
import 'bootstrap-loader';

// Enable react-komposer stubbing.
// See: https://github.com/kadirahq/react-komposer#stubbing
setStubbingMode(true);

function loadStories() {
    require('../client/modules/core/components/.stories');
    require('../client/modules/noises/components/.stories');
    require('../client/modules/users/components/.stories');
    // require as many as stories you need.
}

configure(loadStories, module);

my webpack.config.js is like:

const path = require('path');

const BASE_CSS_LOADER = 'css?sourceMap&-minimize';

module.exports = {
    module: {
        entry: {
            app: ['bootstrap-loader']
        },
        loaders: [
            {
                test: /\.scss$/,
                loaders: [
                    'style',
                    BASE_CSS_LOADER,
                    'postcss',
                    'sass?sourceMap'
                ]
            },
            {
                test: /\.css?$/,
                loaders: [
                    'style',
                    BASE_CSS_LOADER,
                    'postcss'
                ],
                include: path.resolve(__dirname, '../')
            },
            {
                test   : /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
                loader : 'file-loader'
            }
        ]
    }
}

when I start sorybook I do not see any story loaded on the storybook. But If I remove the import 'bootstrap-loader' from the config they show up. It is like the import is preventing the stories to be loaded...

After Investigating a bit I saw that when using import bootstrap-loader it also requires JQuery. I'm getting the following error. Uncaught ReferenceError: jQuery is not defined

I'm now looking for a solution for this.

[gkaran]

Had the same issue but adding the following loader solved the issue with jQuery for me:

{
  test: /bootstrap-sass(\\|\/)assets(\\|\/)javascripts(\\|\/)/,
  loader: 'imports?jQuery=jquery'
}

You also need to install the imports-loader package.

[AlexandreRoba]

Hey gkaran, thanks for the solution. It did the trick for me. :)

[code-by]

I'm try to add bootstrap-loader into storybook (React 16, webpack 3.4.1, storybook 3.1.9). I have 'compile' solutions above, but I get errors for files with name glyphicons-halflings-regular but different extensions eot, woff2, woff, ttf, svg: You may need an appropriate loader to handle this file type.

my config

import { configure } from '@storybook/react';

import 'bootstrap-loader';

function loadStories() {
  require('../stories');
}

configure(loadStories, module);

webpack

const path = require('path');

const BASE_CSS_LOADER = 'css?sourceMap&-minimize';

module.exports = {
  module: {
    entry: {
      app: ['bootstrap-loader']
    },
    loaders: [
      {
        test: /\.scss$/,
        loaders: [
          'style',
          BASE_CSS_LOADER,
          'postcss',
          'sass?sourceMap'
        ]
      },
      {
        test: /\.css?$/,
        loaders: [
          'style',
          BASE_CSS_LOADER,
          'postcss'
        ],
        include: path.resolve(__dirname, '../')
      },
      {
        test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
        loader: 'file-loader'
      },
      {
        test: /bootstrap-sass(\\|\/)assets(\\|\/)javascripts(\\|\/)/,
        loader: 'imports?jQuery=jquery'
      }
    ]
  }
};

so what I could miss/mistake?

[ndelangen]

You're using loaders, change this to rules

[code-by]

@ndelangen , this way?

    rules: [
      {
        test: /\.scss$/,
        rules: [
          'style',
          BASE_CSS_LOADER,
          'postcss',
          'sass?sourceMap'
        ]
      },
      ...
      {
        test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
        rules: 'file-loader'
      },
      {
        test: /bootstrap-sass(\\|\/)assets(\\|\/)javascripts(\\|\/)/,
        rules: 'imports?jQuery=jquery'
      }
    ]

[ndelangen]

Check out the webpack 1 to webpack 2 migration. https://webpack.js.org/guides/migrating/

the queries (?) and options (!) should be split out, the property you set on a rule-object is use: https://webpack.js.org/guides/migrating/#module-loaders-is-now-module-rules

Basicly, you webpack config is a webpack 1. Which storybook does not support anymore.

[code-by]

Could somebody help with properly webpack.config.js for Webpack 3?

[ndelangen]

I think such a question would be best asked on https://stackoverflow.com where there are more users with webpack knowledge.

[shilman]

Crikey!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-rc.0 containing PR #21491 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb@next upgrade --prerelease