Create-react-app: Absolute Path Imports

[arashkiani]

According to the links below I understand .env with NODE_PATH=src in it, allows the react app to take advantage of Absolute Path Imports without ejecting.

so far I've managed to load REACT_APP_TEST_VAR in my process.env which indicates the file is being loaded ! but i cant import anything from src
or src/components folder

So far I've tried moving the NODE_PATH into .env && .env.development restarting node and webpack, rebooting the system

• https://medium.com/@ktruong008/absolute-imports-with-create-react-app-4338fbca7e3d
• https://medium.com/@tacomanator/environments-with-create-react-app-7b645312c09d
• https://fdp.io/blog/2018/01/18/setting-up-absolute-paths-in-create-react-app/
• https://github.com/facebook/create-react-app/issues/253
• https://github.com/facebook/create-react-app/issues/2230
• https://github.com/facebook/create-react-app/blob/25184c4e91ebabd16fe1cde3d8630830e4a36a01/packages/react-scripts/config/env.js#L61

Environment

Environment:
OS: Linux 4.15
Node: 9.10.0
Yarn: 1.7.0
npm: 6.4.0
Watchman: Not Found
Xcode: N/A
Android Studio: Not Found

Packages: (wanted => installed)
react: ^16.4.2 => 16.4.2
react-dom: ^16.4.2 => 16.4.2
react-scripts: ^1.1.5 => 1.1.5

Steps to Reproduce

1. Add .env with NODE_PATH
2. in any component expect to be able to import from NODE_PATH specified path
3. react complain "Module not found: Can't resolve" in child component

[bugzpodder]

Where are you seeing this error? in npm start?

[arashkiani]

after npm/yarn start, everywhere really... its just not searching the path provided in NODE_PATH

[bugzpodder]

Can you point me to your code?

[kylebebak]

Can confirm this behavior, I created a project with create-react-app about 15 minutes ago and reproduced it.

Node v8.11.4
OSX 10.12.2

Here's my package.json:

~
{
"name": "my-app",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.4.2",
"react-dom": "^16.4.2",
"react-scripts": "1.1.5"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
}
~

Steps to repro:

1. npx create-react-app my-app
2. Create index.js in src/components/Button/index.js
3. Import Button in App.js: import Button from 'components/Button'
4. Create .env file in project root (sibling of package.json) with NODE_PATH=src/
5. npm start

Failed to compile.

./src/App.js
Module not found: Can't resolve 'components/Button' in '/Users/kylebebak/Code/Work/Beam/my-app/src'

Just for more context, here's src/components/Button/index.js:

~~~js
import React from 'react'
import PropTypes from 'prop-types'

const Button = ({ text = 'buttonText' }) => {
return (

{text}

)
}

Button.propTypes = {
text: PropTypes.string,
}

export default Button
~~~

It's worth mentioning that if I change the "start" script in package.json to "start": "NODE_PATH=src/ react-scripts start",, then webpack or whatever CRA uses under the hood has no problem finding the Button module.

In other words, passing the env var through the package.json script works, while putting it into the .env file doesn't. This runs counter to the docs, or at least what is mentioned in other issues, so it seems like a bug.

[badrinath389]

It is not taking properly NODE_PATH=src and NODE_PATH=src/ also properly and showing error like this for me
OS: Windows 10
NodeV: 10.1.0

./src/modules/auth/login.js Syntax error: F:/Personal Studies/React/sample-react-ui/src/modules/auth/login.js: Unexpected token (2:20) 1 | import React, { Component } from 'react'; 2 | import {MainHeader} 'modules/mainHeader';

[Timer]

Hi everyone!

If placing NODE_PATH=src does not work on your system that means the variable is already set on your system.
This is generally considered harmful and should be unset. If it's set for a reason, you must adjust your package.json's build, test, and start scripts to look like this: cross-env NODE_PATH=src react-scripts <...>.

[hmeerlo]

I have the same issue as others mentioned but NODE_PATH is not set on my system yet. The import is resolved successfully but it appears the babel-loader is not run on the import because it complains about parsing errors.

So my setup is a .env with NODE_PATH='../../packages'

in the packages dir there is a dir called @manakin with a subdir core and under that a reducer.js

in my app I have an import import { reducer as coreReducer } from '@manakin/core/reducer';

npm start fails with Module parse failed: Unexpected token (10:16)

so the import is resolved successfully, but the babel-loader isn't run it seems. Is this expected behaviour?

[matt-schrader]

Hi everyone!

If placing NODE_PATH=src does not work on your system that means the variable is _already set_ on your system.
This is generally considered harmful and should be unset. If it's set for a reason, you must adjust your package.json's build, test, and start scripts to look like this: cross-env NODE_PATH=src react-scripts <...>.

This doesnt seem to be true. I have just created a fresh react app and am getting these same errors. NODE_PATH is not set on my system, and putting it in .env does not resolve absolute imports.

[RafyBrens]

Any solution about this?

[mickatron]

Hi everyone!
If placing NODE_PATH=src does not work on your system that means the variable is _already set_ on your system.
This is generally considered harmful and should be unset. If it's set for a reason, you must adjust your package.json's build, test, and start scripts to look like this: cross-env NODE_PATH=src react-scripts <...>.

This doesnt seem to be true. I have just created a fresh react app and am getting these same errors. NODE_PATH is not set on my system, and putting it in .env does not resolve absolute imports.

I can confirm the same on my system, NODE_PATH is not set although the imports are still not resolving. Using cross-env NODE_PATH=src does not fix the issue.

I'm actually migrating from a CRA-TS(wmonks) app to cra 2.x (typescript). NODE_PATH worked when we were using CRA-TS, although there was also a "rootDir": "src" directive in tsconfig.json for that implementation. Migrated the codebase to CRA 2.x and I can't seem to get absolute paths working.

EDIT: With more investigation my issue seems to be reserved to the typescript version of CRA 2.x. I can get non typescript version working and it seems most of my error are being reported by the ts compiler. To get the typescript version working I'm sure it's just another setting I'm missing in my tsconfig.

[unzico]

If you're still looking for a solution, have a look at https://github.com/facebook/create-react-app/issues/5118#issuecomment-439665737

[arashkiani]

@unzico your solution suggest using typescript + other libraries which was not the intend of reporting this issue!

[arashkiani]

It’s sad that the maintainers decided to close this issue instead of offering a solution