Create-react-app: Support src directory as webpack resolve.modules

[haraldrudell]

Much code that is pasted into Create React App assumes that the src directory is resolved so that filename and module references becomes the same.

people want to write
import 'components/Accordion'
instead of
import './components/Accordion'
because then at some point, components could be a module.
Drawback is that the thing won’t run no more unless using webpack resolver.

The suggestion is to modify webpack.config.js and such to:

  resolve: {
    modules: [
      path.resolve('src'),
      path.resolve('module_override'),
      'node_modules', ….

(using the paths object, obviously)

from:

  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', paths.appNodeModules].concat(

[gaearon]

You can already do this by putting

NODE_PATH=src

in a file called .env.

For a more permanent solution you can watch https://github.com/facebookincubator/create-react-app/issues/1333.

[headerali]

@gaearon Thank you for the solution you provided above, But working with create-react-app and react-scripts, these .env and webpack.config.dev.js is in the node_modules directory. So we cannot update these with the entry NODE_PATH = src you mentioned above. Do create-react-app has a solution like, developer may provide the list of directories he want to include in the search for modules. In package.json or something.

[sanderpost]

@haraldrudell you can place the .env file in the root of you application (next to package.json). It will be resolved automagically by the scripts. Also you can put any other REACT_APP_{yourvariable} prepended variables in the .env file and they will be accessible in your src using process.env.REACT_APP_{yourvariable} in your code.