Migrating from Semantic UI

[brian-codes]

Hi, hoping someone is able to help me

I have a codebase with individual semantic modules installed, some code that looks like

import $ from 'jquery'
$.fn.dropdown = require('semantic-ui-dropdown')
$('#someelement').dropdown()

What is the fomantic equivalent, tried various ways but dropdown() is always undefined.

Thanks!

[lubber-de]

Fomantic does not offer separate component npm packages per module. However, they are still available inside the core fomantic package. So either include semantic.js or components/dropdown.js

[brian-codes]

Thanks @lubber-de
I still get the same outcome where dropdown() is undefined

import 'fomantic-ui/dist/components/dropdown'
or
import 'fomantic-ui/dist/semantic'

what would I assign to $.fn.dropdown = ?

[lubber-de]

Well, fomantic is no es6 module . It is basically expected that jQuery and fomantic are already existing/imported via script tags in your html before running your custom js which consumes that.

Are you using webpack? Are you sure both libs are included before your code is running? Several people solved it by doing it as i suggested. I would have to search our discord server where people were discussing it earlier.

[brian-codes]

Webpack yes and both libs are included. Tried via script tags also but still the same. The code using the dropdown() is all in modules though?

[lubber-de]

Beside my below boilerplate how to include the scripts without webpack, maybe webpacks provide plugin helps for jquery plugins
https://webpack.js.org/plugins/provide-plugin/#usage-jquery

[brian-codes]

For others, resolved it by importing the definition rather than distribution. Installed via npm not using the script tags.

require('fomantic-ui/src/definitions/modules/dropdown')
replaces
$.fn.dropdown = require('semantic-ui-dropdown')

and code works as it was

[lubber-de]

Take this simple boilerplate, which works, and compare to what webpack is doing differently to you.

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.2/dist/semantic.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.3/dist/jquery.js"></script>
<script src="https://cdn.jsdelivr.net/npm/fomantic-ui@2.9.2/dist/semantic.min.js"></script>

<select class="ui dropdown">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
</select>
<script>
 $('.ui.dropdown').dropdown(); 
</script>

[y0hami]

@lubber-de forwarded. Also I fixed why you didn't get it, should get the mail going forward.

[lubber-de]

You can also use our discord server for quick and urgent security related private messages

[lubber-de]

@brian-codes @hammy2899 Thanks, got the E-Mail now and will investigate and fix it asap

[lubber-de]

Fixed by #2705

[brian-codes]

Nice one!