Dot notation in React imports

722
February 13, 2020, at 04:50 AM

I have been seeing many react frameworks recommend dot notation while importing.
e.g. instead of

import Y from 'X/Y';  
<Y />  

they would use:

import X from 'X';  
<X.Y />

From what I've tested, they both work.
My question is what, if any, are the differences?
Especially if, lets say, you only need to use Y, will the second notation import unnecessary data since you don't need X? Would you only use the second notation in cases when you would use both X and Y, and not just Y?

Answer 1

These are not identical, but they may sometimes have an identical result.

import Y from 'X/Y'

This says import the file at path X/Y and store the default export as the local constant Y. X may be an installed npm module, in which case you're drilling into its directory structure to find a particular file.

import X from 'X'

This says import the file at path X and store the default export as the local constant X. It's importing a different file entirely.

Now, if X is something like:

import Y from './Y'
export default {
  other: { stuff: true },
  Y,
}

Then you could access X.Y easily. But there is no guarantee that it's implemented that way.

When you import a module without drilling into it, you are import the structure that the module author intended to expose. This may be quite different from the directory structure of the implementation of the module. In theory, an internal refactoring that doesn't change the exported interface at all could break your code if you import it's internal files.

This is why you should follow a module's directions about how to import it.

Now let's say this was your module:

export const Y = 'I am Y'
export default 'I am the default export of X'

Then you can import this like so:

import X from 'X'   // X === 'I am the default export of X'
import {Y} from 'X' // Y === 'I am Y' 
console.log(X.Y)    // undefined. Y is not a property of the default export.
READ ALSO
Inject JavaScript files inside Templates or HTML with webpack

Inject JavaScript files inside Templates or HTML with webpack

Let's say I have a server (Node & Express for example) which serves HTML pages to clients based on templates files (as pug, ejs, handlebars, twig, marko

809
How do I override a JQuery (Datatable RowGroup) library function?

How do I override a JQuery (Datatable RowGroup) library function?

I'm rather new to Javascript, and the scoping syntax definitely confuses me when looking at open source libraries especially when it has a lot of advanced concepts like closure, anonymous functions, etcThe Jquery Datatables RowGroup is a a bit buggy with Responsiveness,...

769
How to fix 401 after attempt to override existing POST?

How to fix 401 after attempt to override existing POST?

I'm receiving 401 error when trying to override existing POST with new dataIt throws 401

15147
Dynamic Object Reference in Object.keys(obj) [duplicate]

Dynamic Object Reference in Object.keys(obj) [duplicate]

How can I iterate through an ObjectKeys(obj) where the obj might change (and thus need to be a variable that changes)?

725