Semantic-UI-React: Form: Uncaught TypeError: this.element.form is not a function

@jukkah @padsbanger I’ve released 0.19.0 which solves the jQuery issues. I submitted https://github.com/jukkah/short-url/pull/1 to @jukkah’s project so you can see what a working project should look like.

In short, do not include jQuery nor Semantic UI JS on the page. Also, do not include any config for these in your Webpack config. It is all handled by Stardust now.

If you do have jQuery on the page, you’ll notice Stardust will tell you to remove it:

If you turn on debugging for jQuery localStorage.debug = 'stardust:jquery' you can see when and what Stardust is loading:

Let me know if you have any other issues.

Aye. I’m thinking since we also need a specific version of SUI jQuery, we bundle it the same way as jQuery. Including the conditional check to see if it was already loaded. We can check for the SUI plugins we need on jQuery.

Exactly what I’m thinking, except window.jQuery to be safe.

@levithomason What about refactoring all import $ from 'jquery' to:

import $ from 'internal/jquery'

// internal/jquery.js
import jQuery from 'jquery'

export default window.$ || jQuery

I believe that there are two different versions of jQuery being loaded, one from the index.html file, and one from the Stardust dependency (and bundled with webpack). I introspected this by looking at jQuery on the window, which looks to be correct:

However, then I took a look at the jQuery module being used within Stardust:

  refresh() {
    this.element = $(this.refs.element)
    window.stardust$ = $

I confirmed this by looking at the bundle output and noticed that jQuery is indeed being bundled, so it exists twice, and only one of them is being extended, obviously. A quick and dirty solution is to add this to your webpack configuration:

  externals: {
    jquery: 'jQuery',
  }

This will tell webpack to use the jQuery that you’ve loaded from the browser. That should get you moving for now, but we really need to tweak the install guide to account for this.