debug: Cannot use debug with Rollup

There’re a troubles both using debug directly (via import debug from 'debug') and as a dependency to another package, with Rollup bundler.

import debug from 'debug':

Non-existent export ‘default’ is imported from node_modules/debug/src/browser.js

I believe this is because of that dynamic stuff.

import SocketIo from 'socket.io-client' which has debug as a dependency:

‘default’ is not exported by ‘node_modules/socket.io-client/node_modules/debug/src/browser.js’

As far as I understood, the main idea behind browser.js is to import kinda «base» debug object and upgrade it with browser-specific methods’ implementations. I believe this can be rewritten in more static and bundler-friendly way. Like requiring base, propagate it with methods and then export as a default in different statements which would simplify the analysis by Rollup and other-like.

I’m not an active debug user, but debug is very popular tool, so many of my packages’ of choice using it as a dependency. So I stumble upon it when bundling, from time to time. Leveraging any workarounds is diffcult, since I do not have precision control over dependencies of my dependencies.

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 20 (6 by maintainers)

Commits related to this issue

Add docs for https://github.com/visionmedia/debug/issues/468 — committed to allex/debug by allex 6 years ago
Add docs for https://github.com/visionmedia/debug/issues/468 — committed to allex/debug by allex 6 years ago
Add docs for https://github.com/visionmedia/debug/issues/468 — committed to allex/debug by allex 6 years ago

Most upvoted comments

@StreetStrider that’s a fair assessment of what’s happening. But it sounds like this is probably a fixable bug in rollup-plugin-commonjs — I suspect it just doesn’t know what to make of this code:

exports = module.exports = require('./debug');

I’ve opened a related issue over there: https://github.com/rollup/rollup-plugin-commonjs/issues/204

Rich-Harris on Jun 16, 2017

If I don’t use dist version of debug, the arrow functions in src/browser will not run in IE11.

That’s not a problem with Rollup. You need to use Babel.

You can tell that I need to transpile, but when I use babel with typescript and it will cause this issue when compiled to common-js plugin of rollup.

This doesn’t make any sense. Can you explain, please?

After separating the node and browser build, the problem no longer exists.

iFwu on Jan 17, 2019

For me I had warnings for undefined packages native to Node and solved it by shimming the modules :

{
  plugins: [
    commonjs(),
    nodeGlobals(), // required for some shims
    nodeBuildins(), // the shims
  ]
}

krabbypattified on Dec 12, 2018

@thebigredgeek

I’ve used debug personally with webpack (for Node and the browser) and browserify (for the browser). I’ve never seen issues like this, to be honest.

Of course, you’ve not. Webpack and browserify treat modules in old way, creating IIFE for every module. They do nothing fancy with modules itself. In contrast, Rollup built on principle of module in ES6 sence and a couple of heuristics. That heuristics are creating an issue here. This issue has nothing with webpack or browserify. This topic isn’t about webpack or browserify.

StreetStrider on Sep 5, 2017