'Subject' is not exported by rxjs in rollup.js

Question

I am trying to set up my project to use rollup, as part of an angular2 move to AOT compilation, however, I am getting the following issue.

Error: 'Subject' is not exported by node_modules\rxjs\Subject.js

This is my rollup.js file:

import rollup from 'rollup';
import nodeResolve from 'rollup-plugin-node-resolve'
import commonjs    from 'rollup-plugin-commonjs';
import uglify      from 'rollup-plugin-uglify'

export default {
  entry: 'client/main.js',
  dest: 'public/assets/js/build.js',
  sourceMap: false,
  format: 'iife',
  plugins: [
      nodeResolve({jsnext: true, module: true}),
      commonjs({
        include: 'node_modules/rxjs/**',
        include: 'node_modules/angular2-jwt/**',
      }),
      uglify()
  ]
}

Why is this happening, I have followed the angular2 cookbook guide?

Answer 1

You'll need to use the namedExports option with rollup-plugin-commonjs: https://github.com/rollup/rollup-plugin-commonjs#custom-named-exports.

Also, you may find it useful to include: 'node_modules/**' rather than individual packages, as otherwise any dependencies of your dependencies will bypass the plugin (in the config above, you have duplicate include properties – perhaps that's just a typo? If you need to pass multiple values, use an array).

commonjs({
  include: 'node_modules/**',
  namedExports: {
    'node_modules/rxjs/Subject.js': [ 'Subject' ]
  }
})

Answer 2

I finally figured this out on my system.

The named export solution is wrong since rollup-plugin-commonjs will handle the exports in Subject.js just fine.

The problem for me was the "includes" option in rollup-plugin-commonjs.

There are two issues.

Number one: when specifying the includes in the options as "node_modules/rxjs/**" you have to be sure the full path resolves to where you expect it to.

Example:

I run my build command from "c:/foo/build" but my files are in "c:/my-source" then the include patterns might resolve to "c:/build/node_modules" which means when the commonjs plugin is checking if it should handle "node_modules/rxjs/" it will see that "c:/my-source/node_modules/rxjs/" does not match "c:/build/node_modules/rxjs/**" thus it will not convert the exports to ES6.

The second issue is case sensitivity. The include patterns are case sensitive. This tripped me up too.

Both of these issues can be confirmed by opening the "node_modules\rollup-plugin-commonjs\dist\rollup-plugin-commonjs.cjs.js" file and debugging the "transform" function.

If you modify the code (at the very beginning of the transform function) to be something like this

if (id.includes('rxjs\\Subject.js')) {
        debugger;
}

and then run the code in a debugger, you can step through the code until it gets to the filter function. There you will see the filter function is skipping the "rxjs/Subject.js" file.

I almost guarantee this is the problem when the error occurs.