Proper imports in Ember CLI and WebStorm

Ember CLI
1

Hi Everyone

I am happy user of Ember CLI using WebStorm as IDE. Only thing which bothering me are ecma6 imports which are not resolved by WebStorm.

Consider the project structure

project/
- server
- (...)
- app/
  - utils/
       - file1.js
       - file2.js

Correct import by ember-cli is

# file1.js
import {util} from 'project/utils/file2'

The “app” path part is missing.

But the import above is not properly resolved by WebStorm IDE, as it expects following:

# file1.js
import {util} from 'project/app/utils/file2'

Without correct resolving of imports I am loosing much of IDE productivity features (code completion / inspection / refactoring). I do not want to use relative imports (./…/) because the project is huge and it would make imports less transparent.

Can someone more experienced in ember-cli internals help me with solution.

Regards
Jan

1 Like
2

I’m pretty sure I was experiencing the same issue. Take a look at this StackOverflow topic:

3

Hello

Thank you for quick reply. But I am afraid the solution mentioned on stackoverflow does not work here. Because it is not about resource root but incorrect path inside the resource root:

Consider following resource roots:

  • resource root is project, the import path on filesystem is: app/utils/file2 which is not supported by ember-cli
  • resource root is project/app, the import path on filesystem is utils/files2 which is also not supported by ember-cli
  • only supported path by ember cli is project/utils/file2

Why does not ember-cli use the real paths for imports or is it possible to enable it somewhere? Thanks in advance.

4

Check out the WebStorm section on the Ember-CLI website, hopefully that helps.

If not, then you’ll probably have to tag another directory as library root.

5

Changing roots will not help regarding my previous posts - because path used for ember-cli import is not filesystem path (relative nor absolute).

Relative filesystem path is:
import {util} from 'project/app/utils/file2
but ember expect import path:
```import {util} from ‘project/utils/file2’````

See the “app” segment is missing, but the “project” segment is there - this makes impossible for IDE to resolve imported file - no root settings will help, because the path is modified under the root.

I am considering this as a flaw of Ember CLI and I am ready to somehow contribute to fix the issue. But I would like to consult it here, before I will start the Github issue or submit WebStorm support ticket.

6

Anyone interested in temporary solution:

Update these files accordingly:

# Brocfile.js
//...
var app = new EmberApp({
  name: 'project/app',
  outputPaths: {
    app: {
      html: 'index.html',
      css: {
        'app': '/assets/project.css'
      },
      js: '/assets/project.js'
    }
  }
});

and

# config/environments.js
//...
modulePrefix: 'project/app',
//...

Now you can use proper filesystem paths for imports import {util} from app/utils/file2. Issue is further discussed here: https://github.com/ember-cli/ember-cli/issues/3427

2 Likes
7

In case anyone else is intersted in what this page used to say about webstorm:

A version from Feb 2 2015: http://www.ember-cli.com/#webstorm