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?
javascript typescript2.0 porting
|
show 3 more comments
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?
javascript typescript2.0 porting
1
Shouldn't how you importLOG
be the same as the other one? They were originally and from your question it seems as ifOidcClient
is working correctly?
– pmkro
Nov 21 at 18:24
Log
is undefined because you importedLOG
, 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 thisimport * as Log from './src/Log';
– Jake Holzinger
Nov 21 at 18:57
Notice thatrequire
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
|
show 3 more comments
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?
javascript typescript2.0 porting
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
javascript typescript2.0 porting
asked Nov 21 at 18:20
Kabuo
415315
415315
1
Shouldn't how you importLOG
be the same as the other one? They were originally and from your question it seems as ifOidcClient
is working correctly?
– pmkro
Nov 21 at 18:24
Log
is undefined because you importedLOG
, 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 thisimport * as Log from './src/Log';
– Jake Holzinger
Nov 21 at 18:57
Notice thatrequire
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
|
show 3 more comments
1
Shouldn't how you importLOG
be the same as the other one? They were originally and from your question it seems as ifOidcClient
is working correctly?
– pmkro
Nov 21 at 18:24
Log
is undefined because you importedLOG
, 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 thisimport * as Log from './src/Log';
– Jake Holzinger
Nov 21 at 18:57
Notice thatrequire
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
|
show 3 more comments
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!
This does not explain whyexport 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 theexport default
declaration, so that really seems like an unlikely suspect if the code was working before.
– Jake Holzinger
Nov 28 at 6:21
add a comment |
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!
This does not explain whyexport 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 theexport default
declaration, so that really seems like an unlikely suspect if the code was working before.
– Jake Holzinger
Nov 28 at 6:21
add a comment |
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!
This does not explain whyexport 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 theexport default
declaration, so that really seems like an unlikely suspect if the code was working before.
– Jake Holzinger
Nov 28 at 6:21
add a comment |
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!
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!
answered Nov 27 at 22:34
Kabuo
415315
415315
This does not explain whyexport 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 theexport default
declaration, so that really seems like an unlikely suspect if the code was working before.
– Jake Holzinger
Nov 28 at 6:21
add a comment |
This does not explain whyexport 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 theexport 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
add a comment |
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.
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%2f53418322%2fhow-to-port-an-es6-require-statement-to-typescript%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
1
Shouldn't how you import
LOG
be the same as the other one? They were originally and from your question it seems as ifOidcClient
is working correctly?– pmkro
Nov 21 at 18:24
Log
is undefined because you importedLOG
, 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 thisimport * 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