question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Importing Kefir with RollupJS

See original GitHub issue

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.

Issue Analytics

  • State:closed
  • Created 7 years ago
  • Comments:5 (1 by maintainers)

github_iconTop GitHub Comments

1reaction
rpominovcommented, Mar 22, 2017

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

1reaction
mAAdhaTTahcommented, Mar 21, 2017

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

rollup.js
Importing CommonJS. Rollup can import existing CommonJS modules through a plugin. Publishing ES Modules. To make sure your ES modules are immediately usable...
Read more >
kefir | Yarn - Package Manager
Kefir — is an Reactive Programming library for JavaScript inspired by Bacon.js and RxJS with focus on high performance and low memory usage....
Read more >
How to Bundle JavaScript With Rollup — Step-by-Step Tutorial
js . Inside, we import the Babel plugin, then add it to a new configuration property called plugins , which will hold an...
Read more >
rollup/awesome: ⚡️ Delightful Rollup Plugins, Packages ...
Delightful Rollup Plugins, Packages, and Resources - GitHub - rollup/awesome: ... inject - Scans for global variables and injects import statements.
Read more >
@rollup/plugin-commonjs - npm
import commonjs from '@rollup/plugin-commonjs'; export default { input: 'src/index.js', output: { dir: 'output', format: ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found