create-react-app: .env NODE_PATH is not working in v1.0.0

Description

I have NODE_PATH=src in .env, it did work great in v0.9.5. After yarn upgrade react-scripts it doesn’t work now. And I didn’t see any related guide in the v1.0.0 changelog.

(referenced from https://github.com/facebookincubator/create-react-app/issues/2188)

I’ve also tried in a fresh new project and it doesn’t work.

Expected behavior

Should be able to import 'foo/bar' which foo is a folder located in src

Actual behavior

Module not found: Can't resolve 'foo/bar' in '/Users/some/path/src'

Environment

Run these commands in the project folder and fill in their results:

  1. npm ls react-scripts (if you haven’t ejected): v1.0.0
  2. node -v: v7.1.0
  3. npm -v: v3.10.9

Then, specify:

  1. Operating system: macOS Sierra
  2. Browser and version: Chrome 58

Reproducible Demo

https://github.com/CodinCat/cra-env-issue

This is a fresh new project. See /src/index.js:5

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Reactions: 6
  • Comments: 39 (27 by maintainers)

Most upvoted comments

Would you consider adding Webpack alias? I really think that NODE_PATH is just some kind of escape hatch to get rid of relative paths and might lead to some naming conflict. It would be really more convenient If we can have an alias.

I think the idea in Vue webpack template is great: (https://github.com/vuejs-templates/webpack/blob/master/template/build/webpack.base.conf.js)

alias: {
  '@': resolve('src')
}

so you can

import Hello from '@/components/Hello'

and it’s totally optional for users. Anyone who prefer relative paths can simply keep using them and ignore the alias. Of course it doesn’t need to be @, this can be discussed.

Thanks for the suggestion @RIP21 but still not working for me, I was already running tests like this:

"scripts": {
   "test:cra": "react-scripts test --env=jsdom",
   "test": "cross-env NODE_PATH=./src npm run test:cra"
}

I think in this case the best way to do it is to put cross-env NODE_PATH=src before the scripts. As I said before this is a bit hacky anyway.

Okay, the fix for Jest is here: https://github.com/facebook/jest/pull/3616. I’ll see if there’s any way to get in a bandaid fix in this repo until Jest fix gets into a release.

The issue with Jest is unrelated, and caused by a different change in it. I know the cause and will try to fix it today. The repro case by @ingro was very helpful.

in webpack config:

const getClientEnvironment = require('./env');
const paths = require('./paths');

the problem that paths.js will be cached when you include it in the second time. As solution we can remove cache after first reading in env.js

const paths = require('./paths');
delete require.cache[require.resolve('./paths')];

at least works for me.

@gaearon this is karma for #2034 😆

Thanks @gaearon I’ll try to create a repo to show the problem in the afternoon

@ingro We’d need a separate reproducing project to look into this. Not clear why.

@Timer I think I might know why it happens. env.js currently depends on paths.js which reads NODE_PATH before env.js could set it. 😄

Looks like .env isn’t being loaded at all, not that this feature doesn’t work. If I run NODE_ENV=src yarn start this works fine.