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.

Sign up for GitHub

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

Jump to bottom

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

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 28 additions & 0 deletions packages/react-scripts/template/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.”


```js
import Banana from 'fruits/Banana'; // fruits is a subdirectory of src
```

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.

NODE_PATH=./src npm run build
NODE_PATH=./src npm test
```

If you use Cmd on Windows:

```js
NODE_PATH=./src&&npm start
NODE_PATH=./src&&npm run build
NODE_PATH=./src&&npm test
```

Note that lack of whitespace on Windows is intentional.

### `DangerButton.js`


Expand Down