$module.transition is not a function

[labkode]

I am receiving this error when using semantic-ui-transition through browserify

Uncaught TypeError: $module.transition is not a function

My code is this:

var $ = require('jquery');
$.fn.dropdown = require("semantic-ui-dropdown");
$.fn.transition = require("semantic-ui-transition");
var Mn = require("backbone.Marionette");

module.exports = Mn.ItemView.extend({
        tagName: "div",
        attributes: {
            id: "header-app",
        },
        ui: {
            menu: ".ui .dropdown",
        },
        template: "#header-app-template",
        onShow:function() {
            this.ui.menu.dropdown();
        }
});

[cozuya]

So no one else has a denvercoder9, I resolved this (for the modal) by doing:

let $ = require('jquery'),
    Modal = require('semantic-ui-modal'),
    Dimmer = require('semantic-ui-dimmer'),
    Transition = require('semantic-ui-transition');

$.fn.transition = Transition;
$.fn.modal = Modal;
$.fn.dimmer = Dimmer;

So probably just an order thing.

[jlukic]

This would occur if CSS transition is not defined. It checks before running animation.

[aullah]

For anyone who finds this, if you're having similar issues when trying to only use the modal component in Semantic UI rather than the entire framework, the modal requires other dependencies (minified version is optional of course):

• transition.min.js and transition.min.css
• dimmer.min.js and dimmer.min.css
• modal.min.js and modal.min.css

All the best.