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.

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.