Storybook: Bootstrap not imported

Created on 8 Apr 2016 · 14Comments · Source: storybookjs/storybook

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``

question / support

Source

alex88

Most helpful comment

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';

michael-martin on 30 Jun 2016

👍2

All 14 comments

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

hirviid on 3 May 2016

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

alex88 on 4 May 2016

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

ericmcgregor on 9 Jun 2016

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';

michael-martin on 30 Jun 2016

👍2

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 on 9 Jul 2016

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.

AlexandreRoba on 9 Jul 2016

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.

gkaran on 13 Jul 2016

👍1

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

AlexandreRoba on 14 Jul 2016

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?

code-by on 29 Jul 2017

You're using loaders, change this to rules

ndelangen on 30 Jul 2017

@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'
      }
    ]

code-by on 30 Jul 2017

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.

ndelangen on 30 Jul 2017

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

code-by on 2 Aug 2017

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

ndelangen on 2 Aug 2017

Was this page helpful?

0 / 5 - 0 ratings