Create-react-app: Respect NODE_PATH environment variable

[tp]

I wanted to try out create-react-app on our internal monorepo, which is basically structured into 2 folders: "apps" and "components".

The "apps" contain just an entry index.js file and their build/transpile configuration and import a root component from the components directory.

This is currently solved by directing imports using NODE_PATH environment variable to make tools look into the components folder (so that you can write import Button from 'ns-button' instead of import Button from '../../../components/ns-button).

Personally I would feel that this would be worthwhile to support so this project could work with a wide variety of "non-standard" project layouts.

[gaearon]

Do you mean that you read NODE_PATH and plug it somewhere into Webpack config? Or do you use something other than Webpack?

[tp]

Yes, from my current understanding I think it would be sufficient to make Webpack aware of any paths set in NODE_PATH.

Currently I am using a custom setup using browserify, so I was interested in checking this approach. (But since I have not yet "ejected" I didn't fiddle with the Webpack config yet.)

[mxstbr]

We do this in react-boilerplate with the webpack option, not sure what the up and/or downsides of this approach are:

resolve: {
  modulesDirectories: ['app', 'components', 'node_modules']
}

Ref: https://webpack.github.io/docs/configuration.html#resolve-modulesdirectories

[lacker]

Depending on how we handle testing it might not be sufficient to make Webpack know about it - e.g. if Jest is using a non-webpack build process we would have to make sure Jest can handle NODE_PATH too. cc @cpojer

[mxstbr]

True, but I don't fully understand why we wouldn't use our standard build system for our testing setup though. That sounds really fragile and prone to breakage if we change anything… (disclaimer: I haven't read that discussion)

[gaearon]

It sounds sort of fragile but it also helps make sure we don’t deviate _way_ too much into webpackisms.

[gaearon]

Are there any precedents of major tools using NODE_PATH for this?

[lacker]

By default node itself uses NODE_PATH for this so that is a major tool that uses NODE_PATH ;-) I think it actually predates npm and node_modules as an import resolution mechanism.

https://nodejs.org/api/cli.html#cli_node_path_path

[cpojer]

(@lacker: Jest does handle NODE_PATH just fine. It also has a moduleDirectories option).

[gaearon]

OK, sounds reasonable. I’d be happy to review a PR adding this.

[gaearon]

NODE_PATH env variable is honored in 0.4.0.
See the release notes!

[JigneshVasoya3292]

Does this solution work for Windows? I tried adding NODE_PATH to 'start' command as suggested, but in windows you can not set path like this I believe.

[Timer]

You can set NODE_PATH in your .env file for cross platform support, or install cross-env and use that!

[headerali]

resolve: {
    // This allows you to set a fallback for where Webpack should look for modules.
    // We placed these paths second because we want `node_modules` to "win"
    // if there are any conflicts. This matches Node resolution mechanism.
    // https://github.com/facebookincubator/create-react-app/issues/253
    modules: ['node_modules', 'src', paths.appNodeModules, `src/${process.env.IMPORT_DIR || 'sk'}`].concat(
      // It is guaranteed to exist because we tweak it in `env.js`
      process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
    ),
    // These are the reasonable defaults supported by the Node ecosystem.
    // We also include JSX as a common component filename extension to support
    // some tools, although we do not recommend using it, see:
    // https://github.com/facebookincubator/create-react-app/issues/290
    extensions: ['.js', '.json', '.jsx'],
    alias: {
      // Support React Native Web
      // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
      'react-native': 'react-native-web',
    },
    plugins: [
      // Prevents users from importing files from outside of src/ (or node_modules/).
      // This often causes confusion because we only process files within src/ with babel.
      // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
      // please link the files into your node_modules/ and let module-resolution kick in.
      // Make sure your source files are compiled, as they will not be processed in any way.
      new ModuleScopePlugin(paths.appSrc),
    ],
  },

Above is the code from "webpack.config.dev.js", in which I am trying to configure webpack for my project, Using Node versioned under 8.0.0 it works fine, but Now upgrading Node to 8.0.0+ it crashes saying:

PS D:\RepoClones\mk.web.pos> yarn start
yarn run v1.3.2
$ node scripts/start.js
D:\RepoClones\proj\config\webpack.config.dev.js:81
      process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
                           ^

TypeError: Cannot read property 'split' of undefined
    at Object.<anonymous> (D:\RepoClones\mk.web.pos\config\webpack.config.dev.js:81:28)
    at Module._compile (module.js:569:30)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Module.require (module.js:513:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (D:\RepoClones\mk.web.pos\scripts\start.js:31:16)
    at Module._compile (module.js:569:30)
    at Object.Module._extensions..js (module.js:580:10)
    at Module.load (module.js:503:32)
    at tryModuleLoad (module.js:466:12)
    at Function.Module._load (module.js:458:3)
    at Function.Module.runMain (module.js:605:10)
    at startup (bootstrap_node.js:158:16)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Kindly help me with this.
Thanks in advance.