Storybook angular: tsconfig-paths-webpack-plugin incorrectly resolving relative references

[Wintermoose]

Describe the bug
In a monorepo situation tsconfig-paths sometimes remaps relative file reference as absolute one. Compilation itself works (since for tsc everything works fine), but the resulting bundle is broken (will refer wrong webpack modules and thus miss some objects)

From debugging the code, I think it's actually caused by this problem dividab/tsconfig-paths-webpack-plugin#76 (so blame on the plugin or perhaps on enhanced-resolve), but perchance you can put workaround into your code, or at least warn about the situation in docs

Setup:

src/tsconfig.json

src/types/package.json
src/types/index.ts

src/table/package.json
src/table/index.ts
src/table/types.ts
src/table/helpers/helper.ts  

helper.ts includes

import { SomeType } from "../types";

tsconfig.json contains in the paths something like

paths: {
  "@mylib/types": "./types",
  "@mylib/table": :"./table"
}

(this doesn't actually matter, since the problem is triggered by the default wildcard rule, not our mappings)

Now what happens is that as part of the logic in enhanced-resolver (DescriptionFilePlugin), the tsconfig-paths-webpack-plugin gets asked to resolve file "../types" at relative path "./helpers". The tsconfig plugin merges the request and the relative path, but due to the change in the resolver's code, the resulting path is "types" instead of "./types". And since the plugin also automatically looks for packages in the baseUrl, it will happily resolve the request to the src/types package.

Solution on our side:

• avoid having top-level folders with the same name as some files (that might be good idea anyway; however note that it is no problem for typescript or even angular, only for the storybook)
• make sure, that baseUrl is one level higher; that way the wildcard rule in the remapper won't find "types". This is how I ended up solving the problem for now

System

  System:
    OS: Windows 10 10.0.19042
    CPU: (8) x64 Intel(R) Core(TM) i5-8250U CPU @ 1.60GHz
  Binaries:
    Node: 12.18.2 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.13.0 - C:\Program Files (x86)\Yarn\bin\yarn.CMD
    npm: 6.14.11 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 91.0.4472.124
    Edge: Spartan (44.19041.1023.0), Chromium (91.0.864.48)
  npmPackages:
    @storybook/addon-actions: 6.3.0 => 6.3.0
    @storybook/addon-docs: 6.3.0 => 6.3.0
    @storybook/addon-essentials: ^6.3.0 => 6.3.0
    @storybook/addon-knobs: 6.3.0 => 6.3.0
    @storybook/addon-links: 6.3.0 => 6.3.0
    @storybook/addon-storysource: 6.3.0 => 6.3.0
    @storybook/angular: 6.3.0 => 6.3.0
    @storybook/builder-webpack5: 6.3.0 => 6.3.0
    @storybook/manager-webpack5: 6.3.0 => 6.3.0
    @storybook/theming: 6.3.0 => 6.3.0

Additional context
In default setup (empty ng new app followed by default sb setup) the problem doesn't occur, since the baseUrl ends up being higher than the src folder.

[shilman]

We’re cleaning house! Storybook has changed a lot since this issue was created and we don’t know if it’s still valid.

Please open a new issue referencing this one if:

• this is still a problem in SB 7.x
• you can provide a consistent reproduction in 7.x (at https://storybook.new/ or per repro docs).