All geek questions in one place

How to use semantic-ui in reaction with webpack?

I would like to use CommonJS to include semantic-ui in my jsx file to respond. 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 throws the error "Uncaught ReferenceError: jQuery not defined", even if I put the statement var jQuery = require('jquery/dist/jquery.js') before it var jQuery = require('jquery/dist/jquery.js') .

Another related thing is that in order for semantic-ui to work, you must also enable semantic.css. I am also wondering how to include semantic.css in a jsx file.

+6
source share
2 answers

As for CSS, you'll want to load it into your index / whatever.html file before looking for your JS.

Try the following before you need semantic-ui:

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

Not 100% sure that this will work, but worth a try.

Everything can get complicated with CommonJS modules. Also, it might be worth a look at React + Browserify. Makes it very easy to import NPM modules using require .

+3
source

try providing a-plugin like this:

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

Source: https://habr.com/ru/post/987006/

More articles:


All Articles