How can I get modules to work?

[Panoplos]

I do not want to use react-semantic-ui because it is a pain getting modules like dropdown to render correctly. I have all the styles and actionless components working with only this build through some webpack magic, but I cannot get the js files to register.

Right now I have an app with a client.js entry that imports the following:

semantic.js

//Import jQuery and define for Semantic-UI-Less Modules
import jQuery from 'jquery'
window.jQuery = jQuery

// Import the styles.
import 'web/styles/site.less'

// Glob the module js requirements.
const importAll = r => { r.keys().forEach(r) }
importAll(require.context('semantic-ui-less/definitions/', true, /\.js$/))

The app.js build is inflated by a couple megs, and I confirmed the code in there, but I cannot perform any js actions on the modules. For instance, $.fn.* seems to be set in the semantic js code, but $.fn is undefined when I attempt to access it via console.

Any pointers on getting this working will be greatly appreciated.

Note that jQuery and $ are globally available when tested from console.

[Panoplos]

Looks like I had to add

		new webpack.ProvidePlugin({
			$: 'jquery',
			jQuery: 'jquery',
			jquery: 'jquery',
			"window.jQuery": 'jquery'
		}),

to my webpack config to get this working... Hope this helps anyone else.

[JakobJingleheimer]

We didn't have any trouble getting SUIR to work—it worked right out of the box. It was SUI-Less that was a royal pain. If you're using React, mucking around with jQuery is a bad idea.