ChristophAust's avatar

Adding a node module to my JS

Hello guys, I am having an issue with loading a npm module to my js.

So what I did was:

npm install emojionearea@^3.0.0

then I added this line to bootstrap.js:

window.emojioneArea = require('emojionearea');

From my understanding this should load the module and make it available in the js file which is linked in my blade template.

Trying to use the module ends up with:

Uncaught TypeError: $(...).emojioneArea is not a function

also I cannot seem to find a trace of the string "emoji" in my js file. So how do I pull this in correctly?

0 likes
9 replies
martinbean's avatar

@christophaust It looks like you’re assigning the emojioneArea to the window object, but then trying to use it as a jQuery object.

tykus's avatar

Should work like follows:

import $ from 'jquery';
import 'emojionearea/dist/emojionearea';
window.jQuery = window.$ = $;

$(document).ready(() => {
    $("#your-textarea").emojioneArea();
});
ChristophAust's avatar

No it does not, I am still getting

Uncaught TypeError: $(...).emojioneArea is not a function

Do you mind to explain when to use "import" and when to use "include"?

tykus's avatar

Do you have a script tag for jQuery in the template; or do you use Webpack also?

ChristophAust's avatar

I am using webpack:

mix.scripts([
        'resources/assets/vendor/jquery/jquery-3.1.1.min.js',
        'resources/assets/vendor/bootstrap/js/bootstrap.js',
        [...]
    ], 'public/js/app.js', './');

And I include this app.js to the template.

tykus's avatar

Does your resources/js/app.js build at all; it seems you are only concatenating vendor libraries into the compiled app.js?

ChristophAust's avatar

What do you mean by "build"? Yes it is concatenating vendor JS files. Sorry if my questions are stupid, this is not my strong part tbh

tykus's avatar

Do you have a mix.js(...) step that compiles/builds the Javascript you write in resources/js/app.js into the public/js/app.js file (or similar)?

ChristophAust's avatar

No, I do not. My file looks like this:

    mix.sass('resources/assets/sass/app.scss', 'public/css');
    mix.copy('resources/assets/vendor/bootstrap/fonts', 'public/fonts');
    mix.copy('resources/assets/vendor/font-awesome/fonts', 'public/fonts')
    mix.styles([
        'resources/assets/vendor/*/*.css',
        'resources/assets/vendor/*/css/*.css',
    ], 'public/css/vendor.css', './');
    mix.scripts([
        'resources/assets/vendor/jquery/jquery-3.1.1.min.js',
        'resources/assets/vendor/bootstrap/js/bootstrap.js',
        'resources/assets/vendor/metisMenu/jquery.metisMenu.js',
        'resources/assets/vendor/slimscroll/jquery.slimscroll.min.js',
        'resources/assets/vendor/pace/pace.min.js',
        'resources/assets/vendor/chosen/chosen.jquery.js',
        'resources/assets/vendor/jquery-emoji-picker/js/jquery.emojipicker.js',
        'resources/assets/vendor/jquery-emoji-picker/js/jquery.emojis.js',
        'resources/assets/js/plugins/chartJs/Chart.min.js',
        'resources/assets/js/plugins/datapicker/bootstrap-datepicker.js',
        'resources/assets/js/plugins/clockpicker/clockpicker.js',
        'resources/assets/js/app.js'
    ], 'public/js/app.js', './');

So the step "mix.js" basically compiles the commands I have in resource/js/bootstrap.js?


window._ = require('lodash');

/**
 * We'll load jQuery and the Bootstrap jQuery plugin which provides support
 * for JavaScript based Bootstrap features such as modals and tabs. This
 * code may be modified to fit the specific needs of your application.
 */

require('bootstrap-sass');
import $ from 'jquery';
import emojione from 'emojionearea/dist/emojionearea';
window.jQuery = window.$ = $;

Please or to participate in this conversation.