Configure custom modules resolve folder

Avatar
Permanently deleted user
创建于

Webpack allows to add a custom folder for modules resolution: 

//weback.config.js
resolve: {
    modules: ['app', 'node_modules'],
}

This allows to use absolute paths in import statements rather than relative, and we find this really useful.

E.g. import('../../app/components/Awesome) becomes import('components/Awesome')

 

The problem is that Webstorm is unable to resolve a path `components/Awesome`, because he is looking only inside `node_modules` and doesn't know anything about the `app` folder. How can we teach webstorm to resolve against `app` folder first ? 

Votes

1

分享

5 条评论
Avatar
Elena Pogorelova
创建于

Webpack-specific modules resolving is not currently supported, please follow https://youtrack.jetbrains.com/issue/WEB-20104 and linked tickets for updates.

As a workaround I'd suggest marking 'app' folder as resource root - right-click it and choose Mark Directory As/Resource root

7
Avatar
Permanently deleted user
创建于

Elena, thank you for your help, you made my day!

0
Avatar
Permanently deleted user
创建于

I have been using FuseBox for module loader. Same problem exist on there. I use tilde operator for import from root folder. My root folder set to "src" in fuse.js. So i can import anything without problem with tilde operator. File structure as below. I tried to workaround solution with set the src folder as "Resource Root" directory on webstorm. Everything works well but WebStorm warns me for fix error. Is there any idea, how can i disable this warning?

....src

........components

............app

................app.module.ts

............calendar

................calendar.module.ts

=== app.module.ts

import {CalendarModule} from '~/components/calendar/calendar.module';   // On hover: TS2307 Cannot find the module

 

 

0
Avatar
Elena Pogorelova
创建于

The error comes from typescript compiler.

I can suggest adding path mappings to your tsconfig.json to get rid of it - see https://www.typescriptlang.org/docs/handbook/module-resolution.html, Path mapping

2
Avatar
Permanently deleted user
创建于

Hi Elena, thanks for reply. Yes, i fixed it through tsconfig.json

  1.  I add baseUrl property to tsconfig.json (tsconfig.json is inside root folder)
    ...,
    baseUrl:'.' ,
    ...
  2. in fuse.js, add alias to src folder:
    Fuse.init({...
       alias: {src: '~/'},
    ...})
  3. So last action is add 'src' prefix to imports, like this. 
    import {CalendarModule} from 'src/components/calendar/calendar.module';

First one fix the WebStorm warnings, second one is fix the import problem without tilde in fuse.js

This is result screenshot:




0

请先登录再写评论。