Strange inheritance problem “cannot be invoked without 'new'”
Thought I had this figured out yesterday, but I apparently did not and after another full day of trying to figure this out I'm asking for help again.
I have a module that is "installed" via npm link which is written in ES6. There is a class that I am exporting called Perishable. I have stripped down the class to the bare minimum are the issue still exists.
export default class Perishable
constructor()
I am trying to extend the class, and I am doing so like this:
// Perishable is imported already and IS NOT NULL.
export default class Apple extends Perishable
constructor()
super()
When calling new Apple() I get the following error: Class constructor Perishable cannot be invoked without 'new'
However, I can directly create a new Perishable class via new Perishable() without any problems.
To add onto this, copy+pasting the class into the same directory and importing it using a relative path allows me to properly call new Apple(). I believe this has to do with the way that webpack/babel is transpiling the symlinked class. This is what I get when inspecting the transpiled code: of the symlinked class
var Apple = function (_Perishable)
_inherits(Apple, _Perishable);
function Apple()
return Apple;
(_idleEngine.Perishable);
This is what I get when I inspect the code of the local class (that works properly).
var Apple = function (_Perishable)
_inherits(Apple, _Perishable);
function Apple()
return Apple;
(_Perishable3.default);
The only difference between the two generated codes is what's in the curlies at the end, one is (_idleEngine.Perishable) and one is (_Perishable3.default).
console.log(Perishable) returns the same thing for both types of imports, and new Perishable() works fine for both imports.
I should add that the symlinked class is imported via a npm link and the local class I just copy+pasted out of the library to be in the same folder as the Apple class.
EDIT: This seems to only be a problem with syslinked modules as publishing the module "fixed" the issue.
javascript webpack ecmascript-6 babel
|
show 1 more comment
Thought I had this figured out yesterday, but I apparently did not and after another full day of trying to figure this out I'm asking for help again.
I have a module that is "installed" via npm link which is written in ES6. There is a class that I am exporting called Perishable. I have stripped down the class to the bare minimum are the issue still exists.
export default class Perishable
constructor()
I am trying to extend the class, and I am doing so like this:
// Perishable is imported already and IS NOT NULL.
export default class Apple extends Perishable
constructor()
super()
When calling new Apple() I get the following error: Class constructor Perishable cannot be invoked without 'new'
However, I can directly create a new Perishable class via new Perishable() without any problems.
To add onto this, copy+pasting the class into the same directory and importing it using a relative path allows me to properly call new Apple(). I believe this has to do with the way that webpack/babel is transpiling the symlinked class. This is what I get when inspecting the transpiled code: of the symlinked class
var Apple = function (_Perishable)
_inherits(Apple, _Perishable);
function Apple()
return Apple;
(_idleEngine.Perishable);
This is what I get when I inspect the code of the local class (that works properly).
var Apple = function (_Perishable)
_inherits(Apple, _Perishable);
function Apple()
return Apple;
(_Perishable3.default);
The only difference between the two generated codes is what's in the curlies at the end, one is (_idleEngine.Perishable) and one is (_Perishable3.default).
console.log(Perishable) returns the same thing for both types of imports, and new Perishable() works fine for both imports.
I should add that the symlinked class is imported via a npm link and the local class I just copy+pasted out of the library to be in the same folder as the Apple class.
EDIT: This seems to only be a problem with syslinked modules as publishing the module "fixed" the issue.
javascript webpack ecmascript-6 babel
I assume you are still stuck on Babel 6.x?
– connexo
Nov 14 '18 at 7:24
@connexo Yeah, that's correct. The issue seems to only exist when syslinked. If I publish the module then it works as expected.
– Christian Tucker
Nov 14 '18 at 7:30
I'd suggest you migrate to Babel 7 asap. If not possible, use the appropriate plugin namedbabel-plugin-transform-classes-proposalor something the like of that.
– connexo
Nov 14 '18 at 7:35
npmjs.com/package/babel-plugin-transform-es2015-classes
– connexo
Nov 14 '18 at 7:38
"I have a module that is "installed" via npm link which is written in ES6." That's likely the problem. I assume that whatever is invoking babel on your code is not configured to go into the linked module (or it may even be that tools are not able to do that). So the super class is a native ES6 class, which means that it must be called withnew, which the tranpiled code doesn't (and cannot) do.
– Felix Kling
Nov 14 '18 at 7:45
|
show 1 more comment
Thought I had this figured out yesterday, but I apparently did not and after another full day of trying to figure this out I'm asking for help again.
I have a module that is "installed" via npm link which is written in ES6. There is a class that I am exporting called Perishable. I have stripped down the class to the bare minimum are the issue still exists.
export default class Perishable
constructor()
I am trying to extend the class, and I am doing so like this:
// Perishable is imported already and IS NOT NULL.
export default class Apple extends Perishable
constructor()
super()
When calling new Apple() I get the following error: Class constructor Perishable cannot be invoked without 'new'
However, I can directly create a new Perishable class via new Perishable() without any problems.
To add onto this, copy+pasting the class into the same directory and importing it using a relative path allows me to properly call new Apple(). I believe this has to do with the way that webpack/babel is transpiling the symlinked class. This is what I get when inspecting the transpiled code: of the symlinked class
var Apple = function (_Perishable)
_inherits(Apple, _Perishable);
function Apple()
return Apple;
(_idleEngine.Perishable);
This is what I get when I inspect the code of the local class (that works properly).
var Apple = function (_Perishable)
_inherits(Apple, _Perishable);
function Apple()
return Apple;
(_Perishable3.default);
The only difference between the two generated codes is what's in the curlies at the end, one is (_idleEngine.Perishable) and one is (_Perishable3.default).
console.log(Perishable) returns the same thing for both types of imports, and new Perishable() works fine for both imports.
I should add that the symlinked class is imported via a npm link and the local class I just copy+pasted out of the library to be in the same folder as the Apple class.
EDIT: This seems to only be a problem with syslinked modules as publishing the module "fixed" the issue.
javascript webpack ecmascript-6 babel
Thought I had this figured out yesterday, but I apparently did not and after another full day of trying to figure this out I'm asking for help again.
I have a module that is "installed" via npm link which is written in ES6. There is a class that I am exporting called Perishable. I have stripped down the class to the bare minimum are the issue still exists.
export default class Perishable
constructor()
I am trying to extend the class, and I am doing so like this:
// Perishable is imported already and IS NOT NULL.
export default class Apple extends Perishable
constructor()
super()
When calling new Apple() I get the following error: Class constructor Perishable cannot be invoked without 'new'
However, I can directly create a new Perishable class via new Perishable() without any problems.
To add onto this, copy+pasting the class into the same directory and importing it using a relative path allows me to properly call new Apple(). I believe this has to do with the way that webpack/babel is transpiling the symlinked class. This is what I get when inspecting the transpiled code: of the symlinked class
var Apple = function (_Perishable)
_inherits(Apple, _Perishable);
function Apple()
return Apple;
(_idleEngine.Perishable);
This is what I get when I inspect the code of the local class (that works properly).
var Apple = function (_Perishable)
_inherits(Apple, _Perishable);
function Apple()
return Apple;
(_Perishable3.default);
The only difference between the two generated codes is what's in the curlies at the end, one is (_idleEngine.Perishable) and one is (_Perishable3.default).
console.log(Perishable) returns the same thing for both types of imports, and new Perishable() works fine for both imports.
I should add that the symlinked class is imported via a npm link and the local class I just copy+pasted out of the library to be in the same folder as the Apple class.
EDIT: This seems to only be a problem with syslinked modules as publishing the module "fixed" the issue.
javascript webpack ecmascript-6 babel
javascript webpack ecmascript-6 babel
edited Nov 14 '18 at 7:29
Christian Tucker
asked Nov 14 '18 at 7:07
Christian TuckerChristian Tucker
256
256
I assume you are still stuck on Babel 6.x?
– connexo
Nov 14 '18 at 7:24
@connexo Yeah, that's correct. The issue seems to only exist when syslinked. If I publish the module then it works as expected.
– Christian Tucker
Nov 14 '18 at 7:30
I'd suggest you migrate to Babel 7 asap. If not possible, use the appropriate plugin namedbabel-plugin-transform-classes-proposalor something the like of that.
– connexo
Nov 14 '18 at 7:35
npmjs.com/package/babel-plugin-transform-es2015-classes
– connexo
Nov 14 '18 at 7:38
"I have a module that is "installed" via npm link which is written in ES6." That's likely the problem. I assume that whatever is invoking babel on your code is not configured to go into the linked module (or it may even be that tools are not able to do that). So the super class is a native ES6 class, which means that it must be called withnew, which the tranpiled code doesn't (and cannot) do.
– Felix Kling
Nov 14 '18 at 7:45
|
show 1 more comment
I assume you are still stuck on Babel 6.x?
– connexo
Nov 14 '18 at 7:24
@connexo Yeah, that's correct. The issue seems to only exist when syslinked. If I publish the module then it works as expected.
– Christian Tucker
Nov 14 '18 at 7:30
I'd suggest you migrate to Babel 7 asap. If not possible, use the appropriate plugin namedbabel-plugin-transform-classes-proposalor something the like of that.
– connexo
Nov 14 '18 at 7:35
npmjs.com/package/babel-plugin-transform-es2015-classes
– connexo
Nov 14 '18 at 7:38
"I have a module that is "installed" via npm link which is written in ES6." That's likely the problem. I assume that whatever is invoking babel on your code is not configured to go into the linked module (or it may even be that tools are not able to do that). So the super class is a native ES6 class, which means that it must be called withnew, which the tranpiled code doesn't (and cannot) do.
– Felix Kling
Nov 14 '18 at 7:45
I assume you are still stuck on Babel 6.x?
– connexo
Nov 14 '18 at 7:24
I assume you are still stuck on Babel 6.x?
– connexo
Nov 14 '18 at 7:24
@connexo Yeah, that's correct. The issue seems to only exist when syslinked. If I publish the module then it works as expected.
– Christian Tucker
Nov 14 '18 at 7:30
@connexo Yeah, that's correct. The issue seems to only exist when syslinked. If I publish the module then it works as expected.
– Christian Tucker
Nov 14 '18 at 7:30
I'd suggest you migrate to Babel 7 asap. If not possible, use the appropriate plugin named
babel-plugin-transform-classes-proposal or something the like of that.– connexo
Nov 14 '18 at 7:35
I'd suggest you migrate to Babel 7 asap. If not possible, use the appropriate plugin named
babel-plugin-transform-classes-proposal or something the like of that.– connexo
Nov 14 '18 at 7:35
npmjs.com/package/babel-plugin-transform-es2015-classes
– connexo
Nov 14 '18 at 7:38
npmjs.com/package/babel-plugin-transform-es2015-classes
– connexo
Nov 14 '18 at 7:38
"I have a module that is "installed" via npm link which is written in ES6." That's likely the problem. I assume that whatever is invoking babel on your code is not configured to go into the linked module (or it may even be that tools are not able to do that). So the super class is a native ES6 class, which means that it must be called with
new, which the tranpiled code doesn't (and cannot) do.– Felix Kling
Nov 14 '18 at 7:45
"I have a module that is "installed" via npm link which is written in ES6." That's likely the problem. I assume that whatever is invoking babel on your code is not configured to go into the linked module (or it may even be that tools are not able to do that). So the super class is a native ES6 class, which means that it must be called with
new, which the tranpiled code doesn't (and cannot) do.– Felix Kling
Nov 14 '18 at 7:45
|
show 1 more comment
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53294788%2fstrange-inheritance-problem-cannot-be-invoked-without-new%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53294788%2fstrange-inheritance-problem-cannot-be-invoked-without-new%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
I assume you are still stuck on Babel 6.x?
– connexo
Nov 14 '18 at 7:24
@connexo Yeah, that's correct. The issue seems to only exist when syslinked. If I publish the module then it works as expected.
– Christian Tucker
Nov 14 '18 at 7:30
I'd suggest you migrate to Babel 7 asap. If not possible, use the appropriate plugin named
babel-plugin-transform-classes-proposalor something the like of that.– connexo
Nov 14 '18 at 7:35
npmjs.com/package/babel-plugin-transform-es2015-classes
– connexo
Nov 14 '18 at 7:38
"I have a module that is "installed" via npm link which is written in ES6." That's likely the problem. I assume that whatever is invoking babel on your code is not configured to go into the linked module (or it may even be that tools are not able to do that). So the super class is a native ES6 class, which means that it must be called with
new, which the tranpiled code doesn't (and cannot) do.– Felix Kling
Nov 14 '18 at 7:45