Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support for dynamically exported components #2595

Closed
jtdman opened this issue Jun 22, 2017 · 5 comments
Closed

Support for dynamically exported components #2595

jtdman opened this issue Jun 22, 2017 · 5 comments

Comments

@jtdman
Copy link

jtdman commented Jun 22, 2017

Using atomic design and @diegohaz arc boilerplate, you are able to reference components that are located anywhere in the components subdirectories i.e. atoms, molecules, organisms etc. For reference here is the link: https://github.com/diegohaz/arc/wiki/Atomic-Design#do-not-worry
Per the link:
This is possible because all components are dynamically exported on src-example/components/index.js and imported in a way that Atomic Design structure doesn't matter:

import { Input, Label, Field, HomePage, PageTemplate } from 'components'

Has anyone been able to get the same functionality with create-react-app?

I have managed to get rid of the relative paths using .env and specifying NODE_PATH=src but I still have to explicitly include the entire subdirectory structure for the component.

Thanks

@gaearon
Copy link
Contributor

gaearon commented Jun 22, 2017

I don't recommend doing this via index.js. It means code splitting won't work because everything ends up in the same bundle.

At Facebook, we use a system called "haste" that lets you import any file by its unique name without relative paths. I'm open to supporting it as an opt-in in CRA projects, but somebody would need to write a Webpack plugin for it. Jest already supports it.

@wtgtybhertgeghgtwtg
Copy link
Contributor

wtgtybhertgeghgtwtg commented Jun 22, 2017

Jest has its own implementation of Haste. I thought Facebook dropped Haste.

@gaearon
Copy link
Contributor

gaearon commented Jun 22, 2017

Facebook is actively using Haste in products. I think node-haste is just some old tangentially project. AFAIK the implementation we use is jest-haste-map.

@Secretmapper
Copy link

I'm achieving this by ejecting my app and manually resolving 'arc' paths (atoms, molecules, organisms, etc.) into resolve.modules via the web pack config. This makes everything in the 'arc' paths absolute. It does not do the same thing as diegohaz' arc (where it's dynamically exported in a single file) but it provides the advantage of code splitting. It basically adds @providesModule to all directories in a subdirectory (components/containers) in my case.

I wish there was @providesModule support in CRA :)

@gaearon
Copy link
Contributor

gaearon commented Jan 8, 2018

Going to close this as overlapping too much with #1333.

@gaearon gaearon closed this as completed Jan 8, 2018
@lock lock bot locked and limited conversation to collaborators Jan 20, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

4 participants