webpack enhanced-resolve plugin not working

Question

I'm trying to follow these instructions by the developers themesevles at https://github.com/webpack/webpack/issues/6817#issuecomment-542448438 which doesn't work. I'm going to explain the problem but first lets see my project structure.

my file structure is as follows:

---dist
---mylib
    index.ts
    lib.ts
---mylib1
    index.ts
    lib.ts
---src
    index.html
    index.ts
package.json
tsconfig.json
webpack.config.js

mylib/index.ts

export * from './lib';

mylib/lib.ts

export function sayHi() {
  alert("hi");
}

mylib1/index.ts

export * from './lib';

mylib1/lib.ts

export function sayHi1() {
  alert("hi1");
}

src/index.ts

import {sayHi1} from '@mylibs';

console.log("Hello World!");


sayHi1();

tsconfig.json

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "noImplicitAny": true,
    "module": "es6",
    "target": "es5",
    "baseUrl": ".",
    "allowJs": true,
    "paths": {
      "@mylibs": ["mylib", "mylib1"]
    }
  },
  "files": ["src/index.ts"]
}

webpack.config.json package.json:

// Generated using webpack-cli https://github.com/webpack/webpack-cli

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const AliasPlugin = require("enhanced-resolve/lib/AliasPlugin");

const isProduction = process.env.NODE_ENV == "production";

const stylesHandler = "style-loader";

const config = {
  entry: "./src/index.ts",
  output: {
    path: path.resolve(__dirname, "dist"),
  },
  devServer: {
    open: true,
    host: "localhost",
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "index.html",
    }),
  ],
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/i,
        loader: "ts-loader",
        exclude: ["/node_modules/"],
        options: {
          transpileOnly: true,
        },
      },
      {
        test: /\.css$/i,
        use: [stylesHandler, "css-loader"],
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
        type: "asset",
      },

      // Add your rules for custom modules here
      // Learn more about loaders from https://webpack.js.org/loaders/
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
    plugins: [
      new AliasPlugin(
        "described-resolve",
        [{ name: "@mylibs", alias: ["../mylib", "../mylib1"] }],
        "resolve"
      ),
    ]
    // alias: {
    //  "@mylibs": ["../mylib", "../mylib1"] // also didn't work
    // },
  },
};

module.exports = () => {
  if (isProduction) {
    config.mode = "production";
  } else {
    config.mode = "development";
  }
  return config;
};

the error message is:

export 'sayHi1' (imported as 'sayHi1') was not found in '@mylibs' (possible exports: sayHi)

If I try to import sayHi it will work or even if I swap the places of ["../mylib", "../mylib1"] in AliasPlugin it will work as well. It seems that it will search into the first path only. Any helps would be appreciated because I'm doing everything as said in the docs.

full webpack output message if it helps:

asset main.js 243 bytes [compared for emit] [minimized] (name: main)
asset index.html 201 bytes [compared for emit]
orphan modules 72 bytes [orphan] 2 modules
runtime modules 274 bytes 1 module
./src/index.ts + 1 modules 100 bytes [built] [code generated]

WARNING in ./src/index.ts 3:0-6
export 'sayHi1' (imported as 'sayHi1') was not found in '@mylibs' (possible exports: sayHi)

webpack 5.72.1 compiled with 1 warning in 755 ms