Support absolute imports with @

webpack.base.conf.js wrote as below:

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      '@': resolve('src'),
    }
 },

https://github.com/vuejs-templates/webpack/blob/master/template/build/webpack.base.conf.js#L40

Can we use import Hello from '@/components/Hello' like vue?

Place NODE_PATH=src into your .env file and proceed to import components/Hello.

I’d say let’s just add @ support. I was resistant because I thought we’d do monorepos sooner. But since that was shelved we might as well do what Vue does.

We'll need to make sure it works with webpack (obviously), but also Jest/Flow/ESLint(?).

Can we just create node_modules/@ and link it?

@gaearon

@gaearon Why does monorepos affect @ support?

If we had monorepo support we’d encourage people to put different top level folders into separate packages instead of having a special way to refer to the root.

By the way, our individual packages in monorepo, if we don't want to publish it to NPM, how should it be named?

Doesn't matter.

@jjvainstein

@jjvainstein rly? :) second comment in this thread

@Kepro that simple solution doesn't work for me and many other people. I tried creating that .env file with it doesn't work. So for that reason I was thinking that with the solution using eact-app-rewired plus some modification I can achieve that.

adding typescript configuration to enable absolute imports

There appears to be some confusion in other threads so I'll repeat my comment from #5585:

Just to be clear — we do want to support absolute paths.

In particular, we want to:

Make NODE_PATH work for TS. (Fix baseUrl for NODE_PATH=src #5692)

Make @ alias work by default for everyone — both in JS and TS. (this issue)

I'm sorry for the frustration this is causing. We're not asking you to convert your code to use relative paths — but please wait for either of these two issues to resolve.

Is there any news?

@aramvr

@aramvr there is a work-in-progress PR (#6116) and I believe the intention is to ship it with 3.0 but there is still some work to do.

@jjenzz

just wanted to add to @jjenzz solution that you also need to map @ to the right path if you want jest to resolve correctly... this worked for me

  // package.json 
  "jest": {
    "moduleNameMapper": {
      "@/(.*)": "<rootDir>/src/$1"
    }
  },

@zaguiini

Messing around I just found one setting that works without craco for the absolute paths:

1 - Update .env file to NODE_PATH=./;

2 - Create one tsconfig.paths.json:
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "src/*": ["src/*"]
    }
  }
}
3 - Add this as your first entry in tsconfig.json:
"extends": "./tsconfig.paths.json",
Now everything should work fine, just reference the src/ folder in your imports instead of @.

YES, CRA will complain about the tsconfig.json absolute paths and stuff, but... VSCode seems to work pretty well with it and I think other IDEs will just as well.

EDIT: CRA complains but don't really remove the lines because it extends from the paths.json file so it can't modify it!

This really works super awesome ..
Thanks @zaguiini ..

baseUrl is now supported in tsconfig.json and jsconfig.json. Check out #6475 and install our alpha release if you want to try it out!

🎨 Support path alias

This enables me to use absolute paths, but not aliases, right?

// edit
Nevermind, just read in #6656 that it's the case

Navigation Menu

Repository navigation

Support absolute imports with `@` #5118

33 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Support absolute imports with @ #5118

Description

Activity

Timer commented on Sep 27, 2018

gaearon commented on Sep 27, 2018

Timer commented on Sep 27, 2018

gaearon commented on Sep 27, 2018

xiaoxiangmoe commented on Sep 27, 2018

gaearon commented on Sep 27, 2018

xiaoxiangmoe commented on Sep 27, 2018

gaearon commented on Sep 27, 2018

33 remaining items

jjvainstein commented on Feb 16, 2019

aramvr commented on Feb 25, 2019

robertvansteen commented on Feb 25, 2019

mchurichi commented on Mar 1, 2019

rambabusaravanan commented on Mar 26, 2019

ianschmitz commented on Apr 19, 2019

nik-lampe commented on Apr 23, 2019

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

Support absolute imports with `@` #5118