Importing Kefir with RollupJS
antonioaguilar opened this issue · 5 comments
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.
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.
@mAAdhaTTah do you have any pointers or examples on how to configure RollupJS with the UMD wrapper?
No, sorry, I use webpack mostly. Haven't used rollup yet.
Hey! You probably need to use https://github.com/rollup/rollup-plugin-commonjs in order to import cjs modules which Kefir is.
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.