How can I include a node module for require()?

[binarykitchen]

Somewhere along the lines of my OX plugin code I want to have require('zxcvbn') which is supposed to load a node modules inside /node_modules/ of the root folder next to the gruntfile.

But it doesn't do this. It crashes with

Running "jshint:all" (jshint) task

   apps/plugins/changePassword.js
    176 |                var result = zxcvbn(pw);
                                      ^ 'zxcvbn' is not defined.

>> 1 error in 1 file
Warning: Task "jshint:all" failed. Use --force to continue.

Any ideas what's missing here?

[dotcore]

The jshint warning actually says it all. zxcvbn is not defined in your apps/plugins/changePassword.js.

See here: http://jshint.com/docs/options/#undef (This option prohibits the use of explicitly undeclared variables.)

[binarykitchen]

@dotcore no, that's not the issue

i installed it via npm i zxcvbn and following code does not work:

define('com.test/plugins/changePassword', [
        'io.ox/core/extensions',
        'io.ox/backbone/basicModel',
        'io.ox/core/http',
        'settings!io.ox/core',
        'io.ox/core/capabilities',
        'io.ox/core/notifications',
        'gettext!com.smxemail/lang/changePassword/changePassword',
        'zxcvbn',
    ], function (ext, BasicModel, http, settings, capabilities, notifications, gt, zxcvbn) {

        // here crash!
        // boot.js:21542 Unable to resolve injected dependencies for module "io.ox/settings/main". Dependencies: ["io.ox/calendar/settings/timezones/pane", "io.ox/core/settings/register", "io.ox/core/sub/settings/register", "io.ox/mail/settings/signatures/register", "com.test/plugins/changePassword"] Could not read 'zxcvbn.js'

[johnyb]

// boot.js:21542 Unable to resolve injected dependencies for module "io.ox/settings/main". Dependencies: ["io.ox/calendar/settings/timezones/pane", "io.ox/core/settings/register", "io.ox/core/sub/settings/register", "io.ox/mail/settings/signatures/register", "com.test/plugins/changePassword"] Could not read 'zxcvbn.js'

This is something completely different than the linting problem in the first post. You can not use npm modules out of the box, because this is “browser land” those modules live in, not “nodejs land”. If you want to use such modules you need to basically do two things:

1. make sure the code you want to use runs in the browser
2. integrate it into the build system

Point 2 might be a little tricky, but you might find more information in this (rather old) post, which is still valid in most points.

[binarykitchen]

@johnyb okay, thanks. yeah, i know very well how this works. been working a lot with browserify and webpack but can't use these here.

the link you provided is useful but outdated. can you tell me, how can i amend a custom grunt task to the 'copy_build' task easily? there you mentioned it will be improved in 0.3.0 but i do not see how.

[johnyb]

The API works exactly as outlined in the post, it just had not been implemented during writing of the post. This is why writing this post was quite important, because I recognized it might be useful to have this available easily. Just use something like:

   grunt.config.merge({
        copy: {
            build_my_files: { /* config goes here */ }
        }
    });

Written from the top of my head, but illustrates, how it's supposed to look like. Important is the prefix build for the subtask of copy, this is what the config filters out during build time.

[binarykitchen]

Still not working @johnyb

I added a custom grunt task file called zxcvbn.js and its contents are

'use strict';

module.exports = function (grunt) {
   grunt.config.merge({
        copy_build: {
            build_custom: {
                files: [{
                    expand: true,
                    src:    ['zxcvbn.js'],
                    cwd:    'node_modules/zxcvbn/dist/zxcvbn.js',
                    dest:   'build/apps/com.smxemail/plugins/'
                }]
            }
        }
    });
};

still, that zxcvbn.js does not get copied upon grunt copy_build. What am I missing?

[johnyb]

The task is named copy_build but the configuration is still in copy. We need multiple copy operations and in order to separate those, there need to be some subtasks of copy filtered. This is done by prefixes, build in this case. So it must look like this:

'use strict';

module.exports = function (grunt) {
   grunt.config.merge({
        copy: {
            build_custom: {
                files: [{
                    expand: true,
                    src:    ['zxcvbn.js'],
                    cwd:    'node_modules/zxcvbn/dist/,
                    dest:   'build/apps/com.smxemail/plugins/'
                }]
            }
        }
    });
};

[binarykitchen]

thanks. but still, zxcvbn.js does not get copied into the build folder when doing the default grunt command

[johnyb]

I just realized another mistake, the "cwd" attribute needs to point to a directory (it's late over here ;))

[binarykitchen]

ah, that worked. many thanks. good night :)