Browserify issue

[remojansen]

Need to investigate issue reported in the support chat:

I have a problem with inversify (1.3.0), when doing this:
declare function require(moduleName: string): any;
var kernel = require('inversify');
Or this:
import { Kernel } from "inversify";
I get:
Error: Cannot find module './kernel' from '//node_modules/inversify/dist'
Error: Cannot find module './type_binding' from '//node_modules/inversify/dist'
Error: Cannot find module './type_binding_scope' from '//node_modules/inversify/dist'
Error: Cannot find module './inject_annotation' from '//node_modules/inversify/dist'
Error: Cannot find module './type_binding_scope' from '//node_modules/inversify/dist'
Error: Cannot find module './lookup' from '//goedit/goedit_atlassian_adapter/node_modules/inversify/dist'
Error: Cannot find module './type_binding_scope' from '//node_modules/inversify/dist'
I am using browserify together with tsify. My build worked so far, i also included your typings. This is what i understand so far: when using the upper statement, it means, that this would be compiled to a normal require statement. Hence i assume, that it's browserify cannot resolve those modules from your compiled dist file. So i am not sure if i did something wrong. I would be glad to get help.
Please tell me which further specs from my build etc. you need, i think it's just too much to post everything. Maybe you have seen something like this already? I also got the same style of errors when using the version 2-alpha6, just for different dependencies.

It seems to be a browserify issue, because your module is build standalone, browserify has probs to handle it correctly. browserify/browserify#1151
You could try to use this: https://www.npmjs.com/package/browserify-derequire

[KarolBuchta]

This issue also exists for 2.x.

[hourliert]

If browserify works the same way than webpack. #140 should solve this.

A quick fix could be to declare inversify as external in the browserify config file.

[KarolBuchta]

Hi, i am the one who asked in chat.

Thank you i see the point. I will try that out when it's released.

I've also just tried out external, as the browserify docs state:

Config in package.json

  "browserify": {
    "transform" : ["browserify-shim" ],
    "external": ["inversify"]
  },

Programmatic usage:

External requires may be specified in opts.require, accepting the same formats that the files argument does.

I have also tried the noParse option.

All of this did not work. I am not sure whether i did something wrong here, i'm new to browserify/ts etc. I could imagine that this doesn't work correctly because of tsify. While establishing the build file i had several issues with it going into a similar direction (ignored options or transforms). I would have to investigate further on a detailed reason.

But in the meantime:

This article (browserify/browserify#1151) states 3 possible solutions for the problem "Requiring a third party standalone browserify module into another browserify build.":

I've seen confusion about how to consume a bundle in a subsequent bundling operation a number of times here and on stackoverflow1. Generally it can be cured by:

Setting noParse for bundle A in the bundle B operation; or
Running the standalone bundle through derequire; or
Minifying the bundle

I found a solution for me, in the gulpfile in my init task:

(Sry, this is still coffeescript, i encountered this issue while migrating a project to ts)

derequire = require 'gulp-derequire'

tasks.push(
    gulp.src(['node_modules/inversify/dist/inversify.js'])
    .pipe(derequire())
    .pipe(gulp.dest('src/ts/libs'))
)

And in package.json i've added:

"browser": {
  "inversify": "./src/ts/libs/inversify.js",
},

My original suggestion was that you use derequire too, because this will be the most unobstrusive way for other developers to use your library. Any further problems will be avoided, people can simply do require('inversify') without any further settings or workarounds. But as you want to deploy a lib version too, this is probably unnecessary.

[remojansen]

Hi @KarolBuchta I'm just going to wait until the next alpha release to see if fixes this. It should be at some time this week. Will get back as soon as I do a new release.

[remojansen]

@KarolBuchta I have assign it to you. Thanks a lot for helping me with this 😄

[KarolBuchta]

Hi,

I reinstalled the inversify node module, removed my browserify shim (which made the thing break before), and tested again with alpha.8. I have tested the new configuration with the exact same conditions in my build.

It works with the new lib folder, together with the setting for main: "lib/inversify.js" in package.json. @hourliert You were right, it works the same way in browserify as in webpack, i checked it in the docs.

I also checked whether switching the module resolution in browserify to classic, which had no influence as well.

I think this issue can be closed.

[remojansen]

@KarolBuchta thanks a lot for spending some time checking this out 👍