Node.js module lookup in Electron+Angular 2 & TypeScript application

Question

I'm developing an Electron application with Angular 2.
I followed this tutorial to initially setup the environment.
My setup is a bit more complicated but in general is very similar.
tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "app/node_modules",
    "dist"
  ]
}

systemjs.config.js is just like in the tutorial as well as index.html

One of my modules (which resides somewhere inside the app folder - app/*/*/*/module) depends on node-ffi. So I've added the necessary typings to typings.json:

{
  "globalDependencies": {
    "core-js": "registry:dt/core-js",
    "jasmine": "registry:dt/jasmine",
    "node": "registry:dt/node",
    "ref": "registry:dt/ref",
    "ref-struct": "registry:dt/ref-struct",
    "ffi": "registry:dt/node-ffi"
  }
}

Now, the module tries to use ffi like this:

import { DynamicLibrary, Library, types } from 'ffi';

export class CppProxy { 
   //Some code
}

Which is eventually transpiled to:

var ffi_1 = require('ffi');
//Utilize ffi_1 exported stuff

According to this article, there is a well-defined way for node.js module lookup and according to this way it should find the node-ffi module as node-ffi resides in app/node_modules. However, it doesn't. It only looks in app folder for ffi.js and obviously fails to find it.
My first attempt to fix it was adding ffi entry to the map section of systemjs.config.js, like this:

  var map = {
    'app': '.', // 'dist',
    '@angular': 'node_modules/@angular',
    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
    'rxjs': 'node_modules/rxjs',
    'node-binary': 'node_modules/systemjs-plugin-node-binary/node-binary.js',
    'ffi': 'node_modules/ffi/lib/ffi.js'
  };

It helped to load ffi, but brought up new problems. ffi itself depends on other modules:

var ref = require('ref')
var assert = require('assert')
var debug = require('debug')('ffi:ffi')
var Struct = require('ref-struct')
var bindings = require('./bindings')

So now the application failed to find these modules. I've tried to add some of them to the map too, but again it just solved one level of dependencies.

It doesn't seem right to me, require shouldn't be looking only in app folder and I don't feel like adding all the dependencies recursively to map section of systemjs.config.js. What am I doing wrong?

Upd:
There another question dealing with a pretty similar issue, but it is asking specifically about using require('remote').
I'm asking how can I use a Node.js module resolution mechanism while still using System.js as a module loader.

SystemJS is not setup to do transitive dependency configuration. You could use jspm which will setup systemjs.config.js for you or you could wait for angular-cli to support install or you can use webpack (which avoids SystemJS entirely). — Pace
– Pace, Commented Aug 3, 2016 at 18:14
So to make it work with just System.js I have to map all the libraries recursively? I don't get it... I mean, the dependency is specified by require(), which is node.js function... Why isn't it working node.js way? — JeB
– JeB, Commented Aug 3, 2016 at 18:27
I should have been a bit more clear. SystemJS is transitive, like NodeJS, it is doing the lookup recursively (that is after it finds ffi it goes to lookup ref). However, SystemJS isn't able to use NodeJS' dependency resolution mechanism (look for node_modules, go up a directory and look for node_modules again, recurse). It can't use that mechanism because websites don't typically copy all of their node_modules into their static distribution directory (your site would be huge!) Front end configuration has always (e.g. bower, <script>) been very flat. — Pace
– Pace, Commented Aug 3, 2016 at 18:35
I suspect you're running into one of the problems of a unified front-end/back-end package management solution which is that people can unintentionally grab a package that was only ever intended for backend use and try and use it in the browser. I'm not sure node-ffi is intended for use in the browser or that it would even be possible. — Pace
– Pace, Commented Aug 3, 2016 at 18:38
I don't really know but given this comment it seems that systemjs replaces node's require when it sets up. — Pace
– Pace, Commented Aug 3, 2016 at 20:02

Community · Accepted Answer · 2017-05-23 12:18:08Z

2

As Pace mentioned in one of his comments, System.js overrides Node.js's require method and uses it's own resolution mechanism. This is why the require method won't follow the Node.js lookup mechanism. However there is a way to use the latter:

System.js stores the Node.js's require in _nodeRequire variable. So the way to load a module using Node.js mechanism is to load it by

var module = System._nodeRequire('./path/to/module/')

Here is the discussion that helped me to come up with this solution.

edited May 23, 2017 at 12:18

CommunityBot

11 silver badge

answered Aug 4, 2016 at 14:06

JeB

12.3k11 gold badges63 silver badges88 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Monsignor Over a year ago

Have as look at my solution inspired by this great answer.

Collectives™ on Stack Overflow

Node.js module lookup in Electron+Angular 2 & TypeScript application

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related