Importing Kefir with RollupJS

[antonioaguilar]

I installed Kefir via NPM and I'm trying to import Kefir using RollupJS but got the following errors:

⚠️   The 'this' keyword is equivalent to 'undefined' at the top level of an ES module, and has been rewritten
https://github.com/rollup/rollup/wiki/Troubleshooting#this-is-undefined
node_modules/kefir/dist/kefir.js (9:2)
 7:   typeof define === 'function' && define.amd ? define(['exports'], factory) :
 8:   (factory((global.Kefir = global.Kefir || {})));
 9: }(this, function (exports) { 'use strict';
      ^
10:
11:   function createObj(proto) {

🚨   'default' is not exported by node_modules/kefir/dist/kefir.js
https://github.com/rollup/rollup/wiki/Troubleshooting#name-is-not-exported-by-module
src/main.js (2:7)
1: // src/main.js
2: import Kefir from 'kefir';
          ^
3:
4: export default function () {

This is the code example I'm trying to run:

// src/main.js
import Kefir from 'kefir'

export default function() {

  let numbers = Kefir.sequentially(2000, [1, 2, 3, 4, 5, 6, 7, 8, 9]);

  numbers.onValue(x => {
    console.log(x);
  });

}

and this is my RollupJS config:

// rollup.config.js
import resolve from 'rollup-plugin-node-resolve';
import babel from 'rollup-plugin-babel';

export default {
  entry: 'src/main.js',
  format: 'cjs',
  plugins: [
    resolve(),
    babel({
      exclude: 'node_modules/**' // only transpile our source code
    })
  ],
  dest: 'dist/bundle.js'
};

using the following node deps:

  "dependencies": {
    "kefir": "^3.7.1"
  },
  "devDependencies": {
    "babel-plugin-external-helpers": "^6.22.0",
    "babel-preset-latest": "^6.24.0",
    "rollup": "^0.41.6",
    "rollup-plugin-babel": "^2.7.1",
    "rollup-plugin-json": "^2.1.0",
    "rollup-plugin-node-resolve": "^2.0.0",
    "rollup-watch": "^3.2.2"
  }

Any ideas how to properly import Kefir using RollupJS? Note, I'm not ultra familiar with ES6 modules or RollupJS but since you are using it to build Kefir I thought I give it a try - I would like to use Kefir as part of another library.

[mAAdhaTTah]

If you can, you're probably better off configuring rollup to point to Kefir's source, rather than the dist. The dist js file is a UMD module, rather than an ES6 module, which is probably what's causing the issue here. You may need to configure Rollup to handle the UMD wrapper properly.

[antonioaguilar]

@mAAdhaTTah do you have any pointers or examples on how to configure RollupJS with the UMD wrapper?

[mAAdhaTTah]

No, sorry, I use webpack mostly. Haven't used rollup yet.

[rpominov]

Hey! You probably need to use https://github.com/rollup/rollup-plugin-commonjs in order to import cjs modules which Kefir is.

[antonioaguilar]

Thanks for the suggestions - I reverted to use Webpack to build my library but I'm still consider using Rollup to reduce unused methods and bundle size.