Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Storybook/angular uses wrong tsconfig for TsconfigPathsPlugin

See original GitHub issue

Describe the bug Tsconfig file path, using by storybook/angular TsconfigPathsPlugin here, is

taken from angular.json config and ignores .storybook/tsconfig.json
even that one from angular.json is wrong and is related to another application in workspace (app1 instead of app2 in example repo)

console.log of cliWebpackConfigOptions.buildOptions.tsConfig shows

projects/app1/tsconfig.json

despite we’re running storybook for app2 and have a projects/app2/.storybook/tsconfig.json file

To Reproduce Steps to reproduce the behavior:

clone https://github.com/artaommahe/storybook-tsconfigpaths
yarn install
yarn start-storybook -c projects/app2/.storybook
see an error

ERROR in ./projects/app2/src/app/app.component.ts
Module not found: Error: Can't resolve '@app2/test-module/const' in 'D:\projects\tests\storybook-tsconfigpaths\projects\app2\src\app'    
 @ ./projects/app2/src/app/app.component.ts 3:0-53 6:21-31

uncomment in webpack.config.js
yarn start-storybook -c projects/app2/.storybook
storybook started

Expected behavior Proper tsconfig path resoltion that respects .storybook/tsconfig.json existing

@storybook/angular@^5.2.5

Issue Analytics

State:
Created 4 years ago
Comments:11 (6 by maintainers)

Top GitHub Comments

2reactions

stale[bot]commented, Dec 9, 2019

Hi everyone! Seems like there hasn’t been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don’t have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

1reaction

EloBcommented, Nov 23, 2022

@mandarini Haven’t tried it but someone claims that this should work. https://stackoverflow.com/a/69040674

TS_NODE_PROJECT=.storybook/tsconfig.json start-storybook

Top Results From Across the Web

Storybook 6, use module paths? - Stack Overflow

js const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin'); const pathsPlugin = new TsconfigPathsPlugin({ configFile: path.resolve ...

In angular 13 projects "can't resolve @workspace/my-lib ...

When storybook is run, the following error is logged: ... but it seems Storybook's Angular <12.2 Webpack config adds the TsconfigPathsPlugin.

Debugging Storybook Angular Customisation - Nigel Sim

The solution was to use the MiniCssExtractPlugin. This has two parts: a module rule, and a plugin. const TsconfigPathsPlugin = require(' ...

nrwl-nx/community - Gitter

Hello . I am using nrwl/nx monorepo with pnpm. During pnpm install I am getting error EISDIR: illegal operation on a directory, read...

Webpack - Storybook

Thousands of teams use it for UI development, testing, and documentation. ... const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin'); ...