PhpStorm not recognizing webpack alias

Question

My webpack.config.js contains the following part:

resolve: {
    extensions: ['*', '.js', '.ts', '.tsx'],
    modules: [
        path.resolve(__dirname, "src"),
        path.resolve(__dirname, "node_modules"),
    ],
    alias: {
        Design: path.resolve(__dirname, "src/Theme/Default")
    }
},

There are 2 folders in this src/Theme folder: Default & Dark . I want to switch it in the alias setting when needed, it's not user controlled.

The import I use:

import Page from 'Design/Components/Page';

Webpack is working correctly with this but PhpStorm 2018.2 does not recognize this path as correct.

My PhpStorm settings for webpack are set to the path of my webpack.config.js.

More details and examples / logs can be found here: https://youtrack.jetbrains.com/issue/WI-43146

Answer 1

Webpack aliases resolving is not supported when editing TypeScript files, current TypeScript support implementation uses only the TypeScript resolution logic because we need to keep integration with the TypeScript language service (that is not aware of webpack aliases). You can configure similar mappings in your tsconfig.json file, like:

"baseUrl": "",
    "paths": {
      "Design/*": ["src/Theme/Default/*"]
    }

If you miss support for webpack resolving in TypeScript, please vote for WEB-29207