Support External Require

[giggio]

As defined in:
https://github.com/substack/node-browserify#external-requires

Using .require( as defined in https://github.com/substack/node-browserify#brequirefile-opts throws, it seems that the file is not being compiled before passed to browserify.

[johnnyreilly]

I think I've just tripped up on the same issue. I've got a project that uses Babel / Browserify at present. I'm trying to migrate a few pieces over to TypeScript in a piecemeal fashion. tsify seems to be doing just fine apart from when it comes to 3rd party typings. Talk is cheap, show me the code.

Here's an excerpt from the browerify + tsify gulp build step:

  var src = './src/main.js';
  var dependencies = ['react', 'react-router', 'flux','events','babel/polyfill'];

  var appBundler = browserify({
    entries: [src],
    transform: [babelify.configure({ sourceMaps: false, stage: 3 })],
    debug: options.isDevelopment,
    cache: {}, packageCache: {}, fullPaths: options.isDevelopment
  })
  .external(dependencies)
  .plugin('tsify');

This works great apart from when it comes to require-ing 3rd party typings. Consider the start of fileWhichMakesTsifySad.ts:

import * as ProtoBuf from 'protobufjs';

The above code requires the protobufjs typing. When using atom-typescript for text editing this is resolved quite happily using the typing specified in typings/protobufjs/protobufjs.d.ts. However, when building with tsify the following error results:

Error TS2307: Cannot find external module 'protobufjs'.

Is this an error in my usage of tsify? Have I failed to point it to the correct place to find the typings? I have a tsconfig.json which should do the job (I thought):

{
    "compileOnSave": false,
    "filesGlob": [
        "**/*.ts",
        "!node_modules/**/*.*"
    ],
    "version": "1.5.0-beta",
    "compilerOptions": {
        "target": "es5",
        "noImplicitAny": false,
        "removeComments": false,
        "preserveConstEnums": true,
        "sourceMap": true
    },
    "files": [
        "src/utils/fileWhichMakesTSIFYSad.ts",
        "typings/node/node.d.ts",
        "typings/protobufjs/protobufjs.d.ts"
    ]
}

In case it helps, I'm using tsd for pulling in typings from DefinitelyTyped and my tsd.json looks like this:

{
  "version": "v4",
  "repo": "borisyankov/DefinitelyTyped",
  "ref": "master",
  "path": "typings",
  "bundle": "typings/tsd.d.ts",
  "installed": {
    "protobufjs/protobufjs.d.ts": {
      "commit": "76e1dedf0bada455c0b75abeec3206d3aa5bd892"
    },
    "node/node.d.ts": {
      "commit": "76e1dedf0bada455c0b75abeec3206d3aa5bd892"
    }
  }
}

[johnnyreilly]

I think (I'm not sure) that this problem might be related to PR #32. The declarationFiles option that PR implements looks like it might allow for support of external typing files. However, it doesn't look like that PR is going to be merged. 😞

[smrq]

@giggio Thanks for the report, I'll take a look.

@johnnyreilly Let me see if I get the dependency graph of your case:

main.js
  |--- fileWhichMakesTsifySad.ts
         |--- protobufjs

If that's the case, then what you're missing here is to add typings/tsd.d.ts to src in your gulpfile. Note that tsify cannot respect the files key in tsconfig.json, because it only compiles what Browserify gives to it. So without that, the TypeScript compiler doesn't have any type definitions for protobufjs.

[johnnyreilly]

So var src = './src/main.js'; becomes var src = ['./src/main.js', './typings/tsd.d.ts'];? Thanks - I'll give it a try and report back!

[smrq]

@giggio Reproduced... I think I'm going to have to delve into the guts of module-deps on this one. Might be tricky! I'll see how it goes.

[smrq]

This appears to be a bug in module-deps which makes it think that the external file is a node built-in (like http, fs, etc.), which makes it bypass transforms. Still looking into why that is happening.

[smrq]

Okay, this is definitely a Browserify bug. Exposing a file causes transforms not to run against it, unless the exposed name is different from the filename. This is described in browserify/browserify#1077, and further discussed in browserify/browserify#1131. A workaround would be to do something like:

b.require('./path/to/file.ts', { expose: 'some-other-name' })

If that won't work for you, then you can open an issue on Browserify and/or module-deps.

[johnnyreilly]

Worked a dream once I updated to the latest version of tsify and the associated typings. Thanks!

[twastvedt]

@johnnyreilly As far as I can tell I have an issue similar to the one you described at the top of the thread. I'm not so sure about what I'm doing though, and in particular am not sure what to do with smrq's workaround. Where did you put that in your project? I want mine to work like a dream too!

[bcherny]

If anyone is using browserify-shim and has this problem in the future, adding global: true fixed it for me:

var browserify = require('browserify')

var files = ['./src/index.tsx', './src/other/index.ts']

browserify({
  entries: files,
  extension: ['js', 'ts', 'tsx'],
  external: ['angular', 'jquery', 'lodash', 'moment', 'react', 'react-dom', 'rx'],
  noParse: []
})
.plugin('tsify')
.transform('browserify-shim', {
  global: true
})
.bundle()
.on('error', error => console.error(error.toString()))
.on('log', msg => console.info(msg))
.pipe(process.stdout)

[cartant]

@frankkoenigstein What makes you think it's related to this particular issue? Yours is the only comment that mentions Karma. Is it the error message?

ParseError: 'import' and 'export' may appear only with 'sourceType: module'

You'll see that whenever Browserify encounters ES6 content.

Could you please open a separate issue and include complete version information for the packages (Angular, Browserify, Tsify, etc.) that you are using?