How to port an ES6 require() statement to typescript











up vote
0
down vote

favorite












We have been able to ported all the code for from JS/ES6 project to typescript 3.x but we can't seem to get the following file ported correctly.



The short version of file looks like this:



index.js (original):



export const Log = require('./src/Log');
export const OidcClient = require('./src/OidcClient');

export default {
Log,
OidcClient
};


index.ts (ported):



import LOG from './src/Log';
import { OidcClient } from './src/OidcClient';

export default {
Log,
OidcClient
};


The problem appears to be with the import LOG from './src/Log' vs. the export const Log = require('./src/Log'); statement. If we change the source file to use export LOG from './src/Log'; then the Log is undefined in the calling script file, just like the problem we are seeing in the ported version.



Intellisense, for the source file, states that the exported OidcClient statement is defined as
(property) OidcClient: typeof import("c:/.../src/OidcClient").



Whereas the ported version of the OidcClient statement is defined as
(property) OidcClient: typeof OidcClient.



How do we make this work from a TypeScript file?










share|improve this question


















  • 1




    Shouldn't how you import LOG be the same as the other one? They were originally and from your question it seems as if OidcClient is working correctly?
    – pmkro
    Nov 21 at 18:24










  • Log is undefined because you imported LOG, is there a reason you changed the name? Unless you plan on taking advantage of module defaults and object desctructuring syntax, then you can use something like this import * as Log from './src/Log';
    – Jake Holzinger
    Nov 21 at 18:57










  • Notice that require has nothing to do with ES6. It's part of the CommonJs module standard, as used e.g. in node.
    – Bergi
    Nov 21 at 19:08










  • Please show the code of how ./src/Log and ./src/OidcClient export the values
    – Bergi
    Nov 21 at 19:09










  • @pmkro no Log and OidcClient had the same issues.
    – Kabuo
    Nov 27 at 22:00















up vote
0
down vote

favorite












We have been able to ported all the code for from JS/ES6 project to typescript 3.x but we can't seem to get the following file ported correctly.



The short version of file looks like this:



index.js (original):



export const Log = require('./src/Log');
export const OidcClient = require('./src/OidcClient');

export default {
Log,
OidcClient
};


index.ts (ported):



import LOG from './src/Log';
import { OidcClient } from './src/OidcClient';

export default {
Log,
OidcClient
};


The problem appears to be with the import LOG from './src/Log' vs. the export const Log = require('./src/Log'); statement. If we change the source file to use export LOG from './src/Log'; then the Log is undefined in the calling script file, just like the problem we are seeing in the ported version.



Intellisense, for the source file, states that the exported OidcClient statement is defined as
(property) OidcClient: typeof import("c:/.../src/OidcClient").



Whereas the ported version of the OidcClient statement is defined as
(property) OidcClient: typeof OidcClient.



How do we make this work from a TypeScript file?










share|improve this question


















  • 1




    Shouldn't how you import LOG be the same as the other one? They were originally and from your question it seems as if OidcClient is working correctly?
    – pmkro
    Nov 21 at 18:24










  • Log is undefined because you imported LOG, is there a reason you changed the name? Unless you plan on taking advantage of module defaults and object desctructuring syntax, then you can use something like this import * as Log from './src/Log';
    – Jake Holzinger
    Nov 21 at 18:57










  • Notice that require has nothing to do with ES6. It's part of the CommonJs module standard, as used e.g. in node.
    – Bergi
    Nov 21 at 19:08










  • Please show the code of how ./src/Log and ./src/OidcClient export the values
    – Bergi
    Nov 21 at 19:09










  • @pmkro no Log and OidcClient had the same issues.
    – Kabuo
    Nov 27 at 22:00













up vote
0
down vote

favorite









up vote
0
down vote

favorite











We have been able to ported all the code for from JS/ES6 project to typescript 3.x but we can't seem to get the following file ported correctly.



The short version of file looks like this:



index.js (original):



export const Log = require('./src/Log');
export const OidcClient = require('./src/OidcClient');

export default {
Log,
OidcClient
};


index.ts (ported):



import LOG from './src/Log';
import { OidcClient } from './src/OidcClient';

export default {
Log,
OidcClient
};


The problem appears to be with the import LOG from './src/Log' vs. the export const Log = require('./src/Log'); statement. If we change the source file to use export LOG from './src/Log'; then the Log is undefined in the calling script file, just like the problem we are seeing in the ported version.



Intellisense, for the source file, states that the exported OidcClient statement is defined as
(property) OidcClient: typeof import("c:/.../src/OidcClient").



Whereas the ported version of the OidcClient statement is defined as
(property) OidcClient: typeof OidcClient.



How do we make this work from a TypeScript file?










share|improve this question













We have been able to ported all the code for from JS/ES6 project to typescript 3.x but we can't seem to get the following file ported correctly.



The short version of file looks like this:



index.js (original):



export const Log = require('./src/Log');
export const OidcClient = require('./src/OidcClient');

export default {
Log,
OidcClient
};


index.ts (ported):



import LOG from './src/Log';
import { OidcClient } from './src/OidcClient';

export default {
Log,
OidcClient
};


The problem appears to be with the import LOG from './src/Log' vs. the export const Log = require('./src/Log'); statement. If we change the source file to use export LOG from './src/Log'; then the Log is undefined in the calling script file, just like the problem we are seeing in the ported version.



Intellisense, for the source file, states that the exported OidcClient statement is defined as
(property) OidcClient: typeof import("c:/.../src/OidcClient").



Whereas the ported version of the OidcClient statement is defined as
(property) OidcClient: typeof OidcClient.



How do we make this work from a TypeScript file?







javascript typescript2.0 porting






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 21 at 18:20









Kabuo

415315




415315








  • 1




    Shouldn't how you import LOG be the same as the other one? They were originally and from your question it seems as if OidcClient is working correctly?
    – pmkro
    Nov 21 at 18:24










  • Log is undefined because you imported LOG, is there a reason you changed the name? Unless you plan on taking advantage of module defaults and object desctructuring syntax, then you can use something like this import * as Log from './src/Log';
    – Jake Holzinger
    Nov 21 at 18:57










  • Notice that require has nothing to do with ES6. It's part of the CommonJs module standard, as used e.g. in node.
    – Bergi
    Nov 21 at 19:08










  • Please show the code of how ./src/Log and ./src/OidcClient export the values
    – Bergi
    Nov 21 at 19:09










  • @pmkro no Log and OidcClient had the same issues.
    – Kabuo
    Nov 27 at 22:00














  • 1




    Shouldn't how you import LOG be the same as the other one? They were originally and from your question it seems as if OidcClient is working correctly?
    – pmkro
    Nov 21 at 18:24










  • Log is undefined because you imported LOG, is there a reason you changed the name? Unless you plan on taking advantage of module defaults and object desctructuring syntax, then you can use something like this import * as Log from './src/Log';
    – Jake Holzinger
    Nov 21 at 18:57










  • Notice that require has nothing to do with ES6. It's part of the CommonJs module standard, as used e.g. in node.
    – Bergi
    Nov 21 at 19:08










  • Please show the code of how ./src/Log and ./src/OidcClient export the values
    – Bergi
    Nov 21 at 19:09










  • @pmkro no Log and OidcClient had the same issues.
    – Kabuo
    Nov 27 at 22:00








1




1




Shouldn't how you import LOG be the same as the other one? They were originally and from your question it seems as if OidcClient is working correctly?
– pmkro
Nov 21 at 18:24




Shouldn't how you import LOG be the same as the other one? They were originally and from your question it seems as if OidcClient is working correctly?
– pmkro
Nov 21 at 18:24












Log is undefined because you imported LOG, is there a reason you changed the name? Unless you plan on taking advantage of module defaults and object desctructuring syntax, then you can use something like this import * as Log from './src/Log';
– Jake Holzinger
Nov 21 at 18:57




Log is undefined because you imported LOG, is there a reason you changed the name? Unless you plan on taking advantage of module defaults and object desctructuring syntax, then you can use something like this import * as Log from './src/Log';
– Jake Holzinger
Nov 21 at 18:57












Notice that require has nothing to do with ES6. It's part of the CommonJs module standard, as used e.g. in node.
– Bergi
Nov 21 at 19:08




Notice that require has nothing to do with ES6. It's part of the CommonJs module standard, as used e.g. in node.
– Bergi
Nov 21 at 19:08












Please show the code of how ./src/Log and ./src/OidcClient export the values
– Bergi
Nov 21 at 19:09




Please show the code of how ./src/Log and ./src/OidcClient export the values
– Bergi
Nov 21 at 19:09












@pmkro no Log and OidcClient had the same issues.
– Kabuo
Nov 27 at 22:00




@pmkro no Log and OidcClient had the same issues.
– Kabuo
Nov 27 at 22:00












1 Answer
1






active

oldest

votes

















up vote
0
down vote













For completeness



We are using webpack and built the output as a library, with these output settings:



libraryTarget: 'var',
library:'Oidc'



Thus the JS client should use the module like: Oidc.Log.Error(message). But the problem was Oidc.Log is undefine.



The clue



In the browser's debugger we noticed that Oidc is defined as a Module, which is what we expected, but it had a mysterious property called default which had everything we wanted within it. Okay, how to remove the default property and apply everything in it's part object, the Oidc module?



After 4 days of trial and error, we found the solution.



Solution



The documentation, and everything we could find, stated we should use:



export default { Log, OidcClient }



Out of desperation we finally tried removing the default keyword, as in:



export { Log, OidcClient }



and guess what? It worked!!



No more mysterious default property and all the types live off of the Oidc module as expected!






share|improve this answer





















  • This does not explain why export default suddenly stopped working when you switched to Typescript. How did removingdefault suddenly fix your issue? The only common declaration between the code snippets was the export default declaration, so that really seems like an unlikely suspect if the code was working before.
    – Jake Holzinger
    Nov 28 at 6:21













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',
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
});


}
});














draft saved

draft discarded


















StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53418322%2fhow-to-port-an-es6-require-statement-to-typescript%23new-answer', 'question_page');
}
);

Post as a guest















Required, but never shown

























1 Answer
1






active

oldest

votes








1 Answer
1






active

oldest

votes









active

oldest

votes






active

oldest

votes








up vote
0
down vote













For completeness



We are using webpack and built the output as a library, with these output settings:



libraryTarget: 'var',
library:'Oidc'



Thus the JS client should use the module like: Oidc.Log.Error(message). But the problem was Oidc.Log is undefine.



The clue



In the browser's debugger we noticed that Oidc is defined as a Module, which is what we expected, but it had a mysterious property called default which had everything we wanted within it. Okay, how to remove the default property and apply everything in it's part object, the Oidc module?



After 4 days of trial and error, we found the solution.



Solution



The documentation, and everything we could find, stated we should use:



export default { Log, OidcClient }



Out of desperation we finally tried removing the default keyword, as in:



export { Log, OidcClient }



and guess what? It worked!!



No more mysterious default property and all the types live off of the Oidc module as expected!






share|improve this answer





















  • This does not explain why export default suddenly stopped working when you switched to Typescript. How did removingdefault suddenly fix your issue? The only common declaration between the code snippets was the export default declaration, so that really seems like an unlikely suspect if the code was working before.
    – Jake Holzinger
    Nov 28 at 6:21

















up vote
0
down vote













For completeness



We are using webpack and built the output as a library, with these output settings:



libraryTarget: 'var',
library:'Oidc'



Thus the JS client should use the module like: Oidc.Log.Error(message). But the problem was Oidc.Log is undefine.



The clue



In the browser's debugger we noticed that Oidc is defined as a Module, which is what we expected, but it had a mysterious property called default which had everything we wanted within it. Okay, how to remove the default property and apply everything in it's part object, the Oidc module?



After 4 days of trial and error, we found the solution.



Solution



The documentation, and everything we could find, stated we should use:



export default { Log, OidcClient }



Out of desperation we finally tried removing the default keyword, as in:



export { Log, OidcClient }



and guess what? It worked!!



No more mysterious default property and all the types live off of the Oidc module as expected!






share|improve this answer





















  • This does not explain why export default suddenly stopped working when you switched to Typescript. How did removingdefault suddenly fix your issue? The only common declaration between the code snippets was the export default declaration, so that really seems like an unlikely suspect if the code was working before.
    – Jake Holzinger
    Nov 28 at 6:21















up vote
0
down vote










up vote
0
down vote









For completeness



We are using webpack and built the output as a library, with these output settings:



libraryTarget: 'var',
library:'Oidc'



Thus the JS client should use the module like: Oidc.Log.Error(message). But the problem was Oidc.Log is undefine.



The clue



In the browser's debugger we noticed that Oidc is defined as a Module, which is what we expected, but it had a mysterious property called default which had everything we wanted within it. Okay, how to remove the default property and apply everything in it's part object, the Oidc module?



After 4 days of trial and error, we found the solution.



Solution



The documentation, and everything we could find, stated we should use:



export default { Log, OidcClient }



Out of desperation we finally tried removing the default keyword, as in:



export { Log, OidcClient }



and guess what? It worked!!



No more mysterious default property and all the types live off of the Oidc module as expected!






share|improve this answer












For completeness



We are using webpack and built the output as a library, with these output settings:



libraryTarget: 'var',
library:'Oidc'



Thus the JS client should use the module like: Oidc.Log.Error(message). But the problem was Oidc.Log is undefine.



The clue



In the browser's debugger we noticed that Oidc is defined as a Module, which is what we expected, but it had a mysterious property called default which had everything we wanted within it. Okay, how to remove the default property and apply everything in it's part object, the Oidc module?



After 4 days of trial and error, we found the solution.



Solution



The documentation, and everything we could find, stated we should use:



export default { Log, OidcClient }



Out of desperation we finally tried removing the default keyword, as in:



export { Log, OidcClient }



and guess what? It worked!!



No more mysterious default property and all the types live off of the Oidc module as expected!







share|improve this answer












share|improve this answer



share|improve this answer










answered Nov 27 at 22:34









Kabuo

415315




415315












  • This does not explain why export default suddenly stopped working when you switched to Typescript. How did removingdefault suddenly fix your issue? The only common declaration between the code snippets was the export default declaration, so that really seems like an unlikely suspect if the code was working before.
    – Jake Holzinger
    Nov 28 at 6:21




















  • This does not explain why export default suddenly stopped working when you switched to Typescript. How did removingdefault suddenly fix your issue? The only common declaration between the code snippets was the export default declaration, so that really seems like an unlikely suspect if the code was working before.
    – Jake Holzinger
    Nov 28 at 6:21


















This does not explain why export default suddenly stopped working when you switched to Typescript. How did removingdefault suddenly fix your issue? The only common declaration between the code snippets was the export default declaration, so that really seems like an unlikely suspect if the code was working before.
– Jake Holzinger
Nov 28 at 6:21






This does not explain why export default suddenly stopped working when you switched to Typescript. How did removingdefault suddenly fix your issue? The only common declaration between the code snippets was the export default declaration, so that really seems like an unlikely suspect if the code was working before.
– Jake Holzinger
Nov 28 at 6:21




















draft saved

draft discarded




















































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.





Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


Please pay close attention to the following guidance:


  • 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.




draft saved


draft discarded














StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53418322%2fhow-to-port-an-es6-require-statement-to-typescript%23new-answer', 'question_page');
}
);

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







Popular posts from this blog

A CLEAN and SIMPLE way to add appendices to Table of Contents and bookmarks

Calculate evaluation metrics using cross_val_predict sklearn

Insert data from modal to MySQL (multiple modal on website)