bundling the package for production issue

[markhatchell]

I noticed that when I bundled the package the toast.js file was empty that was included in the npm module. So I created a placeholder file and replaced it, now it bundles properly and exports the Toast class.

It would appear that something is wrong with the build process of the module because when I cloned the repo and built it for myself, the toast.js file was still empty.

Here is what I used to replace the contents of toast.js:

"use strict";
var bodyOutputType_1 = require('./bodyOutputType');
var toaster_config_1 = require('./toaster-config');
var Toast = (function () {
    function Toast() {
    }
    return Toast;
}());
exports.Toast = Toast;
//# sourceMappingURL=toast.js.map

[Stabzs]

Correct, it would be empty.

toast.ts is simply an interface declaration for strong typing when building the source. There is no concrete object and there is no Toast class, which is why the toast.d.ts file shows the necessary typing information and the toast.js declaration is empty. However, by providing the file and the source map, the underlying typed source is still available for debugging if needed.

Is this currently causing a problem in your build process?

[markhatchell]

That makes sense for typescript typing.

It would build without issue however when the bundle was loaded it threw an error stating that Toast was undefined. When I supplied the empty class to be exported it ran fine with the production bundle.

[Stabzs]

Can you please provide an example of your build process and how you are consuming the end result? The file is fully accessible. This seems to be bundler-centric.

[ruiwanguk]

We are experiencing the same issue with our build as well. The build process is running fine but the final bundle.js throws an error "Uncaught TypeError: Cannot read property 'Toast' of undefined".

We are using gulp to build and bundle our project, which reads off systemjs.config.js.

Has something changed recently? We didn't have this kind of problem before.

[Stabzs]

@ruiwanguk not that I am aware of. The angular2-toaster.js root file has always exported the Toast interface from the ./lib/toast file. Can you please provide a stack trace of where it is throwing the error? That might be useful.

[ruiwanguk]

@Stabzs , when we load our webapp, there is no stack track as such. Only the error message "Uncaught TypeError: Cannot read property 'Toast' of undefined, angular2-toaster.js:2"

[ruiwanguk]

@Stabzs, btw, we are using version 1.0.0

[Stabzs]

@ruiwanguk does the issue persist in 1.0.1? In addition, are you able to provide a small sample gulp config of how you are bundling just the library source?

[ruiwanguk]

@Stabzs Does this help?
`
var SystemBuilder = require('systemjs-builder');
var argv = require('yargs').argv;
var builder = new SystemBuilder();

builder.loadConfig('systemjs.config.js')
.then(function () {
var outputFile = argv.prod ? 'dist/bundle.min.js' : 'dist/bundle.js';
return builder.buildStatic('src', outputFile, {
minify: argv.prod,
mangle: argv.prod,
sourceMaps: !argv.prod,
sourceMapContents: !argv.prod,
rollup: argv.prod
});
})
.then(function () {
console.log('Bundle successfully built');
});
`

[Stabzs]

@ruiwanguk What does your systemjs.config look like?

[Stabzs]

@ruiwanguk does something like jspm/jspm-cli#1127 address your issue? If not, it seems like it may be prudent to remove the Toast export from angular2-toaster.js altogether so that it will be available via interface if being source-mapped, but not in the publicly exported library.

[Stabzs]

@markhatchell are you using SystemJS as well for your module-loading? And how are you bundling it?