Difference between import * as & import { default as }
up vote
2
down vote
favorite
I have the following imports:
import { default as service } from "../service";
VS
import * as service from "../service";
My service is exported like so
module.exports = {
init(store) {
_store = store;
},
beginPayment() {
}
};
I would expect that only the second import would work since there is no export default, however both seem to work.
What is the difference between these? Is one preferred over the other?
If this is a duplicate I apologize, I didn't find anything specific to my example on SO or Google.
javascript ecmascript-6 import ecmascript-5
asked Nov 20 at 15:58
Brandon McAlees
109313
add a comment |
up vote
2
down vote
favorite
I have the following imports:
import { default as service } from "../service";
VS
import * as service from "../service";
My service is exported like so
module.exports = {
init(store) {
_store = store;
},
beginPayment() {
}
};
I would expect that only the second import would work since there is no export default, however both seem to work.
What is the difference between these? Is one preferred over the other?
If this is a duplicate I apologize, I didn't find anything specific to my example on SO or Google.
javascript ecmascript-6 import ecmascript-5
asked Nov 20 at 15:58
Brandon McAlees
109313
Possible duplicate of When should I use curly braces for ES6 import?
– Pete
Nov 20 at 16:16
I didn't see the import of: { default as 'xxx' } explained in that question. Still unsure of exactly what the differences are here.
– Brandon McAlees
Nov 20 at 16:21
It's the bottom one in the accepted answer, starts with We can also assign them all different names when importing:
– Pete
Nov 21 at 10:03
add a comment |
up vote
2
down vote
favorite
up vote
2
down vote
favorite
I have the following imports:
import { default as service } from "../service";
VS
import * as service from "../service";
My service is exported like so
module.exports = {
init(store) {
_store = store;
},
beginPayment() {
}
};
I would expect that only the second import would work since there is no export default, however both seem to work.
What is the difference between these? Is one preferred over the other?
If this is a duplicate I apologize, I didn't find anything specific to my example on SO or Google.
javascript ecmascript-6 import ecmascript-5
asked Nov 20 at 15:58
Brandon McAlees
109313
I have the following imports:
import { default as service } from "../service";
VS
import * as service from "../service";
My service is exported like so
module.exports = {
init(store) {
_store = store;
},
beginPayment() {
}
};
I would expect that only the second import would work since there is no export default, however both seem to work.
What is the difference between these? Is one preferred over the other?
If this is a duplicate I apologize, I didn't find anything specific to my example on SO or Google.
javascript ecmascript-6 import ecmascript-5
javascript ecmascript-6 import ecmascript-5
asked Nov 20 at 15:58
Brandon McAlees
109313
asked Nov 20 at 15:58
Brandon McAlees
109313
asked Nov 20 at 15:58
Brandon McAlees
109313
asked Nov 20 at 15:58
Brandon McAlees
109313
asked Nov 20 at 15:58
Brandon McAlees
109313
109313
Possible duplicate of When should I use curly braces for ES6 import?
– Pete
Nov 20 at 16:16
I didn't see the import of: { default as 'xxx' } explained in that question. Still unsure of exactly what the differences are here.
– Brandon McAlees
Nov 20 at 16:21
It's the bottom one in the accepted answer, starts with We can also assign them all different names when importing:
– Pete
Nov 21 at 10:03
add a comment |
Possible duplicate of When should I use curly braces for ES6 import?
– Pete
Nov 20 at 16:16
I didn't see the import of: { default as 'xxx' } explained in that question. Still unsure of exactly what the differences are here.
– Brandon McAlees
Nov 20 at 16:21
It's the bottom one in the accepted answer, starts with We can also assign them all different names when importing:
– Pete
Nov 21 at 10:03
Possible duplicate of When should I use curly braces for ES6 import?
– Pete
Nov 20 at 16:16
Possible duplicate of When should I use curly braces for ES6 import?
– Pete
Nov 20 at 16:16
I didn't see the import of: { default as 'xxx' } explained in that question. Still unsure of exactly what the differences are here.
– Brandon McAlees
Nov 20 at 16:21
I didn't see the import of: { default as 'xxx' } explained in that question. Still unsure of exactly what the differences are here.
– Brandon McAlees
Nov 20 at 16:21
It's the bottom one in the accepted answer, starts with We can also assign them all different names when importing:
– Pete
Nov 21 at 10:03
It's the bottom one in the accepted answer, starts with We can also assign them all different names when importing:
– Pete
Nov 21 at 10:03
add a comment |
1 Answer
1
active
oldest
votes
up vote
3
down vote
accepted
If you are importing the default, there has to be a default.
In general, the community appears wary of default exports at the moment as they seem to be less discoverable (I have no specific citation, but I've watched the conversation!)
If you are working in a team, whatever they say is the correct answer, of course!
So without a default, you need to use:
import * as service from "../service";
Or choose a specific thing:
import { specificNamedThing } from "../service";
answered Nov 20 at 16:03
Fenton
151k42285309
So if there is no default export, is 'import default' treated as 'import *'? In my example above I have no default export, but my first import statement works, and it seems to act like an 'import *'.
– Brandon McAlees
Nov 20 at 16:11
As far as I'm aware, it is invalid to use import default if there is no export default. It should throw an exception.
– Fenton
Nov 20 at 16:13
1
@Fenton it doesn't throw an exception for me, just returns undefined.
– George
Nov 20 at 16:14
I think I found out why it works for me. We use Babel to transpile our code and when turning source maps off in the chrome debugger, all our import statements are converted to Webpack requires. Makes sense why I wasn't able to find anything online. Thanks for the help!
– Brandon McAlees
Nov 20 at 16:54
add a comment |
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%2f53396886%2fdifference-between-import-as-import-default-as%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
3
down vote
accepted
If you are importing the default, there has to be a default.
In general, the community appears wary of default exports at the moment as they seem to be less discoverable (I have no specific citation, but I've watched the conversation!)
If you are working in a team, whatever they say is the correct answer, of course!
So without a default, you need to use:
import * as service from "../service";
Or choose a specific thing:
import { specificNamedThing } from "../service";
answered Nov 20 at 16:03
Fenton
151k42285309
So if there is no default export, is 'import default' treated as 'import *'? In my example above I have no default export, but my first import statement works, and it seems to act like an 'import *'.
– Brandon McAlees
Nov 20 at 16:11
As far as I'm aware, it is invalid to use import default if there is no export default. It should throw an exception.
– Fenton
Nov 20 at 16:13
1
@Fenton it doesn't throw an exception for me, just returns undefined.
– George
Nov 20 at 16:14
I think I found out why it works for me. We use Babel to transpile our code and when turning source maps off in the chrome debugger, all our import statements are converted to Webpack requires. Makes sense why I wasn't able to find anything online. Thanks for the help!
– Brandon McAlees
Nov 20 at 16:54
add a comment |
up vote
3
down vote
accepted
If you are importing the default, there has to be a default.
In general, the community appears wary of default exports at the moment as they seem to be less discoverable (I have no specific citation, but I've watched the conversation!)
If you are working in a team, whatever they say is the correct answer, of course!
So without a default, you need to use:
import * as service from "../service";
Or choose a specific thing:
import { specificNamedThing } from "../service";
answered Nov 20 at 16:03
Fenton
151k42285309
So if there is no default export, is 'import default' treated as 'import *'? In my example above I have no default export, but my first import statement works, and it seems to act like an 'import *'.
– Brandon McAlees
Nov 20 at 16:11
As far as I'm aware, it is invalid to use import default if there is no export default. It should throw an exception.
– Fenton
Nov 20 at 16:13
1
@Fenton it doesn't throw an exception for me, just returns undefined.
– George
Nov 20 at 16:14
I think I found out why it works for me. We use Babel to transpile our code and when turning source maps off in the chrome debugger, all our import statements are converted to Webpack requires. Makes sense why I wasn't able to find anything online. Thanks for the help!
– Brandon McAlees
Nov 20 at 16:54
add a comment |
up vote
3
down vote
accepted
up vote
3
down vote
accepted
If you are importing the default, there has to be a default.
In general, the community appears wary of default exports at the moment as they seem to be less discoverable (I have no specific citation, but I've watched the conversation!)
If you are working in a team, whatever they say is the correct answer, of course!
So without a default, you need to use:
import * as service from "../service";
Or choose a specific thing:
import { specificNamedThing } from "../service";
answered Nov 20 at 16:03
Fenton
151k42285309
If you are importing the default, there has to be a default.
In general, the community appears wary of default exports at the moment as they seem to be less discoverable (I have no specific citation, but I've watched the conversation!)
If you are working in a team, whatever they say is the correct answer, of course!
So without a default, you need to use:
import * as service from "../service";
Or choose a specific thing:
import { specificNamedThing } from "../service";
answered Nov 20 at 16:03
Fenton
151k42285309
answered Nov 20 at 16:03
Fenton
151k42285309
answered Nov 20 at 16:03
Fenton
151k42285309
answered Nov 20 at 16:03
Fenton
151k42285309
151k42285309
So if there is no default export, is 'import default' treated as 'import *'? In my example above I have no default export, but my first import statement works, and it seems to act like an 'import *'.
– Brandon McAlees
Nov 20 at 16:11
As far as I'm aware, it is invalid to use import default if there is no export default. It should throw an exception.
– Fenton
Nov 20 at 16:13
1
@Fenton it doesn't throw an exception for me, just returns undefined.
– George
Nov 20 at 16:14
I think I found out why it works for me. We use Babel to transpile our code and when turning source maps off in the chrome debugger, all our import statements are converted to Webpack requires. Makes sense why I wasn't able to find anything online. Thanks for the help!
– Brandon McAlees
Nov 20 at 16:54
add a comment |
So if there is no default export, is 'import default' treated as 'import *'? In my example above I have no default export, but my first import statement works, and it seems to act like an 'import *'.
– Brandon McAlees
Nov 20 at 16:11
As far as I'm aware, it is invalid to use import default if there is no export default. It should throw an exception.
– Fenton
Nov 20 at 16:13
1
@Fenton it doesn't throw an exception for me, just returns undefined.
– George
Nov 20 at 16:14
I think I found out why it works for me. We use Babel to transpile our code and when turning source maps off in the chrome debugger, all our import statements are converted to Webpack requires. Makes sense why I wasn't able to find anything online. Thanks for the help!
– Brandon McAlees
Nov 20 at 16:54
So if there is no default export, is 'import default' treated as 'import *'? In my example above I have no default export, but my first import statement works, and it seems to act like an 'import *'.
– Brandon McAlees
Nov 20 at 16:11
So if there is no default export, is 'import default' treated as 'import *'? In my example above I have no default export, but my first import statement works, and it seems to act like an 'import *'.
– Brandon McAlees
Nov 20 at 16:11
As far as I'm aware, it is invalid to use import default if there is no export default. It should throw an exception.
– Fenton
Nov 20 at 16:13
As far as I'm aware, it is invalid to use import default if there is no export default. It should throw an exception.
– Fenton
Nov 20 at 16:13
1
1
@Fenton it doesn't throw an exception for me, just returns undefined.
– George
Nov 20 at 16:14
@Fenton it doesn't throw an exception for me, just returns undefined.
– George
Nov 20 at 16:14
I think I found out why it works for me. We use Babel to transpile our code and when turning source maps off in the chrome debugger, all our import statements are converted to Webpack requires. Makes sense why I wasn't able to find anything online. Thanks for the help!
– Brandon McAlees
Nov 20 at 16:54
I think I found out why it works for me. We use Babel to transpile our code and when turning source maps off in the chrome debugger, all our import statements are converted to Webpack requires. Makes sense why I wasn't able to find anything online. Thanks for the help!
– Brandon McAlees
Nov 20 at 16:54
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%2f53396886%2fdifference-between-import-as-import-default-as%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
Possible duplicate of When should I use curly braces for ES6 import?
– Pete
Nov 20 at 16:16
I didn't see the import of: { default as 'xxx' } explained in that question. Still unsure of exactly what the differences are here.
– Brandon McAlees
Nov 20 at 16:21
It's the bottom one in the accepted answer, starts with We can also assign them all different names when importing:
– Pete
Nov 21 at 10:03