react-d3-baseをimportしているとPhantomjsがこけてテストができなかった。

2016-02-20

react-d3-baseを使用しているReact.Componentを表示しようとする以前の、最初の定義段階でこけているらしく、まったくテストができませんでした。原因などはわかりませんが、こういうつまづき方をしましたということで、メモを残しておきます。

Capybara::Poltergeist::Driver.new(app, {
  js_errors: false
})

としても、アプリケーション自体が走らないので、画面表示されず。react-d3-base削除したところ、エラーが発生している最下部に上げた定義部分が消え、完走するようになりました。

c3にすげかえ後だったので削除でよしとしましたが、自分で対処できない事象に遭遇するととてもつらいと思いました。

エラー

TypeError: undefined is not a function (evaluating 'Object.assign')

browserify環境

TypeScriptから

"compilerOptions": {
  "target": "es5",
  "module": "commonjs",
  "sourceMap": true,
  "jsx" : "react",
  "outDir" : "../ts_built"
}

tsc後から

"scripts": {
  "build": "watchify --extension=js ./ts_built/index.js -o ./ts_built/built.js -v"
}

└─┬ watchify@3.7.0
  ├─┬ browserify@13.0.0
  │ ├─┬ buffer@4.3.1
  │ │ ├── base64-js@1.0.2
  │ │ └── isarray@1.0.0
  │ └── readable-stream@2.0.5
  └── outpipe@1.1.1

引っかかる部分のコード

var ChartSvg = (function (_Component) {
  _inherits(ChartSvg, _Component);

  function ChartSvg(props) {
    _classCallCheck(this, ChartSvg);

    _get(Object.getPrototypeOf(ChartSvg.prototype), 'constructor', this).call(this, props);
  }

  _createClass(ChartSvg, [{
    key: 'render',
    value: function render() {
      var _props = this.props;
      var height = _props.height;
      var width = _props.width;
      var margins = _props.margins;
      var svgClassName = _props.svgClassName;
      var id = _props.id;
      var children = _props.children;

      var t = 'translate(' + margins.left + ', ' + margins.top + ')';

      return _react2['default'].createElement(
        'svg',
        {
          height: height,
          width: width,
          className: svgClassName,
          id: id,
          ref: 'svgContainer'
        },
        _react2['default'].createElement(
          'g',
          {
            transform: t
          },
          children
        )
      );
    }
  }], [{
    key: 'defaultProps',
    value: Object.assign(_commonProps2['default'], {
      svgClassName: 'react-d3-core__container_svg',
      onZoom: function onZoom() {},
      scaleExtent: [1, 10]
    }),
    enumerable: true
  }, {
    key: 'propTypes',
    value: {
      id: _react.PropTypes.string,
      width: _react.PropTypes.number.isRequired,
      height: _react.PropTypes.number.isRequired,
      margins: _react.PropTypes.object.isRequired,
      svgClassName: _react.PropTypes.string.isRequired
    },
    enumerable: true
  }]);

  return ChartSvg;
})(_react.Component);