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

Answer 1

try the provide-plugin like so:

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

Answer 2

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.