es2015 transpile not possible for extending classes outside of project?

[ghost]

.babelrc
"presets": ["es2015"],

I have a directory structure that goes like this:

-folder1
 --test.js
-folder2
 --test2.js
 --.babelrc

test.js

class Test {
  constructor() {}
}

export default Test;

test2.js

import Test from "../folder1/test.js";

class Test2 extends Test {
  constructor() {
    super();
  }

}
export default Test2;

If I have both test.js and test2.js within folder2, it works fine. Even if I create another folder inside folder2 and put the abstract class inside, everything is fine.

However, the moment I try to move test.js outside of my "project", it doesn't work. (My repo is structured to have multiple "mini projects").

Importing other files in this manner, i.e. outside the project still works, but it just doesn't work for when I try to extend a class.

This is the error that I get in my browser, when it doesn't work:

Uncaught TypeError: Class constructor Test cannot be invoked without 'new'

[babel-bot]

Hey @PizzaE! We really appreciate you taking the time to report an issue. The collaborators
on this project attempt to help as many people as possible, but we're a limited number of volunteers,
so it's possible this won't be addressed swiftly.

If you need any help, or just have general Babel or JavaScript questions, we have a vibrant Slack
community that typically always has someone willing to help. You can sign-up here
for an invite.

[nicolo-ribaudo]

Do you transpile test.js when it is moved outside the project? If not, this bug would be fixed by #7081

[ghost]

@nicolo-ribaudo I am not entirely sure what you mean by that. I simply have my files in the structure above and run webpack with babel. Perhaps this may be a webpack bug?

[nicolo-ribaudo]

Can you check in your webpack output if the Test class is transpiled? If it isn't and you expect it to be transpiled, you should include that files in your webpack.config.js (usually dependencies and external files are not transpiled) - babel/babel-loader#293.

[ghost]

Yes it is transpiled I think. If I try to create a new class with the abstract class, it works, e.g:

import Test from "../folder1/test.js";

let test = new Test(); // this works

class Test2 extends Test {
...

but not the extends

[nicolo-ribaudo]

It might work because your browser supports classes. Can you search class in the webpack output and see if it is there?

[ghost]

I don't know what class is in the webpack output. Does it have anything to do with Asset Size Chunks Chunk Names?

[nicolo-ribaudo]

I meant in the file generated by webpack

[MarshallRJ]

I am having exactly the same issue. in my case the imported class is not transpiled.

[nicolo-ribaudo]

@MarshallRJ It is likely a configuration error. Can you post:

1. Your directory structure, showing .babelrcs, webpack.config.js and your source files.
2. .babelrcs
3. webpack.config.js

[ghost]

@nicolo-ribaudo I'm assuming the file generated by webpack is my bundle file? I do have some code in there with class as a keyword. Weird, because I thought I transpiled it to es2015 which is my preset. (I thought you can't have classes in 2015?)

[MarshallRJ]

@nicolo-ribaudo

Thanks, can do.

I am running a node project tests using babel-register

in the main project root
.babelrc

"presets": ["env"],
"plugins": ["transform-runtime", "add-module-exports"],

file that extends the class :

let CatchupSubscription = require('rms-event-sourcing').CatchupSubscription;

class CatchupSubscriptionMeterCalendars extends CatchupSubscription {
	constructor(options) {
		super(new EventStoreClient().http(), '$ce-Meter', onEventReceived, onSave, options);
	}
}

module.exports = CatchupSubscriptionMeterCalendars

In the node modules class that is extended (not transplied no bablel in the project)

class CatchupSubscription {
	constructor(esClient, streamName, onEventReceived, onCaughtUp, options = {}) {
		....
}

module.exports = CatchupSubscription;

I do not have a webpack.config.js file

[nicolo-ribaudo]

.babelrc only affects files in subdirectories. e.g. Given this files three:

package-1/
  - package.json
  - index.js
package-2/
  - package.json
  - .babelrc
  - index.js

// package-2/index.js
require("babel-register");

require("../package-1/index.js");

If you run Babel inside package-2, package-1/index.js isn't transpiled because there isn't a .babelrc in one of its parent folders. The same applies if you use webpack instead of babel-register.

I'd suggest to either pass the configuration directly to babel-loader/babel-register or add a new .babelrc where needed. Also, make sure that you are not excluding that folder with webpack's include/exclude/test or with Babel's ignore/only options.

@MarshallRJ If you expect it to work without transpiling the CatchupSubscription class, it is a bug and it will be fixed by #7081