PhpStorm - babel-plugin-module-resolver - babel-plugin-module-alias

Question

I'm using babel-plugin-module-resolver in my React JS project for import my modules ( obviously, the problem exist also for the deprecated babel-plugin-module-alias ).

I'd like to use auto completion for components and 'import'

Is there a way to setup an alias path on PhpStorm?

My babelrc configuration is:

"plugins": [
        [
            "module-resolver", {
            "root": ["./src"],
            "alias": {
                "root_components": "components",
                "root_data": "data",
                "root_entities": "entities",
                "root_library": "library",
                "root_services": "services",
                "root_styles": "styles",
                "root_views": "views"
            }
        }]
    ],

My js is something like this:

import React from "react";
import Header from "root_components/layout/header";

Obviously, PhpStorm is not able to resolve the path for my header component...

Any clues?

Answer 1

PhpStorm provides no support for Babel aliasing. If you miss it, please follow https://youtrack.jetbrains.com/issue/WEB-22717 for updates. But it is unlikely that we will ever put efforts in implementing special solutions for third-party transpilers and bundles that change too often. We'd rather think about some generic solution...