Custom import paths with es6

Webpack resolve.root is not currently supported, please follow https://youtrack.jetbrains.com/issue/WEB-17254 for updates.

You can try marking your source root (the parent of 'core' folder) as Resource root (Mark directory as/Resource Root) - does it make things any better?

See also https://youtrack.jetbrains.com/issue/WEB-20104#comment=27-1486526

Elena, yes that does make things better - so much better.  Thank you for your never-ending, pitch-perfect support.

Hmm...I tried to mark the directory as a Resources Root, but Intelli-J still can't hyperlink to the source file and claims the methods in my linked class are never used (when indeed they are).

Is there something else I'm missing?

Not sure; sample project that shows up the issue would be helpful

For me once you mark as source root the navigation works fine, however when using the "insert import" suggestion of intellij, the created import works but it's always a relative value, which is highly annoying.

This is for me the most annoying thing in JS for intellij, because you constantly have to manage imports by hand

Inserted: 

import ScrollToTop from "./components/atoms/ScrollToTop"; 

Expected:

import ScrollToTop from "app/components/atoms/ScrollToTop";

Even better (because I have an index.js in /atoms:

import { ScrollToTop } from "app/components/atoms";

@Sébastien I see that you've submitted an issue: https://youtrack.jetbrains.com/issue/WEB-28346. You'll be notified about updates.

Hello,

I have a meta repository (all source in TypeScript), and can't get imports from child projects to be resolved via npm, instead I always get relative paths (using 2017.2.4).

Given two projects in the same meta-repository directory:

@airport/air-control - maps to $PROJECT_ROOT/apis/air-control

@airport/tarmac   - maps to $PROJECT_ROOT/apps/tarmac

, both of which have

"main": "lib/index.js",

in package.json (with all sources re-exported from there), I get:

import { CacheForUpdateState } from "../../../../apis/air-control/src/impl/query/api/EntityLookup";

instead of:

import { CacheForUpdateState } from "@airport/air-control";


I'm using Rush to link all projects together (https://github.com/microsoft/web-build-tools).  I get this behavior both on Windows 10 and Ubuntu.
Thank you :)

what do your mappings look like? Do you use webpack, or path mappings in tsconfig.json? in either case, please provide appropriate snippets from your configs

Hi,

Thank you for such a prompt response.  I'm not using webpack, my project is just library that is meant to be included in actual applications.  It's just split up into multiple npm projects due to it's complexity.  I don't have any special settings in tsconfig.json, if something there would fix this problem that would definitely work for me.  I did just now scan http://json.schemastore.org/tsconfig and did not find anything that I could use.

Here are the snippets:

@airport/air-control - maps to $PROJECT_ROOT/apis/air-control

package.json:

{
  "name": "@airport/air-control",
  "version": "0.0.29",
  ...
  "main": "lib/index.js",
  "typings": "lib/index",
  ...
}

tsconfig.json

{
  "version": "2.4.2",
  "compileOnSave": true,
  "compilerOptions": {
    "declaration": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "noImplicitAny": false,
    "outDir": "lib/",
    "sourceMap": true,
    "removeComments": false,
    "target": "es6",
    "typeRoots": [
      "node_modules/@types"
    ]
  },
  "exclude": [
    "lib",
    "doc",
    "node_modules"
  ]
}

@airport/tarmac   - maps to $PROJECT_ROOT/apps/tarmac

package.json

{
  "version": "0.0.50",
  "name": "@airport/tarmac",
  ...
  "main": "lib/index.js",
  "typings": "lib/index",
  "dependencies": {
    "@airport/air-control": "0.0.29",
    ...
  },
  ...
}

tsconfig.json

{
  "version": "2.4.2",
  "compileOnSave": true,
  "compilerOptions": {
    "declaration": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [
      "dom",
      "es2015"
    ],
    "module": "commonjs",
    "moduleResolution": "node",
    "noImplicitAny": false,
    "outDir": "lib/",
    "sourceMap": true,
    "removeComments": false,
    "target": "es2017",
    "typeRoots": [
      "node_modules/@types"
    ]
  },
  "exclude": [
    "lib",
    "node_modules"
  ]
}


Thank you much!

Also,

I did just try to add "paths" to tsconfg.json in @airport/tarmac without any success.  I tried every combination I could think of.

Given that my "node_modules" is in root directory of "@airport/tarmac" ($PROJECT_ROOT/apps/tarmac) and assuming that baseUrl is that directory:

"@airport/air-control": ["./@airport/air-control"]

"@airport/air-control": ["../../../apis/air-control"]

"@airport/air-control": ["../../../apis/air-control/lib"]

"@airport/air-control": ["../../../apis/air-control/lib/index"]

"@airport/air-control": ["../../../apis/air-control/lib/index.js"]

"@airport/air-control": ["../../../apis/air-control/src"]

"@airport/air-control": ["../../../apis/air-control/src/index"]

"@airport/air-control": ["../../../apis/air-control/src/index.js"]

I also tried with "../.." instead of "../../.."

Thanks, :)

Hmm... This won't work, sorry.BTW, does typescript compiler accept such paths? If yes, can you provide a sample project?

My answer refers to your previous comment. anyway, I still need a project to see what your configuration looks like

Hi,

I've provided an example at:

https://github.com/russoturisto/webstorm-metarepo-imports

to get it install node_modules for both npm projects (contained in example) you need to:

npm i -g @microsoft/rush

then from the project directory:

rush generate --force

Thank you very much for your help, :)

To me, path mappings in tsconfig.json do help (WebStorm 2017.2.4)

- in apps/example-app/tsconfig.json, I added the following:

"baseUrl": "",
"paths": {
  "@webstorm-metarepo-imports/example-lib/*": ["../../libs/example-lib/src/*"]
}

- in apps/example-app/src/ExampleDependant.ts, hit Alt+Enter to import a module - it's now imported as

import {ExampleDependency} from "@webstorm-metarepo-imports/example-lib/ExampleDependency";

export class ExampleDependant {

    dependency: ExampleDependency;

}

Perfect, I just didn't know how to use them properly.  Thank you!

Hello, me again,

Actually it doesn't work as expected.  IDE imports the desired file but when I run tsc in the "example-app" it compiles the file in "example-lib" and puts the output into "example-app/lib".  So I get:

example-app\libs\

    apps\

        example-app\src\

            ExampleDependant.d.ts

            ExampleDependant.js

            ExampleDependant.js.map

            index.d.ts

            index.js

            index.js.map

    libs\

        example-lib\src\

            ExampleDependency.d.ts

            ExampleDependency.js

            ExampleDependency.js.map

Instead of the desired:

example-app\libs\

    ExampleDependant.d.ts

    ExampleDependant.js

    ExampleDependant.js.map

    index.d.ts

    index.js

    index.js.map

I've checked in the updated changes into the example repository.

Thank you! :)

Not sure I follow you... WebStorm doesn't control tsc behavior. And it seems to work as designed - you have specified example-app/lib as compiler output dir:

"outDir": "lib/",

Hi,

The desired behavior is that each npm project in the meta-repository compiles only it's own source into it's "lib" directory.  And right now the referenced project also compiles into a lib directory that is not it's own.  Anyway, it makes sense that WebStorm doesn't affect how tsc compiles the projects.  Thank you for your time and effort! :)

Sounds good,  for me the code is written in typescript so jsconfig.json isn't going to help.  I got tsconfig to work on root level, but it still compiles everything to the a single tree, not per module.  So I gave up and moved to VS Code.  I still use WebStorm for individual projects in the meta repo, though it's cumbersome if I have more than 4 projects open at a time, especially to look up related source in the overall tree I use VS Code. 

From @Lado Lomidze's suggestion above, you need to do this:

Webstorm

1. Mark src directory as Resource Root
2. Go to Settings -> Editor -> Code Style -> Javascript.
3. Switch to Imports tab and select Use paths relative to the project, resource or sources root.

Thanks for the fix Lado