Skip to content
This repository has been archived by the owner on Oct 9, 2020. It is now read-only.

Issue bundling RXJS 5 #826

Open
jamesbrobb opened this issue Jul 28, 2017 · 12 comments
Open

Issue bundling RXJS 5 #826

jamesbrobb opened this issue Jul 28, 2017 · 12 comments

Comments

@jamesbrobb
Copy link

jamesbrobb commented Jul 28, 2017 •
edited
Loading

Versions

systemjs: 0.19.47
systemjs-builder: 0.15.34
typescript: 2.3.0
rxjs: 5.4.2

Issue

I have this combination working in my dev environment - transpiling, loading and passing tests in Karma and loading all files individually in the browser - but am having problems bundling RXJS for my production build.

tsconfig.json

{
    "compilerOptions": {
        "target": "es5",
        "module": "System",
        "sourceMap": false,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "removeComments": false,
        "noImplicitAny": false,
        "lib": [
            "dom",
            "es6"
        ],
        "typeRoots": [
            "./node_modules/@types"
        ],
        "baseUrl": ".",
        "paths": {
            "rxjs/*": ["node_modules/rxjs/*"],
            "redux": ["node_modules/redux/index.d.ts"],
            "redux-observable": ["node_modules/redux-observable/index.d.ts"],
            "ng-redux": ["node_modules/ng-redux/index.d.ts"]
        }
    },
    "include": [
        "./src/**/*.ts"
    ]
}

Gulp task code:

var builder = new Builder('./src', 'src/path/to/system.config.build.js');

    builder.bundle('main', outputFilePath, {
            format: 'register',
            minify: true,
            sourceMaps: false
        })
        .then(function(arg) {
            cb();
        })
        .catch(function(ex) {
            console.log(ex);
            new Error(ex);
        });

SystemJs config:

{

    warnings: true,

    transpiler: 'typescript',

    paths: {
        'main': 'path/to/app.ts',

        'angular': './node_modules/angular/angular.js',
        'angular-aria': './node_modules/angular-aria/angular-aria.js',
        'angular-animate': './node_modules/angular-animate/angular-animate.js',
        'angular-cookies': './node_modules/angular-cookies/angular-cookies.js',
        'angular-sanitize': './node_modules/angular-sanitize/angular-sanitize.js',
        'angular-material': './node_modules/angular-material/angular-material.js',
        'angular-touch': './node_modules/angular-touch/angular-touch.js',
        'angular-cache': './node_modules/angular-cache/dist/angular-cache.js',
        'angular-ui-router': './node_modules/angular-ui-router/release/angular-ui-router.js',
        'angular-translate': './node_modules/angular-translate/dist/angular-translate.js',
        'angular-translate-loader-url': './node_modules/angular-translate-loader-url/angular-translate-loader-url.js',

        'rxjs/*': './node_modules/rxjs/*.js',

        'redux': './node_modules/redux/dist/redux.js',
        'redux-observable': './node_modules/redux-observable/dist/redux-observable.js',
        'redux-logger': './node_modules/redux-logger/dist/redux-logger.js',
        'ng-redux':'./node_modules/ng-redux/dist/ng-redux.js'
    },

    map: {
        'typescript': './node_modules/typescript/lib/typescript.js',
    },

    meta: {
        'angular': {
            format: 'global',
            exports: 'angular'
        },
        'angular-aria': {
            format: 'global',
            deps: ['angular']
        },
        'angular-animate': {
            format: 'global',
            deps: ['angular']
        },
        'angular-sanitize': {
            format: 'global',
            deps: ['angular']
        },
        'angular-material': {
            format: 'global',
            deps: ['angular']
        },
        'angular-cookies': {
            format: 'global',
            deps: ['angular']
        },
        'angular-touch': {
            format: 'global',
            deps: ['angular']
        },
        'angular-cache': {
            format: 'global',
            deps: ['angular']
        },
        'angular-ui-router': {
            format: 'global',
            deps: ['angular']
        },
        'angular-translate': {
            format: 'global',
            deps: ['angular']
        },
        'angular-translate-loader-url': {
            format: 'global',
            deps: ['angular-translate']
        },
        'redux-observable': {
            deps: ['redux']
        },
        'redux-logger': {
            deps: ['redux']
        },
        'ng-redux': {
            deps: ['redux', 'angular']
        }
    }
}

With this configuration i get the following error:

 { Error tracing rxjs/add/operator/map at file:///Users/blah/blah/project/node_modules/rxjs/add/operator/map.js
    Loading blah
    Loading blah
    Loading blah
    Loading main
    Error: Unable to calculate canonical name to bundle file:///Users/blah/blah/project/node_modules/rxjs/Observable. Ensure that this module sits within the baseURL or a wildcard path config.
at getCanonicalNamePlain (/Users/blah/blah/project/node_modules/systemjs-builder/lib/utils.js:227:13)
at getCanonicalName (/Users/blah/blah/project/node_modules/systemjs-builder/lib/utils.js:150:19)
at /Users/blah/blah/project/node_modules/systemjs-builder/lib/trace.js:565:36

The offending RXJS code (in this instance at least - the error appears to relate to any rxjs file that is required within one of their files)

"use strict";
var Observable_1 = require('../../Observable');
var map_1 = require('../../operator/map');
Observable_1.Observable.prototype.map = map_1.map;

Attempted fix

I've tried removing the wildcards from the the rxjs path and adding a packages definition, which appears to possibly fix this issue, but unfortunately it results in a completely different error.

So in the config this:

'rxjs/*': './node_modules/rxjs/*.js'

changes to this:

'rxjs/': './node_modules/rxjs/',

plus the addition of:

packages: {
    'rxjs': {
        defaultExtension: 'js'
    }
}

Error after changes

    { SyntaxError: path/to/MyEnum.ts: 'import' and 'export' may appear only with 'sourceType: module' (3:0)
  1 | 
  2 | 
> 3 | export enum MyEnum {
    | ^
  4 |     do_a,
  5 |     do_b
  6 | }
    at Parser.pp$5.raise (/Users/blah/blah/project/node_modules/babylon/lib/index.js:4454:13)
    at Parser.pp$1.parseStatement (/Users/blah/blah/project/node_modules/babylon/lib/index.js:1881:16)
    at Parser.pp$1.parseBlockBody (/Users/blah/blah/project/node_modules/babylon/lib/index.js:2268:21)
    at Parser.pp$1.parseTopLevel (/Users/blah/blah/project/node_modules/babylon/lib/index.js:1778:8)
    at Parser.parse (/Users/blah/blah/project/node_modules/babylon/lib/index.js:1673:17)
    at parse (/Users/blah/blah/project/node_modules/babylon/lib/index.js:7246:37)
    at File.parse (/Users/blah/blah/project/node_modules/babel-core/lib/transformation/file/index.js:517:15)
    at File.parseCode (/Users/blah/blah/project/node_modules/babel-core/lib/transformation/file/index.js:602:20)
    at /Users/blah/blah/project/node_modules/babel-core/lib/transformation/pipeline.js:49:12
    at File.wrap (/Users/blah/blah/project/node_modules/babel-core/lib/transformation/file/index.js:564:16)
    at Pipeline.transform (/Users/blah/blah/project/node_modules/babel-core/lib/transformation/pipeline.js:47:17)
    at Object.exports.compile (/Users/blah/blah/project/node_modules/systemjs-builder/compilers/compiler.js:24:22)
    at Object.exports.compile (/Users/blah/blah/project/node_modules/systemjs-builder/compilers/global.js:14:19)
    at /Users/blah/blah/project/node_modules/systemjs-builder/lib/compile.js:117:43
    at tryCatcher (/Users/blah/blah/project/node_modules/bluebird/js/release/util.js:16:23)
    at Promise._settlePromiseFromHandler (/Users/blah/blah/project/node_modules/bluebird/js/release/promise.js:512:31)
  pos: 2,
  loc: Position { line: 3, column: 0 },
  _babel: true,
  codeFrame: '\u001b[0m \u001b[90m 1 | \u001b[39m\n \u001b[90m 2 | \u001b[39m\n\u001b[31m\u001b[1m>\u001b[22m\u001b[39m\u001b[90m 3 | \u001b[39m\u001b[36mexport\u001b[39m \u001b[36menum\u001b[39m \u001b[33mClassActions\u001b[39m {\n \u001b[90m   | \u001b[39m\u001b[31m\u001b[1m^\u001b[22m\u001b[39m\n \u001b[90m 4 | \u001b[39m    do_a\u001b[33m,\u001b[39m\n \u001b[90m 5 | \u001b[39m    do_b\n \u001b[90m 6 | \u001b[39m}\u001b[0m' }
@aluanhaddad
Copy link

Firstly, using package config is the right approach.

You need to point rxjs to the subdirectory containing the output. That error comes from the Builder directly trying to parse an esm source file.
You could configure the package "format": "esm" but as you can see from the error it is also trying to build directly from a typescript file so it would still fail. Is actually possible to build rxjs directly from the typescript source code using the systemjs builder but you would need to install the typescript plugin for that.

@jamesbrobb
Copy link
Author

@aluanhaddad thanks for the response.

It had occurred to me that i could possibly just target and transpile the typescript source instead, but i was unaware of plugin-typescript.

However having now installed and configured it, unfortunately i'm still getting the same 'import' and 'export' may appear only with 'sourceType: module' error.

@jamesbrobb
Copy link
Author

You need to point rxjs to the subdirectory containing the output.

Could you please elaborate on what you mean by this, I'm not sure i understand?

@jamesbrobb
Copy link
Author

After removing the wildcards from the rxjs path (which fixed the initial Error tracing issue), i wrongly assumed that the second issue was also being caused by rxjs. It turns out that that wasn't the case, it was actually being caused by the enum in the error.

I ended up finding 2 seperate enum definitions that would individually cause this error to occur. Although i'm not sure why this is the case, as there are lots of other enum's within my code base that transpile/build without any issues.

The fix for this issue was the one that @aluanhaddad suggested, but i'd possibly misunderstood. Which was to configure the offending package (the one the enum belonged to, not rxjs) as format: 'esm'

@aluanhaddad
Copy link

aluanhaddad commented Aug 6, 2017 •
edited
Loading

@jamesbrobb I meant that since

You need to point rxjs to the subdirectory containing the output.

Could you please elaborate on what you mean by this, I'm not sure i understand?

What i meant was that the error

{ SyntaxError: path/to/MyEnum.ts: 'import' and 'export' may appear only with 'sourceType: module' (3:0)
  1 | 
  2 | 
> 3 | export enum MyEnum {
    | ^
  4 |     do_a,
  5 |     do_b
  6 | }

implies that babel is being used to transpile an enum which is typescript syntax. You may need to update the map or packages config to point at the built output, instead of the source code, or you can configure plugin-typescript to load it and transpile it on the fly (this will enable tree shaking incidentally)

@jamesbrobb
Copy link
Author

jamesbrobb commented Aug 7, 2017 •
edited
Loading

Thanks @aluanhaddad

or you can configure plugin-typescript to load it and transpile it on the fly

But is this something that can be used within a production environment?

@jamesbrobb
Copy link
Author

I'm starting to feel like a dog chasing his tail. Every time i fix one thing, it seems to just create another issue.

In order to fix the initial problem, i removed the wildcards from the rxjs paths config.

So:

paths: {
    'rxjs/*': './node_modules/rxjs/src/*.ts' 
}

has become:

paths: {
    'rxjs/': './node_modules/rxjs/src/' 
}

According to the depreciation warnings, this is now the correct way to configure a 'wildcard' path, by just leaving a trailing slash. But in order to get it to correctly target .ts files within that package, am i right in thinking that i also need to add the following to the config, as otherwise it will attempt to load `.js' files instead:

packages: {
    rxjs: {
        defaultExtension: 'ts'
    }
}

But using this format adds .ts onto all of the systemjs register paths. so any other library i use that uses rxjs and imports it without the .ts will fail to find those files in the register.

So whereas when using wildcards (if it had worked) the output would be:

System.register("rxjs/observable/from", ["./FromObservable"], function (exports_1, context_1) {
    ...
}

Without the wildcards and only a trailing slash and defaultExtension: 'ts' it outputs:

System.register("rxjs/observable/from.ts", ["./FromObservable.ts"], function (exports_1, context_1) {
    ...
}

and using plugin-typescript it ends up with only .ts on the register keys, but not the dependencies:

System.register("rxjs/observable/from.ts", ["./FromObservable"], function (exports_1, context_1) {
    ...
}

Am i doing something wrong here?

@aluanhaddad
Copy link

It is true that the wildcard configuration is deprecated, but you are using an older version of the builder and an older version SystemJS...

The simplest way to make the app work is to just reference one of the bundled versions of RxJS.

Looking at your configuration again, it seems you are using paths config where you should be using map config.

or you can configure plugin-typescript to load it and transpile it on the fly
But is this something that can be used within a production environment?

No, but when you run a build/bundle, the TypeScript will be transpiled.
Regardless, this is an advanced scenario.

@jamesbrobb
Copy link
Author

jamesbrobb commented Aug 7, 2017 via email

@jamesbrobb
Copy link
Author

jamesbrobb commented Aug 7, 2017 via email

@jamesbrobb
Copy link
Author

jamesbrobb commented Aug 7, 2017 via email

@aluanhaddad
Copy link

@jamesbrobb I want to apologize for any confusion my remarks have caused.

No, but when you run a build/bundle, the TypeScript will be transpiled.
R egardless, this is an advanced scenario

I'm sorry i'm confused. The problem I'm trying to solve is to build/bundle
for a production environment.

What I mean is that targeting the TypeScript source of a third party package, compiling them from source is, whether for development or for production and whether bundling or not bundling, an advanced scenario.
Here are two example use cases:

A. I am building for production and wish to reduce code size by using plugin-typescript, together with the systemjs-builder's rollup support, to optimize the size of my bundle.

B. I want to use the source code of RxJS for debugging purposes.

@jamesbrobb jamesbrobb reopened this Aug 8, 2017
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@jamesbrobb @aluanhaddad