Dot notation in React imports

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.