storybookjs/storybook

[Bug]: Using webworkers (angular) results in a broken build. All errors being typescript related

Open

#20,856 opened on Jan 31, 2023

View on GitHub
 (4 comments) (0 reactions) (0 assignees)TypeScript (89,909 stars) (10,058 forks)batch import
angularbughas workaroundhelp wantedsev:S3typescript

Description

Describe the bug

Needing to use webworkers using a dedicated web worker file requires declaring <reference lib="webworker" /> atop your own code. By making that declaration, the entire build breaks on running npm run storybook. I have created a barebones repo to reproduce the bug

To Reproduce

https://github.com/nikhilnxvverma1/angular-storybook-webworker-bug

System

Environment Info:

  System:
    OS: macOS 11.6.8
    CPU: (8) x64 Intel(R) Core(TM) i7-6820HQ CPU @ 2.70GHz
  Binaries:
    Node: 18.10.0 - /usr/local/bin/node
    npm: 8.19.2 - /usr/local/bin/npm
  Browsers:
    Chrome: 109.0.5414.119
    Firefox: 109.0
    Safari: 15.6.1
  npmPackages:
    @storybook/addon-actions: ^6.5.16 => 6.5.16 
    @storybook/addon-essentials: ^6.5.16 => 6.5.16 
    @storybook/addon-interactions: ^6.5.16 => 6.5.16 
    @storybook/addon-links: ^6.5.16 => 6.5.16 
    @storybook/angular: ^6.5.16 => 6.5.16 
    @storybook/builder-webpack5: ^6.5.16 => 6.5.16 
    @storybook/manager-webpack5: ^6.5.16 => 6.5.16 
    @storybook/testing-library: ^0.0.13 => 0.0.13

Additional context

I have made all the relevant configurations in angular.json including the webworkerTsconfig file

Contributor guide

Tech stack
angulartypescript
Domain
build systemdeveloper experience
Issue type
bug
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
Angular project setupTypeScript configuration
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
45
Research direction
Examine the Angular build configuration in angular.json and the webworkerTsconfig file. Trace how Storybook's webpack builder handles TypeScript library references when compiling web worker files. Look for conflicts between DOM and Web Worker lib settings. The provided reproduction repository at https://github.com/nikhilnxvverma1/angular storybook webworker bug can be used to isolate the issue.