Absolute Path Imports

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

[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 <...>.

[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:

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


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

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.