Exported TypeScript class is bundled as undefined about tsify HOT 3 CLOSED

How odd!

I haven't looked too hard at this but in your gulpfile, try only including
main.ts in your bundle.add call. All Browserify needs is the single entry
point into your code; it walks the dependencies automatically. Including
helper.ts as an entry might be messing with something. Though I wouldn't
expect quite that output...
On Apr 3, 2015 1:47 PM, "Mike Wilcox" [email protected] wrote:

Hi @smrq https://github.com/smrq,

First, thanks for this project!

I am not sure if this is an issue with browserify, tsify, typescript, or
if I am just doing something wrong. Basically, what I am seeing is that
when I try to import an exported class using require(), the module i am
trying to import is linked to as undefined. I am not intimately familiar
with browserify inner-workings, but if I change this undefined to a 1, I
see that the code runs fine! See below where the './components/helper' is
linked to as undefined:

bundle.js:

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i
(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){var Helper = (function () {
function Helper() {
}
Helper.prototype.sayHello = function () {
console.log('hello from the helper!');
};
return Helper;
})();module.exports = Helper;

},{}],2:[function(require,module,exports){/// var Helper = require('./components/helper');var Main = (function () {
function Main(name) {
this.name = name;
console.log(this.name);
this.helper = new Helper();
this.helper.sayHello();
}
return Main;
})();window.onload = function () {
var main = new Main('start me up');
};

},{"./components/helper":undefined}]},{},[1,2]);

main.ts:

/// import Helper = require('./components/helper');
class Main {

name;
helper;

constructor(name: string) {
this.name = name;
console.log(this.name)

this.helper = new Helper();
this.helper.sayHello();

}

}
window.onload = () => {
var main = new Main('start me up');
}

components/helper.ts:

class Helper {

constructor() {}

sayHello() {
console.log('hello from the helper!')
}

}
export = Helper;

I am using gulp as my task manager trying to use browserify, watchify,
tsify, and browser-sync as my main dev workflow.

Gulpfile:

'use strict';
var browserify = require('browserify');var watchify = require('watchify');var tsify = require('tsify');var gulp = require('gulp');var source = require('vinyl-source-stream');var buffer = require('vinyl-buffer');var jasmine = require('gulp-jasmine');var livereload = require('gulp-livereload');var browserSync = require('browser-sync');var reload = browserSync.reload;
/*** Run jasmine tests_/
gulp.task('test', function() {
return gulp.src('test/_.spec.js')
.pipe(jasmine());
});

gulp.task('browserSync', function() {
browserSync({
server: {
baseDir: './',
index: 'index.html'
},
open: true,
files: ['dist/bundle.js']
});
});
/** * Transpile TypeScript and bundle */
gulp.task('bundle-ts', function() {

var bundler = browserify();

bundler = watchify(bundler);

bundler.on('update', function() {
rebundle();
});

bundler.add([
'./src/components/helper.ts',
'./src/main.ts'
])
.plugin('tsify', {target: 'ES5', module: 'amd'});

rebundle();

function rebundle() {
return bundler.bundle()
.pipe(source('./dist/bundle.js'))
.pipe(buffer())
.pipe(gulp.dest('.'));
}

});

gulp.task('default', function() {
gulp.start(['bundle-ts', 'browserSync']);
});

—
Reply to this email directly or view it on GitHub
#35.

from tsify.

OMG! I feel like such an idiot :) Indeed it was the extra include that was causing this.

Thank you!

from tsify.

Awesome, glad to help :)

from tsify.