Modaal with Browserify

[Dimitri R.]

Hey,

Thanks for your work, Modaal is very cool 👍
But I got some problems when I try to use it in my workflow.

I use Gulp with Browserify, Babel and Eslint, all in their last versions.
When I compile my JS file, Gulp stop running and I got this error :

`events.js:163
throw er; // Unhandled 'error' event
^

Error: Cannot find module 'modaal' from '/home/cua/public_html/lagny/wp-content/themes/bones-cua/library/src/javascripts'`

Any idea ?

[Dan Moore]

hey @dimic00 - can't say i've used Modaal in that sort of a setup. Few questions for you:

1. Just to be certain, you've removed Modaal from your environment to double check it is absolutely the one that triggers the error?
2. Have you tried any other copies of Modaal js to see if it makes any difference, such as minified vs unminified?
3. Is there any more info you can provide on your setup? Maybe a copy of your gulp/packages files or something we can take a look at?
4. Is there any more info on the error message you can supply? Does it tell you anything else such as where exactly in modaal it might be catching the error from?

Lastly, I can't guarantee we will find or provide a solution for you. It's obviously very difficult to test our plugin against every possible environment setup and configuration. That said the more info you can supply the better, will help us narrow down on what the problem might be and offer ideas and solutions.

[Dan Barrett]

If you're installing Modaal via npm/yarn I'd recommend doing your require like this: require('modaal/dist/js/modaal') (though recently we did add the aforementioned path to the main field of package.json so it should be done automatically).

Otherwise as @danhumaan said, if you can post the relevant parts of your gulpfile and package.json that'd be super. Been a little while since I last used Browserify but we'll see how we go 🙂

[Dimitri R.]

Thanks a lot Dan and Dan :)

With your require, it's work now, the JS is compiled.
But after, I got this error "Uncaught ReferenceError: jQuery is not defined".

In my 'app.js' file, I used jQuery like this :
const $ = require('jquery');
const jQuery = $;

To solve the problem, I replace these two lines by :
global.jQuery = require("jquery");
const $ = jQuery;

and now it's work perfectly!

[Lewis Carey]

@danb-humaan

though recently we did add the aforementioned path to the main field of package.json so it should be done automatically

npm is currently on 0.3.1 without this path update - are you able to distribute a new tag/version please?