I'm trying to figure out an issue I have with ES6 modules import.

This is a very simplified version of what I'm attempting to do. My current file structure is much more plicated with nested folders.

I have 2 ReactJS ponents:

/buttons
  /MyComponent1.js
  /index.js
/texts
  /MyComponent2.js
  /index.js

/index.js

My files look something like this:

I'm importing the MyComponent2 from the root index.js file which is the entry-point of my package.

MyComponent1.js

import MyComponent2 from '../../';

export default () => (
  <div><MyComponent2 /></div>
);

MyComponent2.js

export default () => (
  <div>Hello world</div>
);

My buttons/index.js and texts/index.js files export all ponents in their own folder:

buttons/index.js

export { default as MyComponent1 } from './MyComponent1'; 

texts/index.js

export { default as MyComponent2 } from './MyComponent2';

And my root index.js export all my folders to make them publicly available. It's my entry-point:

export * from './buttons';
export * from './texts';

So when I import MyComponent2 in MyComponent1 from the root index.js file, it's undefined. When I import it from ./MyComponent2.js, it's defined. When I import the entire package in another project and import MyComponent2 from the root index.js file, it's defined.

It's mind-blowing and I don't understand why I can't import MyComponent2 from the root index.js file.

I need to do that because I have a set of hundred of ponents nested in different folder and I want to make them all available from this entry-point file.

Can someone tell me what is happening and how to make this possible?

Thanks

I'm trying to figure out an issue I have with ES6 modules import.

This is a very simplified version of what I'm attempting to do. My current file structure is much more plicated with nested folders.

I have 2 ReactJS ponents:

/buttons
  /MyComponent1.js
  /index.js
/texts
  /MyComponent2.js
  /index.js

/index.js

My files look something like this:

I'm importing the MyComponent2 from the root index.js file which is the entry-point of my package.

MyComponent1.js

import MyComponent2 from '../../';

export default () => (
  <div><MyComponent2 /></div>
);

MyComponent2.js

export default () => (
  <div>Hello world</div>
);

My buttons/index.js and texts/index.js files export all ponents in their own folder:

buttons/index.js

export { default as MyComponent1 } from './MyComponent1'; 

texts/index.js

export { default as MyComponent2 } from './MyComponent2';

And my root index.js export all my folders to make them publicly available. It's my entry-point:

export * from './buttons';
export * from './texts';

So when I import MyComponent2 in MyComponent1 from the root index.js file, it's undefined. When I import it from ./MyComponent2.js, it's defined. When I import the entire package in another project and import MyComponent2 from the root index.js file, it's defined.

It's mind-blowing and I don't understand why I can't import MyComponent2 from the root index.js file.

I need to do that because I have a set of hundred of ponents nested in different folder and I want to make them all available from this entry-point file.

Can someone tell me what is happening and how to make this possible?

Thanks

• javascript
• reactjs
• ecmascript-6

• 1 Try simple to export: export default MyComponent1 To import: import MyComponent1 from './index' – Artem Kolodko Commented Oct 6, 2017 at 8:34
• I found importing to vars then exporting separately worked. This way didn't. – Sinan Guclu Commented Oct 6, 2017 at 9:33

3 Answers 3

Okay, took me a while to figure out what is happening. Please take a look at the sandbox i've setup - https://codesandbox.io/s/nk0qmo096j

I've tried to keep the folder/module structure similar to what you've described. Please look through how the folder/modules are structured before you continue reading.

When you run the code in the sandbox, take a look at the console. You'll see something like this -

So let me try to explain why what you're trying to do is not working

1. buttons/MyComponent is the first file to be "exported" (since its at the bottom of the dependency chain; Project/index -> ponents/index -> buttons/index -> buttons/MyComponent)

Note that ponents/index has not been exported yet, so it will return undefined

2. Then buttons/index is exported, followed by texts/index

3. Then buttons/MyComponent is rendered; just before it is rendered i manually require ponents/index and it is now defined so returns some defined value

In essence, when your MyComponent1 is trying to import MyComponent2 via the index file, the index file has not been exported yet so it returns undefined. To work around this, you have to require MyComponent2 from within MyComponent1's render method.

you can import all the ponents from the respective ponent files and then assign them to a variable in the root ponent and then export all of them as objects.

import MyComponent1 from './buttons/index'

import MyComponent2 from './texts/index'

export {MyComponent1, MyComponent2}

to import this ponents in another file or project. you could import only one them using object destructuring.

import {MyComponent1} from 'index.js'

import {MyComponent2} from 'index.js'

In my case, I had an old js file that the IDE imported instead of the updated ts file. so if your module file is module.js make sure there isn't a piled old module.js in the same directory