How to fix this:Error in mounted hook: "TypeError: Class constructor Base cannot be invoked without 'new'"

I have searched related issues. And the most populate answer is to use preset to set the env not to transform es6 class to es2015. According to issue#4269, issue#338I think my setting should make sense to not to transform, but it doesn’t.

My .babelrc setting is like this:

{
  "presets": [
    ["env", { "modules": false ,
    "targets": {
        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"],
        "node":"current"
      }
    }], "stage-2"
  ],
  "plugins": ["transform-runtime","syntax-dynamic-import"],
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": ["istanbul"]
    }
  }

}

My code is like below:

// a.js
// class definition
import Base form '@antv/g2/src/facet/base';
class Nested extends Base {
...
}
export default Nested;

//b.js
import Nested from './nested';
G2.Chart.prototype.facet = function(type, cfg) {
...
const cls = new Nested(cfg);
...
}
export default G2;

And the browser report that Error in mounted hook: "TypeError: Class constructor Base cannot be invoked without 'new'"

And the related transformed code may be like this

var Nested = function (_Base) {
  _inherits(Nested, _Base);

  function Nested() {
    _classCallCheck(this, Nested);

    return _possibleConstructorReturn(this, (Nested.__proto__ || Object.getPrototypeOf(Nested)).apply(this, arguments));
  }
...

software	version(s)
Babel	“babel-preset-env”: “^1.6.1”
node	7.9.0
npm	4.2.0
Operating System	macOS 10.11.3 (15D21)

More Info:

    "babel": "^6.23.0",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.0",
    "babel-eslint": "^7.1.1",
    "babel-loader": "^7.1.2",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-preset-env": "^1.6.1",
    "babel-preset-stage-2": "^6.22.0",
    "babel-register": "^6.22.0",

Looking forward to your reply.

[Jessidhia]

This happens if Nested is transformed by babel but Base isn’t. The way babel is calling the superclass constructor is not allowed by the ES6 spec – it’s just how babel emulates it in ES5, and in order for it to work, the superclass needs to also be emulated in ES5.

[Jessidhia]

It looks like @antv/g2 does provide a build where the class is transformed, but that’s only as an UMD bundle that bundles the entire library.

If you still want to pick the specific class from @antv/g2/src/facet/base, I think you’re going to have to add a rule on your webpack config to pass the files inside node_modules/@antv/g2/src through babel-loader.