Blog Blog
Home
Home/WebStorm/WebStorm 2017.2 EAP 172.2827: Better Webpack Support, Convert to Export & Breadcrumbs for JS

WebStorm 2017.2 EAP 172.2827: Better Webpack Support, Convert to Export & Breadcrumbs for JS

Posted on by Ekaterina Prigara

This week WebStorm 2017.2 EAP build (172.2827.22) brings lots of new features that we’d like you to try. Download the EAP build on this page or by using Toolbox App. A patch update from the last week EAP build is also available.

Please share your feedback and report issues on our tracker. Thank you!

Support for webpack enhanced module resolution

This update brings a huge improvement in working with projects using webpack. WebStorm now analyzes the webpack configuration and provides coding assistance that respects the webpack module resolution. That means that now all the import statements in the code that use enhanced module resolution will be properly resolved.

WebStorm runs webpack under the hood when you open a project or change webpack.config.js and, thanks to the information it gets, WebStorm now properly understands the project resolve roots and resolve aliases.

Now you don’t have to manually mark the directories as Resource roots in Preferences | Directories to fix the unresolved imports – they will just work fine.

In this project react-color is an alias for the path './src/index.js'. Now WebStorm is able to properly resolve the import from react-color, provide navigation to it and completion for the exported symbols.

webpack-alias

By default WebStorm will analyze the webpack configuration file in the root of the project, but you can select another file in Preferences | Languages & Frameworks | JavaScript | Webpack.

Working with Version Control: inspections for commit message, Reword and Revert Commit actions

Many projects have commit message guidelines. WebStorm now allows you to configure the format of the commit message for the project. The IDE will show whether the message satisfies it and will suggest quick-fixes. You can do that in Preferences | VCS | Commit Dialog.

commit-dialog

We’ve added a Revert commit action for Git. As the name suggests, it will help you revert a commit that’s already been pushed. To find it, right-click on the commit in the Log.

revert-commit

Also in the log you can find the new Reword action. It lets you change the commit message for any commits that are not pushed yet.

The Shelf tab has been redesigned and now offers you a Preview.

Breadcrumbs in JavaScript and TypeScript files

WebStorm now shows your location in the JavaScript and TypeScript file, with the breadcrumbs at the bottom of the editor. They show names of classes, variables, functions, and methods. Click on the name on the breadcrumb to jump to the parent object.

breadcrumbs

Another great way to navigate around the file structure is by using the Structure view. You can open it as a tool window or use it as a popup (press Cmd-F12 on macOS or Ctrl+F12 on Windows & Linux).

Converting module.exports into ES6 export

For the past year we’ve been adding various inspections that help you migrate your code to ES6. These include converting function to arrow function, var declarations to let and const, require calls to import statements, and strings to template strings.

The new quick-fix can convert module.exports into export default and exports. into export,  if that’s possible. To use it, press Alt-Enter on the module.exports and select Convert to export.

convert-to-export

Please note that the inspection doesn’t ensure that name exports are imported with the correct ES6 syntax.

You can also run the inspection called “module.exports is used instead of export” for a bunch of files using Inspect code… action and apply the fix for all of the files.

By default the inspection “module.exports is used instead of export” only provides a quick-fix and doesn’t highlight module.exports statements in your code. If you want highlighting, you can enable it in Preferences | Editor | Inspections.

Don’t forget that the project JavaScript version has to be set to ES6, JSX or Flow in Preferences | Languages & Frameworks | JavaScript.

Nested files in Project view

Some time ago we started visually grouping together generated files in the Project view, e.g. generated .js and .js.map files were grouped with the .ts file in the same folder with the same name.

Now you can configure what files are visually grouped together. Click the gear icon in the Project view, select File nesting… and add your own patterns. For example, you can group together .ts, .html and .css files of an Angular component.

nesting

For the full list of issues addressed in this EAP build, see the Release notes.

Please report your feedback to our issue tracker. To get notifications of new EAP builds as they become available, subscribe to the EAP channel in Preferences | Appearance & Behavior | System Settings | Updates.

Your WebStorm Team

#es6 #webpack #WebStorm 2017.2
Comments below can no longer be edited.

53 Responses to WebStorm 2017.2 EAP 172.2827: Better Webpack Support, Convert to Export & Breadcrumbs for JS

  1. Bryan Migliorisi says:

    June 9, 2017

    Great stuff – What are the chances of CSS-in-JS (like styled-components) support landing in Webstorm?

    • Ekaterina Prigara says:

      June 9, 2017

      No, sorry, no plans for that at the moment: it’s not possible to implement a general solution that will work for any CSS-in-JS library.
      You can configure code highlighting for Styled Components via TextMate Bundles (Preferences | Editor | TextMate Bundles). The required files are in the PR mentioned here: https://github.com/styled-components/styled-components#sublime-text

      • Luciano says:

        August 23, 2017

        Ekaterina, is there a place where I can upvote this feature?
        This is a major issue for out team
        Thanks

        • Ekaterina Prigara says:

          August 24, 2017

          If you’re using Styled Components, feel free to vote for this feature request: https://youtrack.jetbrains.com/issue/WEB-24148
          If you’re using a different CSS-in-JS library, please submit a new request. Thank you!

  2. cdanyl says:

    June 10, 2017

    As always, awesome features 🙂

  3. derekdon says:

    July 21, 2017

    Will the webpack support include support for:

    @import “~normalize.css/normalize.css”

    etc. where the tilde is used?

  4. Steven Silvestri says:

    July 31, 2017

    The webpack support for aliases doesn’t seem to work when you use webpack configuration by env. For example if your config file is just:

    module.exports = function(env) {
    return require(./webpack.${env}.js)(env);
    }

    • Ekaterina Prigara says:

      July 31, 2017

      Can you please try specify the path to the configuration file you want to use currently in Preferences | Languages & Frameworks | webpack. WebStorm needs to run a specific webpack configuration file to build a project model.

  5. Muhammad Adeel says:

    August 14, 2017

    great work.

    Problem with module directory support is that it doesn’t pick up the resolve/alias directories for module paths unless you change the webpack file.

    So on starting the editor I have to hit an empty space at the end of webpack.config.js file or remove one to trigger webpack configuration change update. Which then picks up the module directories.

  6. Tomek says:

    August 28, 2017

    Unfortunately webpack support doesnt work for “composed” configurations like they recommend in a book https://survivejs.com/webpack/developing/composing-configuration/

    example repo: https://github.com/Tomekmularczyk/react-starter/tree/master/config

    🙁

    • Ekaterina Prigara says:

      August 28, 2017

      Thanks for the feedback! The support for such configurations will land in WebStorm 2017.3 (the early access preview will start quite soon). As a workaround please try the suggestion in the comment: https://youtrack.jetbrains.com/issue/WEB-28473

      • Tomek says:

        August 28, 2017

        Thank for reply! Unfortunately solution from comment doesn’t work as expected for me. It still underlines imports with information about module not being installed. However I made another file only to help webstorm:

        idea.resolve.webpack.js

        const projectAliases = require(‘./webpack.parts’).resolveProjectDependencies;

        module.exports = projectAliases;

  7. Bill Guan says:

    September 26, 2017

    Resolving Webpack alias works fine in Javascript file. However, when trying to import a file in typescript file by using alias, Intellij still doesn’t understand these alias.

    Could you please fix this?

    Thanks

    • Ekaterina Prigara says:

      October 2, 2017

      Can you please report us an issue about that on https://youtrack.jetbrains.com/issues/WEB
      Would really appreciate if you attach a sample project that uses webpack with TypeScript. Thank you!

  8. Marius Virbičianskas says:

    October 11, 2017

    Hey,

    Any chance of adding an option to set roots for webpack configs? because in our project we have different bundles with different webpack configs but PhpStorm only looks at the root webpack config

    • lena_spb says:

      October 11, 2017

      Not sure I follow you… WebStorm looks at the config you select in Settings | Languages & Frameworks | JavaScript | Webpack. Do you miss a possibility to choose multiple configs instead of a single one?

      • jy_moon says:

        February 20, 2018

        Hello,

        I want choose multiple configs instead of a single one.
        Could you leave a reply?

  9. anon says:

    November 29, 2017

    Webpack is not under Settings | Languages & Frameworks | JavaScript.

    • Ekaterina Prigara says:

      November 29, 2017

      What WebStorm version do you use? Make sure that you are in (project) Preferences and not in the Default Preferences.

  10. Juno says:

    January 9, 2018

    Alias seems not work when webpack config file return a promise like what vue-cli generate…

  11. Marco B says:

    April 12, 2018

    But this doesn’t seem to work on 2018.1 MacOsx

    in Settings | Languages & Frameworks | JavaScript | Webpack the right webpack file is selected

    …

    const defaults = {
    devtool: ‘source-maps’,
    entry: ‘./app/app.js’,
    output: {
    path: path.join(__dirname, ‘public’),
    filename: ‘main.js’
    },
    resolve: {
    root: path.resolve(__dirname),
    alias: {
    ‘@app’: ‘app’,
    ‘@actions’: ‘app/actions’,
    ‘@api’: ‘app/api’,
    ‘@components’: ‘app/components’,
    @common’: ‘app/components/common’,
    ‘@stylesheets’: ‘stylesheets’
    },
    extensions: [”, ‘.js’, ‘.jsx’]
    },
    ….

    When I include on the code, the IDE is not able to find the source

    import MyTable from ‘@common/table.js’;

  12. Ignacio Durand says:

    May 3, 2018

    Sorry to post on a closed issue but for the record: I managed to solve this by creating a webpack.config.js file separately like:


    const path = require('path')
    const webpack = require('webpack')

    module.exports = {
    ...
    resolve: {
    extensions: ['.js', '.json', '.vue'],
    alias: {
    '~': path.resolve(__dirname, './resources/assets/js')
    }
    },
    ...
    }

    And then importing it in the webpack.mix.js like:

    const config = require('./webpack.config')
    ...
    mix.webpackConfig(config)

    Make sure the webpack configuration file is pointed correctly in the configuration of the PhpStorm in: Settings > Languages & Frameworks > Javascript > Webpack

    • Ekaterina Prigara says:

      May 3, 2018

      Hi Ignacio,
      Thank you for your comment! What was the initial issue?

  13. Issa says:

    May 21, 2018

    I setting the webpack for a vue project, but I got an error like this:
    “Can’t analyse webpack.base.conf.js: coding assistance will ignore module resolution rules in this file.
    Possible reasons: this file is not a valid webpack configuration file or its format is not currently supported by the IDE.”
    What can I do?

  14. Brian HVB says:

    June 12, 2018

    I know this is an old post, but hoping to get a response before opening a more detailed ticket. Is there a way to enable the enhanced module resolution for .scss @imports?

    I have a web pack config with:
    resolve: {
    modules: [
    path.resolve(__dirname, ‘node_modules’),
    path.resolve(__dirname, ‘./’),
    ]

    When I import something in a JS file like:
    import ‘node_modules/ag-grid/src/styles/ag-grid.scss’;
    everything works, and the software recognizes that this is a valid path.

    But the same import in a .scss:
    @import “node_modules/ag-grid/src/styles/ag-grid.scss”;
    file promptsa “Cannot resolve directory” error.

    I’m using PyCharm 2018.1.4, but I have the same issue in WebStorm.

  15. Chigozirim Eze says:

    August 14, 2018

    Is there a plan to include support for webpack config written using es6?

    My webpack config is written using es6 syntax, therefore when I open webstorm, I am greeted with the following message:

    Can’t analyse webpack.config.js: coding assistance will ignore module resolution rules in this file.
    Possible reasons: this file is not a valid webpack configuration file or its format is not currently supported by the IDE.
    Error details: Unexpected identifier.

    I have setup a babel watcher which transpiles the webpack config in the IDE, but webstorm seems to not take the watcher into consideration.

    • Ekaterina Prigara says:

      August 16, 2018

      Not at the moment, sorry. Right now WebStorm runs the config directly with the node version selected in the project settings. Please vote for this issue: https://youtrack.jetbrains.com/issue/WEB-31023

      • Andrey says:

        October 6, 2018

        So WebStorm 2018.2 also can’t handle webpack.config.babel.js? I have webpack.config.babel.js which contains some ES6, and I get a message in the event log: “Module resolution rules from webpack.config.babel.js are now used for coding assistance.”, but in fact, the resolution is not working

        • Andrey says:

          October 8, 2018

          I got it working. The reason webstorm didn’t handle this config was that the webpack config function was async. I think it’s probably a bug

          • Ekaterina Prigara says:

            October 9, 2018

            It can if the config name has *.babel.* in it and babel is set up correctly.
            Can you please share your webpack.config.babel.js with us, as well as .babelrc?

      • Andrey says:

        October 22, 2018

        webpack.config.babel.js: https://pastebin.com/rAxw3pJm
        babel.config.js: https://pastebin.com/A4WgHwVL

        Without async it works. With async there is an error in the event log: Can't analyse webpack.config.babel.js: coding assistance will ignore module resolution rules in this file.
        Possible reasons: this file is not a valid webpack configuration file or its format is not currently supported by the IDE.
        Error details: regeneratorRuntime is not defined

        If there is no .babel-part in the config name there is always an ok-message in the event log: Module resolution rules from webpack.config.babel.js are now used for coding assistance. But alias resolution still doesn’t work with async in the config

      • Andrey says:

        October 23, 2018

        require('@babel/polyfill'); at the top of webpack.config.babel.js yields Module resolution rules from webpack.config.babel.js are now used for coding assistance. in the event log. But resolve.alias still not recognized by webstorm while webpack config function is async

  16. Paul Han says:

    September 8, 2018 
    const path = require('path');

module.export = {
  resolve: {
    alias: {
      '~': path.resolve(__dirname, './src'),
    },
  },
};

    Actually, there is no webpack work in my project(I use parcel), and I create a webpack.config.js with this code. Unfortunally I was jumped failed.

    • Ekaterina Prigara says:

      September 11, 2018

      You have a mistake in your config file: it should be exports and not export.

  17. Andrey says:

    October 6, 2018

    Is there any plans to support webpack enhanced module resolution within regular CSS imports? I.e. @import url(~alias/file.css); In the current version of Webstorm (2018.2) it doesn’t seem to work, while sass imports are working

  18. John Lovén says:

    February 6, 2019

    The alias resolving for auto imports used to work for me but no longer does.

    In webpack.config.dev.js:

    resolve: {
    alias: {
    common: path.resolve(path.resolve(__dirname, “..”, “common”))
    }
    }

    And marked

    /home/john/ProjectName/webpack.config.dev.js

    as the webpack configuration file in Webstorm.

    When using the auto import feature the import still resolves to:

    import Component from “../../../common/src/components/Component”;

    • Ekaterina Prigara says:

      February 6, 2019

      What IDE version do you use?

      • John Lovén says:

        February 6, 2019

        Currently I use 2018.3.4 but this broke a couple of versions back for me.

        • Ekaterina Prigara says:

          February 6, 2019

          Can you please send the IDE logs (menu Help – Compress Logs) to our tech support for the investigation. Thanks!

          • John Lovén says:

            February 6, 2019

            Done.

  19. Serge K says:

    March 5, 2019

    I imported settings from a colleague who is working on the same code as I am, but my Webstorm (2018.3.5) is unable to analyse the webpack.config.js, rendering all the aliases useless (as well as throwing lots of “unused exports” in the code).

    This had been plaguing me for a while, but I was unable to resolve on my own, so I hoped that importing the colleague’s settings would fix the issue but it did not. Please let me know what to provide and where so that I can move past this annoyance.

    Thanks!

    • Ekaterina Prigara says:

      March 5, 2019

      Hi Serge,
      Can you please try running Invalidate caches and restart in the File menu and then reopening the project. If it doesn’t help to successfully analyse the config file, please send the IDE logs (menu Help – Compress Logs) to our tech support team – it might contain some clues why the analysis has not passed. Thanks!

      • Serge K says:

        March 5, 2019

        Thanks for the help. Unfortunately that did not resolve the issue so I’ll reach out to tech support. Thanks again

Latest Tweets

Related posts

WebStorm 2020.2 EAP #5: Problems View, In-editor JSDoc Comment Rendering, Better @use and @forward Support

WebStorm 2020.2 EAP build #5 is now available! If you’re unfamiliar with our Early Access Program or if you want to catch up on all the new features, check out our previous EAP blog posts. The Toolbox App is the easiest way to get the EAP builds and keep your stable WebStorm version, as well as any EAP versions up to date. Or you can download the EAP builds from our website. You can also choose to be notified right from the IDE when a new EAP build is available: go to Preferences/Settings | Appearance & Behavior | System Settings | Updates and select Automatically check updates for E
Posted on by Ekaterina Ryabukha