Create-react-app: Webpack Alias

[khankuan]

Hi, I'm wondering if create-react-app supports aliasing. I thought that certain top-level folders can be aliased to prevent having a lot of relative paths. Cheers!

[gaearon]

You can put

NODE_PATH=src

in your .env file for this.

Hope it helps!

[abdennour]

@gaearon Thanks ! It works like a charm . I just to want to clarify to community how to import files after adding NODE_PATH=src in .env file.

Assuming you want to import src/components/Post.js inside src/containers/Dashboard.js :

Instead of

import Post from  '../components/Post' 
class Dashboard  //... blahblahbla

It will be :

import Post from  'components/Post' // 👈🏼 <----
class Dashboard  //... blahblahbla

[ashleyphillips-dev2rights]

The problem with using NODE_PATH is, if you want to restructure your project, you have to update all your import statements. Whereas if you can use webpacks aliasing, all you have to do is update the alias. Also '@components' is more convenient than 'src/js/components'.

[SujitGadkari]

In addition to what @ashleyphillips-dev2rights is saying, how can we handle multiple aliases for shared directories like shared components, directories etc using NODE_PATH ?

For example, with webpack I can have aliases set as:

alias: {
  components: path.join('src/shared/components/'),
  utils: path.join('src/shared/utilities/')
}

which makes imports much cleaner, for example:

import Chart from 'components/Chart'; 

[jochienabuurs]

Would be nice if this is supported.

[danyim]

@SujitGadkari Does this actually work with CRA? I haven't been able to get it working.

[SujitGadkari]

@danyim No it doesn't. Currently there is no way of providing custom webpack config for CRA unless you eject the app.

One possible solution is to allow users to provide custom config that gets merged with base CRA webpack config before execution, but I believe @gaearon and his team wants to avoid opening up webpack config for CRA's flexibility in choosing/replacing build tool in future. I do still feel that ability to add aliases is useful enough to implement somehow.

[Runrioter]

Right, It's time to eject it.

• npm run eject
• Add the following code in webpack.config.[dev|prod].js

 alias: {
+     '@': path.resolve(__dirname, '../src'),
       // ...
 },

And you can do this:

import Chart from '@/components/Chart';

[ashleyphillips-dev2rights]

@Runrioter Ejecting is exactly what we are trying to avoid. I understand using something like create-react-app (withuot ejecting) will never suit all use cases, but I would consider aliasing a very common thing which shouldn't mean having to eject to be able to do it. Not ejecting has lots of advantages we want to keep so I prefer to not eject where possible, and aliasing is something that most projects can benefit from.

[danyim]

There is already an alias in CRA for react-native-web when the project is ejected. Perhaps having a default @ alias would be beneficial to reduce the number of relative pathing in a project.

resolve: {
  ...
  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',
    '@': paths.appSrc
  }
}

Where would this change go if we want to add this behavior to an unejected CRA?

[michalv8]

Maybe add create-react-app configuration section in package.json and there we could configure webpack aliases? I know that you want to keep it as simple as it can and without care this section could grow enormously in the future (and could be another big configuration file like webpack.config.js) but some configuration possibility could be very welcome. And alias configuration is rather universal term for any package bundler so it still be independant.

[thangchung]

I struggled to this issue also and found out the article very details (as @gaearon mentioned) at https://medium.com/@ktruong008/absolute-imports-with-create-react-app-4338fbca7e3d

[jeffersoneagley]

I guess I have to go change _all_ the import statements in my project, or give up on migrating it to CRA. It's probably not worth the time-sink. If I _must_ use eject, I may as well just keep the existing structure. Is there no way to do aliases through babel or something?

[treyhuffine]

I agree, this would be a great addition

[treyhuffine]

I've submitted a PR to use Webpack alias. In the package.json, the user defines an "alias" array which contains objects of the form { "source": "{path}", "expose": "{absolute path}" }.

@gaearon is this something you would be interested in introducing to the code base?

PR #3554

[londonbarrett]

I have ejected the application and configured the resolve.alias without success @gaearon

[Timer]

We don't provide support once you eject, sorry!

I'm going to lock this issue to prevent further bumps because there's so many active parties. If anyone has issues, please file a new issue.