babel: ReferenceError: ** is not undefined error when using import

I’m using babel + browserify + gulp.

# app.js
import DatePicker from './DatePicker'
# use DatePicker here

It runs smoothly in the browser, however when I’m debugging, open console of DevTools and type DatePicker, got an undefined error

ReferenceError: "DatePicker is not defined"

my gulpfile.js is like:

  var bundle = browserify('./app.js', {
    debug: true,
    cache: {},
    packageCache: {},
    insertGlobals: true,
    extensions: ['.js', '.jsx']
  }).transform(babelify, {stage: 0, loose: "all"});

About this issue

Original URL
State: closed
Created 9 years ago
Reactions: 1
Comments: 15 (7 by maintainers)

Most upvoted comments

@aldendaniels Nope. That doesn’t allow for live bindings.

foo.js

import { num } from "./bar";

setInterval(function () {
  console.log(num);
}, 1000);

bar.js

export var num = 1;
setInterval(function () {
  num++;
}, 1000);

Running:

$ babel-node foo.js

should output:

1
2
3
4
5
...

But with your suggestion will just output:

sebmck on May 15, 2015

Expected behaviour. Imports need to be rewritten in order to support live bindings. For example:

import DatePicker from './DatePicker'
DatePicker;

is turned into

'use strict';
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; 
var _DatePicker = require('./DatePicker');
var _DatePicker2 = _interopRequireDefault(_DatePicker);
_DatePicker2['default'];

So the DatePicker binding doesn’t actually exist.

sebmck on May 7, 2015