Storybook: How to import jQuery into global namespace (for Semantic UI)

Created on 22 Jul 2016 · 3Comments · Source: storybookjs/storybook

Hi. I'm trying to use Semantic UI and I'm fading all css from it. The problem is that Semantic UI expects jQuery in the global namespace. I tried following to import it, but I still get 'jQuery' is not defined.

//file: config.js

import jquery from 'jquery';

global.$ = jquery;
global.jQuery = jquery;

import './semanticui'

Any idea how can this be achieved ?

Source

tomitrescak

Most helpful comment

Thanks for this @tomitrescak

I decided to npm install semantic-ui-css --save-dev package and import the files directly from it like so

// config.js
import jquery from 'jquery';
global.$ = jquery;
global.jQuery =  jquery;
require('semantic-ui-css/semantic.css');
require('semantic-ui-css/semantic.js');

purplecones on 25 Jul 2016

👍3

All 3 comments

Ok, this seemed to do a trick, when I put this code into my main .stories/index file.

import jquery from 'jquery';
global.$ = jquery;
global.jQuery = jquery;
require('./semanticui');

tomitrescak on 22 Jul 2016

Thanks for this @tomitrescak

I decided to npm install semantic-ui-css --save-dev package and import the files directly from it like so

// config.js
import jquery from 'jquery';
global.$ = jquery;
global.jQuery =  jquery;
require('semantic-ui-css/semantic.css');
require('semantic-ui-css/semantic.js');

purplecones on 25 Jul 2016

👍3

I've had issues integrating jQueryUI, so here's how I did it. It uses the jquery-ui module.

// config.js
import jquery from "jquery";
import jQueryAutocomplete from "jquery-ui/ui/widgets/autocomplete";
import jQueryDatepicker from "jquery-ui/ui/widgets/datepicker";

jquery.autocomplete = jQueryAutocomplete;
jquery.datepicker = jQueryDatepicker;
global.$ = jquery;
global.jQuery =  jquery;