WebStorm does not resolve aliases when Webpack is configured from Expo's createWebpackConfigAsync

Question

I have a React Native Web project using Expo. I have added aliases to make import statements easier to read and manage. Expo, as part of its configuration, has its own Webpack configuration, which can be modified using the documentation found here. This works, and the aliases resolve correctly when the project is built/run. However, WebStorm fails to resolve the aliases in it's intellisense after.

For example:

import userSlice from "@store/User";  // Hovering over "@store/User" will show warning: Module is not installed

webpack.config.js

let path = require("path");
const createExpoWebpackConfigAsync = require("@expo/webpack-config");

const aliases = {
    '@store': path.resolve(__dirname, '/src/store/'),
};

module.exports = async function (env, argv) {
    env.mode = "development"
    const config = await createExpoWebpackConfigAsync(env, argv);

    config.resolve.alias = {
        ...aliases,
        ...config.resolve.alias,
    };

    return config
};

There is no output in the Event Log that indicates an error.

Thinking that the env properties might somehow be different, I also tried manually setting these to the same values that are present when building from a terminal. I've also tried creating a simple Webpack config without Expo, and WebStorm does correctly resolve that.

question from:https://stackoverflow.com/questions/65850484/webstorm-does-not-resolve-aliases-when-webpack-is-configured-from-expos-createw

Answer 1

Can be related to WEB-36182; you can check your idea.log file (Help > Show Log in ...) to see if any errors are thrown on webpack evaluation. I'd suggest trying a workaround suggested for VSCode (configure the path mapping in jsconfig.json) - this should work in WebStorm