.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 #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:

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

Then, specify:

Operating system:
macOS Sierra
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

Didn't knew you could add that to .env, I'm using it in a custom npm script and it still works fine after updating to 1.0.0:

"scripts": {
  ...
  "dev": "cross-env NODE_PATH=./src npm run start"
}

I've got a problem with paths in tests by the way but I don't know if that's related to NODE_PATH or to the updated version of jest, I will report as soon as I could find where exactly the problem is.

@ingro

This is a real deal-breaker on upgrades to apps that use this form of importing. Changing an entire app to use relative paths will be tiresome. I tried @ingro's suggestion but that didn't work for me; still getting module not found errors.

Interesting. Anyone looked yet into why this happens?

Same for me. Have NODE_PATH=./ in .env and imports like src/components not working anymore.

Thanks for confirming. Would be good if somebody could take a peek in the source into why. I'd expect it to work.

Seems unrelated to ModuleScopePlugin. Will investigate more.

As stated above I have only problems with tests, moving the __tests__ folder from the root to src (since now only tests inside src will run) returns me this weird error (my tests also relies on NODE_PATH):


 FAIL  src\__tests__\modules\stats\stats.test.js
  ● Test suite failed to run

    Cannot find module 'package.json'

      at Function.Module._resolveFilename (module.js:470:15)
      at Function.Module._load (module.js:418:25)
      at Module.require (module.js:498:17)
      at require (internal/module.js:20:19)

If I change imports in tests to be relative the error disappear.

This doesn't seem related to jest because I created a small repo to try to reproduce this error without cra but it's working fine there.

Can you show the test code? Does it import package.json?

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.

I could've messed it up when refactoring something although I'd expect our E2E tests to catch that.

I don't believe any of our e2e tests use the .env file, only the feature itself.

@gaearon

Sure @gaearon , no package.json imported:

// src/__tests__/modules/statistiche/statistiche.test.js
import { actions } from 'modules/statistiche/actions/statistiche';

describe('Statistiche actions', () => {
    it('refreshAll action', () => {
        expect(actions.refreshAll()).toMatchSnapshot();
    });

    // ...
});

Also the imported file is pretty basic:

// src/modules/statistiche/actions/statistiche.js

const REFRESH_ALL   = 'statistiche/REFRESH_ALL';
// ...

function refreshAll() {
    return {
        type: REFRESH_ALL
    };
}

@ingro

@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. 😄

@gaearon

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

react-scripts@1.0.1 should be out with a fix for both issues.
Can you please verify it helps?

@gaearon

Thanks @gaearon , now my tests are running again :D

Looks like it still not working. In the https://github.com/CodinCat/cra-env-issue exist one App.test.js that testing only App.js, not index.js that contains issue. I have forked this repo into https://github.com/eddig/cra-env-issue.git, update react-scripts to 1.0.2 and fixed the foo/bar component requiring. Now error appears in App.js.
I think the problem with NODE_PATH appears because dotenv not override environment variables, that is already set (in my environment it is /usr/lib/nodejs:/usr/lib/node_modules:/usr/share/javascript).

Environment

node --version
v6.10.3
yarn --version
0.24.5
Ubuntu 16.04 LTS

@eddig

@eddig,
I can agree, it won't work if NODE_PATH is set in your system.
I found this: https://github.com/motdotla/dotenv#what-happens-to-environment-variables-that-were-already-set, so dotenv variables are skipped in your case.

I'd like to ask @gaearon
should we override environment variables that were already set?

Please don't override already set variables. We set these on our Jenkins jobs and allow for each job to set up its own environment whilst keeping a .env file in the repo for development.

@will-stone

@will-stone, I agree but it can be an option for file .env.override

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.

@FezVrasta

@FezVrasta do you use react-app-rewired?
If so, it's not a problem of CRA. Cause it's known issue of it.

I never got cross-env working, nor any combination of using NODE_PATH. Instead, I put a package.json instead of my src folder that had the contents { "name": "src" }. This finally got it working.

src
├── Login
│   └── index.js
├── auth.js
└── package.json

$ cat src/package.json
{ "name": "src" }

$ head src/Login/index.js
import React, { Component } from 'react'
import auth from 'src/auth'
...

@tamsanh

@tamsanh lol. Interesting hack tho :D
Dunno, since NODE_PATH=./src in cross-env or .env works for me just fine.

I go in the following way (scripts/webpack.config.dev.js):

const paths = require('./paths');
module.exports = {
  resolve: {
    alias: { '@': paths.appSrc }
  }
};

@yarbshk

@yarbshk that requires ejecting. However I agree that using an "@" symbol is nice, and would put the tool on par with Vue; helping users coming from there.

@tamsanh

@tamsanh I really like your approach because I really don't like having to define environment variables everywhere. But I hit an error after defining the package.json as you did, where src/Login/index.js couldnt be resolved when running yarn start. When running eslint, it seemed to assume that every import statement in any file under src was also a package and so threw a ton of errors. Any other details you can provide about how you got your solution working?

However I agree that using an "@" symbol is nice, and would put the tool on par with Vue; helping users coming from there.

If this is valuable why don’t you file an issue for this? 🙂 Maintainers almost never read closed issues because there is too much noise. If feature requests happen in closed issues we won’t see your feature requests.

I’ll lock this issue because it is going off-topic. You are welcome to file more specific issues with your problems and suggestions, but using an old bug for a completely unrelated discussion just serves to confuse future readers coming here from Google etc.

Thanks!

Navigation Menu

Repository navigation

.env NODE_PATH is not working in v1.0.0 #2230

Description

Expected behavior

Actual behavior

Environment

Reproducible Demo

15 remaining items

Environment

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

.env NODE_PATH is not working in v1.0.0 #2230

Description

Description

Expected behavior

Actual behavior

Environment

Reproducible Demo

Activity

ingro commented on May 19, 2017

will-stone commented on May 19, 2017

gaearon commented on May 19, 2017

RIP21 commented on May 19, 2017

gaearon commented on May 19, 2017

Timer commented on May 19, 2017

ingro commented on May 19, 2017

gaearon commented on May 19, 2017

Timer commented on May 19, 2017

gaearon commented on May 19, 2017

Timer commented on May 19, 2017

ingro commented on May 19, 2017

gaearon commented on May 19, 2017

ingro commented on May 19, 2017

15 remaining items

gaearon commented on May 19, 2017

ingro commented on May 19, 2017

eddig commented on May 21, 2017

Environment

ApacheEx commented on May 21, 2017

will-stone commented on May 21, 2017

ApacheEx commented on May 21, 2017

gaearon commented on May 21, 2017

RIP21 commented on Sep 5, 2017

tamsanh commented on Dec 28, 2017

RIP21 commented on Dec 28, 2017

yarbshk commented on Jan 17, 2018

will-stone commented on Jan 18, 2018

asadakbar commented on Jan 23, 2018

gaearon commented on Jan 23, 2018

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions