Support absolute imports with `@` #5118

xiaoxiangmoe · 2018-09-27T07:43:59Z

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?

The text was updated successfully, but these errors were encountered:

Timer · 2018-09-27T12:05:42Z

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

gaearon · 2018-09-27T12:11:08Z

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.

Timer · 2018-09-27T12:26:55Z

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

gaearon · 2018-09-27T12:28:08Z

Can we just create node_modules/@ and link it?

xiaoxiangmoe · 2018-09-27T14:07:38Z

@gaearon Why does monorepos affect @ support?

gaearon · 2018-09-27T14:09:49Z

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.

xiaoxiangmoe · 2018-09-27T14:15:55Z

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

gaearon · 2018-09-27T14:18:51Z

Doesn't matter.

xiaoxiangmoe · 2018-09-28T04:03:10Z

@gaearon

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.

I think even with monorepo, we still need a special way to refer to the root.

For example, if we needs two axios instances, it would be unreasonable for us to put these strongly business-relevant codes in separate packages.

iremlopsum · 2018-10-25T07:39:07Z

@gaearon any update on this?

tanduong · 2018-10-31T07:48:45Z

The simplest way to achieve this is to create node_modules/@ and link it as @gaearon suggested. You could do this by adding a postinstall script to your package.json. Like this:

{
  // ...
  "scripts": {
    "preinstall": "rm node_modules/@",
    "postinstall": "ln -s `pwd`/src node_modules/@",
    // ...
  },
  // ...
}

robertvansteen · 2018-10-31T07:49:49Z

If we would proceed with this would NODE_PATH support be dropped? Because I’d prefer that over any prefix symbol. I also think for people new to JS/React an absolute path like components/button feels natural while something like @/components/button is yet another thing they need to learn and needs to be explained.

tanduong · 2018-10-31T08:03:37Z

@rovansteen I personally prefer an explicit symbol so that I can tell whether the imports come from the application code or a node module. If @ looks weird, you may try with: src, @src, app, @app, ... instead.

robertvansteen · 2018-10-31T14:35:39Z

@tanduong it's not about that the @ looks weird it's about that it is not a common pattern for paths. Relative paths starting with a . and absolute paths not starting with a dot is a much more common pattern.

robertvansteen · 2018-10-31T14:38:44Z

You could then argue if the absolute path should be the root directory of the application or the src directory. If you'd go with the root directory you do have the benefit of having to "prefix" all of your absolute imports of your application code with src. I don't know if there's any upside/downside of NODE_PATH vs. webpack alias if you go with src as the prefix.

dmythro · 2018-10-31T14:59:39Z

Is there any IDE support on this for proper auto-complete etc?

Didn't see such practice on corporate projects before. But relative paths are very annoying indeed.

yordis · 2018-10-31T17:13:17Z

@Z-AX definitely IDEs auto-complete and indexing will become an issue.

Even in Vue, I didn't use this.

It sounds good, it looks good, but in practice becomes an issue.

xiaoxiangmoe · 2018-10-31T18:51:50Z

@Z-AX
For js file，we can write a fake webpack config, see umijs/umi#1109
For ts file, we can use paths in tsconfig, see #5645

fooey · 2018-11-01T03:10:49Z

Is there any IDE support on this for proper auto-complete etc?

Didn't see such practice on corporate projects before. But relative paths are very annoying indeed.

VS Code at least supports jsconfig.json which uses the exact same "paths" options as tsconfig to tell the editor how to resolve paths.

https://code.visualstudio.com/docs/languages/jsconfig

So far as I can tell, TypeScript does not support NODE_PATH. I was adopting TypeScript in an existing CRA app relying on NODE_PATH, and tsconfig's path options saved me from running into a big blocker while CRA's typescript support was in beta.

@tanduong's proposal for a filesystem link isn't OS independent, so now I'm stalled trying to figure out what to do with a project I over optimistically started porting over to typescript and is just completely broken ATM

edit: Using a collage of packages (rimraf, lnk-cli, globstar), I think I have a cross environment happy pre/post install setup that seems to be mostly working

scripts: {
		"preinstall": "yarn unlink-modules",
		"postinstall": "yarn link-modules",
		"unlink-modules": "rimraf node_modules/@",
		"link-modules": "globstar --node -- lnk \"./src/*\" \"./node_modules/@/\"",
		"relink-modules": "yarn unlink-modules && yarn link-modules",
		// ...
}

gaearon · 2019-01-03T15:05:24Z

There is also another plausible alternative — we could embrace tsconfig.json / jsconfig.json, and make paths specified there work across the setup (Webpack/Jest). See #5645 (comment) for that.

jakewies · 2019-01-03T15:22:28Z

tsconfig.json/jsconfig.json specify a baseUrl too. This is one of the items on the list of things to do along with this issue. If CRA embraces the paths option, can it embrace the baseUrl as well?

gaearon · 2019-01-03T15:58:24Z

Probably — let's discuss in #5645? I don't fully understand what this entails.

Kepro · 2019-01-08T20:03:10Z

what about... '@/': paths.appSrc + '/',
I'm using this for long time and without any issues... :)

mzvast · 2019-01-25T02:37:06Z

The simplest way to achieve this is to create node_modules/@ and link it as @gaearon suggested. You could do this by adding a postinstall script to your package.json. Like this:
{
  // ...
  "scripts": {
    "preinstall": "rm node_modules/@",
    "postinstall": "ln -s `pwd`/src node_modules/@",
    // ...
  },
  // ...
}

This script is so DANGEROUS!
It DELETE all my src folder!

jjvainstein · 2019-02-07T23:34:08Z

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!

Hi! I tried this solution but is not working for me. This is my tsconfig.json:

{
"extends": "./tsconfig.paths.json",
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"allowJs": true,
"skipLibCheck": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
"module": "esnext",
"moduleResolution": "node",
"isolatedModules": true,
"noEmit": true,
"jsx": "preserve",
"noUnusedLocals": true,
"noUnusedParameters": true,
"resolveJsonModule": true
},
"include": [
"src"
]
}

jjenzz · 2019-02-15T12:08:48Z

My solution:

yarn add react-app-rewired --dev

Update package.json scripts:

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test --env=jsdom",
  "eject": "react-app-rewired eject"
},

Add config-overrides.js to project root:

const path = require('path');

module.exports = function override(config) {
  config.resolve = {
    ...config.resolve,
    alias: { '@': path.resolve(__dirname, 'src') },
  };

  return config;
};

Add jsconfig.paths.json/tsconfig.paths.json to project root:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

Add the following to jsconfig.json / tsconfig.json:

"extends": "./tsconfig.paths.json", // or jsconfig.paths.json

CRA warns about compilerOptions.baseUrl and compilerOptions.paths not being supported but everything works as expected.

Ruffeng · 2019-02-16T17:06:35Z

@jjenzz your solution works smooth!

Hope the core team will provide a solution without other packages to achieve it ...

jjvainstein · 2019-02-16T18:08:47Z

My solution:

yarn add react-app-rewired --dev

Update package.json scripts:

"scripts": {
  "start": "react-app-rewired start",
  "build": "react-app-rewired build",
  "test": "react-app-rewired test --env=jsdom",
  "eject": "react-app-rewired eject"
},

Add config-overrides.js to project root:

const path = require('path');

module.exports = function override(config) {
  config.resolve = {
    ...config.resolve,
    alias: { '@': path.resolve(__dirname, 'src') },
  };

  return config;
};

Add jsconfig.paths.json/tsconfig.paths.json to project root:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

Add the following to jsconfig.json / tsconfig.json:

"extends": "./tsconfig.paths.json", // or jsconfig.paths.json

CRA warns about compilerOptions.baseUrl and compilerOptions.paths not being supported but everything works as expected.

Thanks for your solution. One silly question, how I can use to solution to avoid using '@'? I mean, instead of doing `@/components/DummyComponent' I would like to do 'components/DummyComponent'.

Kepro · 2019-02-16T18:10:56Z

@jjvainstein rly? :) second comment in this thread

jjvainstein · 2019-02-16T18:18:57Z

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

facebook/create-react-app#5118 (comment)

aramvr · 2019-02-25T12:00:48Z

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?

robertvansteen · 2019-02-25T14:56:10Z

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

mchurichi · 2019-03-01T18:54:45Z

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"
    }
  },

rambabusaravanan · 2019-03-26T11:50:25Z

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

ianschmitz · 2019-04-19T02:49:03Z

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!

Detail see: facebook/create-react-app#5118

nik-lampe · 2019-04-23T08:58:45Z

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

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

Timer closed this as completed Sep 27, 2018

Timer added the issue: question label Sep 27, 2018

gaearon reopened this Sep 27, 2018

Timer added issue: proposal and removed issue: question labels Sep 27, 2018

Timer added this to the 2.x milestone Sep 27, 2018

Timer changed the title ~~Is there an equivalent for webpack.resolve.alias?~~ Support absolute imports with @ Sep 27, 2018

This was referenced Oct 28, 2018

TypeScript {paths} are not taken into consideration #5585

Closed

[Request] Opt out of tsconfig automation #5625

Closed

ianschmitz mentioned this issue Oct 31, 2018

Absolute imports not supported with typescript #5637

Closed

xiaoxiangmoe mentioned this issue Oct 31, 2018

Add baseUrl and paths in tsconfig.json and jsconfig.json #5645

Open

YIRer mentioned this issue Jan 27, 2019

Not use absolute path YIRer/cra-ts-mobx-jss-material#1

Open

jefffriesen added a commit to RadiantLabs/microgrid-appliance-analysis that referenced this issue Feb 20, 2019

adding typescript configuration to enable absolute imports

e7082dd

facebook/create-react-app#5118 (comment)

iansu modified the milestones: 2.2.0, 3.x Mar 10, 2019

JunilHwang mentioned this issue Mar 21, 2019

절대경로 설정 JunilHwang/react-tutorial#1

Open

ianschmitz closed this as completed Apr 19, 2019

ianschmitz modified the milestones: 3.x, 3.0 Apr 19, 2019

MadratJerry added a commit to MadratJerry/Compilers-Playground that referenced this issue Apr 21, 2019

🎨 Support path alias

3bef21c

Detail see: facebook/create-react-app#5118

delaaxe mentioned this issue Apr 27, 2019

Set baseUrl from jsconfig.json/tsconfig.json #6656

Merged

lock bot locked and limited conversation to collaborators Apr 28, 2019

Support absolute imports with @ #5118

Support absolute imports with @ #5118

Comments

xiaoxiangmoe commented Sep 27, 2018

Timer commented Sep 27, 2018

gaearon commented Sep 27, 2018

Timer commented Sep 27, 2018

gaearon commented Sep 27, 2018

xiaoxiangmoe commented Sep 27, 2018

gaearon commented Sep 27, 2018

xiaoxiangmoe commented Sep 27, 2018

gaearon commented Sep 27, 2018

xiaoxiangmoe commented Sep 28, 2018 • edited Loading

iremlopsum commented Oct 25, 2018

tanduong commented Oct 31, 2018 • edited Loading

robertvansteen commented Oct 31, 2018

tanduong commented Oct 31, 2018

robertvansteen commented Oct 31, 2018

robertvansteen commented Oct 31, 2018

dmythro commented Oct 31, 2018 • edited Loading

yordis commented Oct 31, 2018

xiaoxiangmoe commented Oct 31, 2018

fooey commented Nov 1, 2018 • edited Loading

gaearon commented Jan 3, 2019 • edited Loading

jakewies commented Jan 3, 2019

gaearon commented Jan 3, 2019

Kepro commented Jan 8, 2019

mzvast commented Jan 25, 2019 • edited Loading

jjvainstein commented Feb 7, 2019

jjenzz commented Feb 15, 2019

Ruffeng commented Feb 16, 2019

jjvainstein commented Feb 16, 2019

Kepro commented Feb 16, 2019

jjvainstein commented Feb 16, 2019

aramvr commented Feb 25, 2019

robertvansteen commented Feb 25, 2019

mchurichi commented Mar 1, 2019

rambabusaravanan commented Mar 26, 2019

ianschmitz commented Apr 19, 2019

nik-lampe commented Apr 23, 2019 • edited Loading

Support absolute imports with `@` #5118

Support absolute imports with `@` #5118

xiaoxiangmoe commented Sep 28, 2018 •

edited

Loading

tanduong commented Oct 31, 2018 •

edited

Loading

dmythro commented Oct 31, 2018 •

edited

Loading

fooey commented Nov 1, 2018 •

edited

Loading

gaearon commented Jan 3, 2019 •

edited

Loading

mzvast commented Jan 25, 2019 •

edited

Loading

nik-lampe commented Apr 23, 2019 •

edited

Loading