Typescript: automatic import confuses relative paths and package imports

[ajafff]

TypeScript Version: 3.0.0-dev.20180628

Search Terms: import path, relative

Code

• clone https://github.com/fimbullinter/wotan
• yarn
  
  
  
  • creates a symlink node_modules/@fimbul/<name> for each packages/<name>
  
  
• create a new file packages/mimir/src/test.ts and paste the following content:
  ts expressionNeedsParensWhenReplacingNode; getWrappedNodeAtPosition; AbstractRule;
• add imports for all identifiers using quick fixes

Expected behavior:

import { expressionNeedsParensWhenReplacingNode } from "./utils";
import { getWrappedNodeAtPosition } from 'tsutils';
import { AbstractRule } from '@fimbul/ymir';

expressionNeedsParensWhenReplacingNode;
getWrappedNodeAtPosition;
AbstractRule;

Actual behavior:

import { expressionNeedsParensWhenReplacingNode } from "@fimbul/mimir/src/utils";
import { getWrappedNodeAtPosition } from '../../../node_modules/tsutils';
import { AbstractRule } from '../../../node_modules/@fimbul/ymir/src';

expressionNeedsParensWhenReplacingNode;
getWrappedNodeAtPosition;
AbstractRule;

Playground Link:

Related Issues:

25029

[andy-ms]

Fixed by #25364.

[ghost]

Hi,

It seems the issue is still appearing.

Here it is :

Here is the About VSCode :

my tsconfig.json

json { "compileOnSave": false, "compilerOptions": { "baseUrl": "./", "outDir": "./dist/out-tsc", "sourceMap": true, "declaration": false, "moduleResolution": "node", "emitDecoratorMetadata": true, "experimentalDecorators": true, "target": "es5", "typeRoots": [ "node_modules/@types" ], "lib": [ "es2017", "dom" ] } }

[andy-ms]

@trichetriche Could you check to make sure you're using typescript@next in the editor?

[ghost]

I'm home now but I will definitely do that tomorrow. Is that at project level, or should I install it in VSCode ?

[andy-ms]

Install globally with npm install -g typescript@next, then set typescript.tsdk to point to npm's global install location. (See the linked instructions from above.)

[ghost]

Okay, I installed typescript@next and set up VSCode to use the local version of typescript and it works like a charm ! I didn't know you could do that, thank you for teaching me this :)

[Hotell]

forcing people to install stuff globally. not cool 👎 but I guess that's a quick fix right ?

[baj9032]

@andy-ms :+1:

[AnnikaNissen]

@Hotell I fixed this yesterday just by creating a new folder somewhere, runnint npm init and then npm install typescript@next in that folder. Then I linked the VS Code setting to that folder:

{
    "typescript.tsdk": "/PATH/TO/MY/FOLDER/node_modules/typescript/lib"
}

That works perfectly (and without global installs) for me, using VS Code on MacOs.

[tomshane]

This works if there is only one node_modules directory in the project structure. In my case the structure is as follows:

|-- Project
    |-- Core
        |-- src
        |-- node_modules
            |-- redux
        |-- tsconfig.json
        |-- package.json
    |-- App
        |-- Source
            |-- client
            |-- node_modules
                |-- redux
            |-- tsconfig.json
            |-- package.json
        |-- App.code-workspace

I'm working with the workspace that references both folders (App, Core).

1. When working on files within Core/src, import autocomplete works fine:

   import { Reducer } from "redux";

2. But when I work on files within App/Source/client, IDE suggests relative path:

   import { Reducer } from "../../../Core/node_modules/redux";

Is there something that needs to be added in tsconfig.json files?

Please note, in 2.9.x both cases didn't work, in 3.x.x the first case works as expected.

[gizm0bill]

Please reopen this issue

[mhegazy]

Please file a new issue and give us enough details of the issue you are experiencing to enable us to diagnose.

[gizm0bill]

it's exactly the same issue.
clone this repo: https://github.com/gizm0bill/multi-apps and yarn (it's using yarn workspaces)
try to edit any file from ./src/pkg and select some import from the autosuggest list

[andy-ms]

@gizm0bill Could you be more specific? I went to src/pkg/app-three-js/app/index.ts and commented out NgModule and added a completion for it and it correctly added import { NgModule } from '@angular/core';. Also, are you using typescript@next?

[gizm0bill]

ah no no, I'm on 2.9.2 in fact, angular compiler plugin still depends on it.
would the typescript version be the problem?

[andy-ms]

You should be able to npm install -g typescript@next for a global install independent of the one angular uses; then set up your editor to use that.