es6 modules export / import：未捕获TypeError：无法读取未定义的属性'default'

Question

问题描述：

我正在我的GameService类构造函数中创建一个Hero的新实例，如下所示：

let image = Util.createImage('assets/images/head_blue.jpg');
this.hero = new Hero({
  id: 1,
  name: 'test',
  x: 0,
  y: 0,
  width: 100,
  height: 100,
  bitmap: new createjs.Bitmap(image)
});

我在我的GameService中添加了import Hero from '../entities/hero';。 linter-jshint没有指出任何问题，当我通过gulp构建js文件时，没有显示任何错误。如果我放一些随机模块名称，那么gulp会抛出一个错误。

看起来一切都很好，但我在浏览器中收到此错误：

  

未捕获的TypeError：无法读取未定义的属性'default'

这个错误似乎直接来自我的Object类。如果我从Object类完全评论Hero，则错误就会消失。

问题

为什么export default Object;会导致此问题？

代码

类：Hero扩展了Object， 位于：/entities/hero.js

import Object from "./object";

class Hero extends Object{
  constructor(options){
    if(options === undefined){
      throw new TypeError("Options not defined in Hero.");
    }
    super(options.x, options.y, options.width, options.height, options.bitmap);
    this._id = options.id;
    this._name = options.name;
  }
  set id(id){
    this._id = id;
  }
  get id(){
    return this._id;
  }
  set name(name){
    this._name = name;
  }
  get name(){
    return this._name;
  }
}

export default Hero;

类：对象， 位于 /entities/object.js

class Object{
  constructor(x, y, width, height, bitmap){
    this._x = x;
    this._y = y;
    this._width = width;
    this._height = height;
    this._bitmap = bitmap;
  }
  set x(x){
    this._x = this._bitmap.x = x;
  }
  get x(){
    return this._x;
  }
  set y(y){
    this._y = this._bitmap.y = y;
  }
  get y(){
    return this._y;
  }
  set width(width){
    this._width = width;
  }
  get width(){
    return this._width;
  }
  set height(height){
    this._height = height;
  }
  get height(){
    return this._height;
  }
  set bitmap(bitmap){
    this._bitmap = bitmap;
  }
  get bitmap(){
    return this._bitmap;
  }
}

export default Object;

文件夹结构：

当我this.hero = new Hero({ /* stuff here */ });时，我在game.service.js文件中（又名：GameService类）。

Answer 1

  

Object已经是基类 - Bergi

他提到它可能是我的浏览器中的一个错误，它应该有效。目前，我刚刚将Object重命名为BaseObject。