Skip to content

Which is the proper way to work with npm modules and browserify? #1878

@trigoesrodrigo

Description

@trigoesrodrigo

Hi. I'm trying to use some of the SUI modules inside an application in which I'm already using Browserify and npm modules.

I found some problems while trying to get the modules to work.
So far I've tried four modules: semantic-ui-checkbox, semantic-ui-dropdown, semantic-ui-tab and semantic-ui-modal.

With semantic-ui-checkbox everything worked properly with the following code:

var $ = require('jquery');
var Checkbox = require('semantic-ui-checkbox');
$.fn.checkbox = Checkbox;

....

//In my Marionette.View onShow method
this.$el.find('.ui.checkbox').checkbox();

However, with the other three modules I've encountered problems:

  • semantic-ui-dropdown: just requiring it produced an error with browserify that goes away if I remove the underscore in this line, probably a bug. After fixing that, another error occurs because internally it is using the transition module. I've tried including the module before (without the need of manually doing $.fn.transition = require('semantic-ui-transition') because this time the module does it automatically -I think either all modules should do that or none, otherwise it could be misleading-). After trying that, the error is different and Uncaught ReferenceError: _module is not defined pops up in this line after I click the menu.
  • semantic-ui-tab: similar problems as semantic-ui-dropdown. In this case Uncaught TypeError: Cannot read property 'exports' of undefined pops up in line when I invoke `.tab() on the DOM elements.
  • semantic-ui-modal: apparently this module depends on dimmer and dimmer on transition, so I've tried requiring them before (in the same fashion as before $.fn.dimmer = require('semantic-ui-dimmer'). After doing that, Uncaught ReferenceError: _module is not defined pops up in line when I invoke the modal. It looks as the same error as with the dropdown module.

Am I doing something wrong? Are there any examples of using that modules in a browserify environment?

Thanks in advance.

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions