I am trying to teach myself React, in TypeScript, however I am running into an issue with path aliases. When I try to add a component, Visual Studio Code will identify the missing import and give me the option to add import { useWebSocket } from "@lw/web-sockets";, but when I try to build/run the application I get the error Module not found: Error: Can't resolve '@lw/web-sockets' in 'C:Users....LWsrcLW-fesrclibscomponentswrappershome-wrapper'.

Folder Structure (only relevant folders)

LW-fe
  src
    libs
      web-sockets
        web-sockets-context
          web-sockets-context.tsx
        index.ts
      components
        wrappers
          home-wrapper
            home-wrapper.tsx
        index.ts
  tsconfig.base.json
  tsconfig.json

The index.ts file in the web sockets folder is:

export * from './web-sockets-context/web-sockets-context'

Similarly, the index.ts file in the wrappers folder is:

export * from './home-wrapper/home-wrapper'

Finally, my tsconfig.base.json file is:

{
    "compileOnSave": false,
    "compilerOptions": {
      "rootDir": ".",
      "sourceMap": true,
      "strictPropertyInitialization": false,
      "declaration": true,
      "emitDeclarationOnly": true,
      "composite": true,
      "moduleResolution": "node",
      "emitDecoratorMetadata": true,
      "experimentalDecorators": true,
      "importHelpers": true,
      "target": "es2015",
      "module": "esnext",
      "lib": ["es2017", "dom"],
      "skipLibCheck": true,
      "skipDefaultLibCheck": true,
      "resolveJsonModule": true,
      "baseUrl": ".",
      "paths": {
        "@lw/data-access": ["./src/libs/data-access/index.ts"],
        "@lw/components": ["./src/libs/components/index.ts"],
        "@lw/web-sockets": ["./src/libs/web-sockets/index.ts"],
        "@lw/wrappers": ["./src/libs/components/wrappers/index.ts"]
      }
    },
    "exclude": ["node_modules", "tmp"]
  }

and tsconfig.json is:

{
    "extends": "./tsconfig.base.json",
    "compilerOptions": {
      "jsx": "react-jsx",
      "allowJs": true,
      "esModuleInterop": true,
      "allowSyntheticDefaultImports": true,
      "forceConsistentCasingInFileNames": true,
      "strict": true,
      "noImplicitOverride": true,
      "noPropertyAccessFromIndexSignature": true,
      "noImplicitReturns": true,
      "noFallthroughCasesInSwitch": true
    },
    "files": [],
    "include": ["src"]
}

I’ve gone over this multiple times, tried re-creating files from scratch, adjusting paths, etc. but nothing has worked. I am sure it is something simple I am missing, but I am lost how VS Code can identify the aliases, but building/running fails. I have even tried building it both with npm run build and then installing Nx Console and trying nx build but got the same results.

Any help/guidance would be greatly appreciated.