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

Document existing work-around for absolute imports. #693

Closed
wants to merge 1 commit into from
Closed

Document existing work-around for absolute imports. #693

wants to merge 1 commit into from

Conversation

amandapouget
Copy link

Following the suggestion of @gaearon (#476 (comment)).

This documents an existing work-around for people who want to use absolute paths. In the future, we may develop a feature that supports absolute paths in a better way. The purpose of this PR is just to document the existing stop-gap measure so that others do not have to go on an odyssey to figure it out. :-)

@facebook-github-bot
Copy link

Thank you for your pull request and welcome to our community. We require contributors to sign our Contributor License Agreement, and we don't seem to have you on file. In order for us to review and merge your code, please sign up at https://code.facebook.com/cla - and if you have received this in error or have any questions, please drop us a line at cla@fb.com. Thanks!

@ghost ghost added the CLA Signed label Sep 21, 2016
@@ -205,6 +205,34 @@ class Button extends Component {
export default Button; // Don’t forget to use export default!
```

To import your own modules into other files, you can use relative paths by default. For example:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this would work better as a separate section called “Absolute Imports”. I would put it right before “Can I Use Decorators?” so that it’s there, but doesn’t distract from the usual way of doing things.

```js
import Banana from '../../Banana';
```
You can also enable absolute paths by adding a NODE_PATH environment variable. This is a bit of a stop-gap measure for now. Here is an example absolute import and the commands you would need to run for it to work:
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let’s put NODE_PATH into backticks so that it’s highlighted.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let’s expand “This is a bit of a stop-gap measure for now.” into “We don’t recommend this at the moment, and we encourage you to use relative paths for your projects if you can. However, this can be used as a stop-gap measure if you’re porting a large project to Create React App. In the future, we intend to offer a better way of handling absolute imports.”

@ghost
Copy link

ghost commented Sep 21, 2016

Thank you for signing our Contributor License Agreement. We can now accept your code for this (and any) Facebook open source project. Thanks!

If you use Bash on OS X or Linux:

```js
NODE_PATH=./src npm start
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe let’s recommend doing this inside package.json scripts instead?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If we do that, we might as well tell people to npm install --save-dev cross-env and use cross-env NODE_PATH=src react-scripts start and such so that we don’t need separate instructions for Bash and Cmd.

@ayrton
Copy link
Contributor

ayrton commented Sep 22, 2016

We should probably also document that we need to configure flow to follow these imports properly:

[options]
  module.name_mapper='^src\/\(./foo*\)$' -> '<PROJECT_ROOT>/src/\1'

Where ./foo is the specified value of NODE_PATH. If not flow will fail for all components that use absolute imports.

@gaearon
Copy link
Contributor

gaearon commented Sep 30, 2016

@mandysimon88

Thanks for your work on this. Do you think you could find some time to address the review comments?

@gaearon
Copy link
Contributor

gaearon commented Nov 20, 2016

Closing as review comments have not been addressed, and we are going with a different strategy for this anyway in #1065. Thanks for your time!

@gaearon gaearon closed this Nov 20, 2016
markerikson added a commit to markerikson/project-minimek that referenced this pull request Nov 22, 2016
There's been numerous requests for Create-React-App to support having
imports resolved relative to the "src" folder.  The semi-documented
solution is to have a NODE_PATH environment variable, which will be
used in the resolution process.  It's apparently also possible to
specify that variable in a file named ".env".

References:

facebook/create-react-app#476
facebook/create-react-app#693
facebook/create-react-app#741
markerikson added a commit to markerikson/project-minimek that referenced this pull request Nov 22, 2016
There's been numerous requests for Create-React-App to support having
imports resolved relative to the "src" folder.  The semi-documented
solution is to have a NODE_PATH environment variable, which will be
used in the resolution process.  It's apparently also possible to
specify that variable in a file named ".env".

References:

facebook/create-react-app#476
facebook/create-react-app#693
facebook/create-react-app#741
@lock lock bot locked and limited conversation to collaborators Jan 22, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants