How to use semantic-ui in react with webpack?

Question

I would like to use CommonJS to include semantic-ui in my react jsx file. I installed semantic-ui with bower, and webpack is correctly configured to include the bower_components directory.

However, when I use require('semantic-ui/dist/semantic-ui.js') in the jsx file, the console always throw an error "Uncaught ReferenceError: jQuery is not defined", even when I put a statement var jQuery = require('jquery/dist/jquery.js') before that.

Another related thing is that in order for semantic-ui to work, semantic.css should also be included. I am also wondering how to include semantic.css in jsx file.

tony_k · Accepted Answer · 2015-11-19 16:32:13Z

12

try the provide-plugin like so:

  plugins: [
    new ProvidePlugin({
      'jQuery': 'jquery'
    })
  ],

answered Nov 19, 2015 at 16:32

tony_k

2,0712 gold badges23 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Matthew James Davis Over a year ago

the accepted answer works, but this is the correct, best practices answer

iamjpg · Accepted Answer · 2015-05-12 01:17:16Z

4

As for the CSS you're going to want to load that in your index/whatever.html file before sourcing your JS.

Try the following before you require semantic-ui:

var $ = jQuery = require('jquery/dist/jquery.js');
window.jQuery = $; // Assure it's available globally.
var s = require('semantic-ui/dist/semantic-ui.js');

Not 100% sure this will work but it's worth a try.

Things can get tricky with CommonJS modules. Also, might be worth looking into React+Browserify. Makes it super simple to import NPM modules using require.

answered May 12, 2015 at 1:17

iamjpg

7,6281 gold badge19 silver badges18 bronze badges

Collectives™ on Stack Overflow

How to use semantic-ui in react with webpack?

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related