Storybook build fails

Current Behavior

Running build-storybook target for ui library with command nx run ui:build-storybook fails with weird error Storybook configuration freshly generated on existing lib

Expected Behavior

Storybook runs as normal, no errors.

Failure Logs

info => Cleaning outputDir: C:\Git\fiyu\frontend\dist\storybook\ui
info => Loading presets
info => Compiling manager..
info => Compiling preview..
info Addon-docs: using MDX1
info => Using implicit CSS loaders
info => Loading angular-cli config for angular >= 13.0.0
info => Using angular browser target options from "ui:build-storybook"
info => Using angular project with "tsConfig:C:\Git\fiyu\frontend\libs\ui\.storybook\tsconfig.json"
info => Using default Webpack5 setup
ERR! => Failed to build the preview
ERR! Module not found: Error: Can't resolve '../component/abstract-form.component' in 'C:\Git\fiyu\frontend\libs\ui\src\lib\components\acl-view'
62% building 12/12 entries 1299/1355 dependencies 294/477 modulesinfo => Manager built (39 s)
ERR! Error: Can't resolve '../component/abstract-form.component' in 'C:\Git\fiyu\frontend\libs\ui\src\lib\components\acl-view'
ERR!     at finishWithoutResolve (C:\Git\fiyu\frontend\node_modules\enhanced-resolve\lib\Resolver.js:309:18)
ERR!     at C:\Git\fiyu\frontend\node_modules\enhanced-resolve\lib\Resolver.js:386:15
ERR!     at C:\Git\fiyu\frontend\node_modules\enhanced-resolve\lib\Resolver.js:435:5
ERR!     at eval (eval at create (C:\Git\fiyu\frontend\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
ERR!     at C:\Git\fiyu\frontend\node_modules\enhanced-resolve\lib\Resolver.js:435:5
ERR!     at eval (eval at create (C:\Git\fiyu\frontend\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:27:1)
ERR!     at C:\Git\fiyu\frontend\node_modules\enhanced-resolve\lib\DescriptionFilePlugin.js:87:43
ERR!     at C:\Git\fiyu\frontend\node_modules\enhanced-resolve\lib\Resolver.js:435:5
ERR!     at eval (eval at create (C:\Git\fiyu\frontend\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:16:1)
ERR!     at C:\Git\fiyu\frontend\node_modules\enhanced-resolve\lib\forEachBail.js:16:12
ERR!  Error: Can't resolve '../component/abstract-form.component' in 'C:\Git\fiyu\frontend\libs\ui\src\lib\components\acl-view'
ERR!     at finishWithoutResolve (C:\Git\fiyu\frontend\node_modules\enhanced-resolve\lib\Resolver.js:309:18)
ERR!     at C:\Git\fiyu\frontend\node_modules\enhanced-resolve\lib\Resolver.js:386:15
ERR!     at C:\Git\fiyu\frontend\node_modules\enhanced-resolve\lib\Resolver.js:435:5
ERR!     at eval (eval at create (C:\Git\fiyu\frontend\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:15:1)
ERR!     at C:\Git\fiyu\frontend\node_modules\enhanced-resolve\lib\Resolver.js:435:5
ERR!     at eval (eval at create (C:\Git\fiyu\frontend\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:27:1)
ERR!     at C:\Git\fiyu\frontend\node_modules\enhanced-resolve\lib\DescriptionFilePlugin.js:87:43
ERR!     at C:\Git\fiyu\frontend\node_modules\enhanced-resolve\lib\Resolver.js:435:5
ERR!     at eval (eval at create (C:\Git\fiyu\frontend\node_modules\tapable\lib\HookCodeFactory.js:33:10), <anonymous>:16:1)
ERR!     at C:\Git\fiyu\frontend\node_modules\enhanced-resolve\lib\forEachBail.js:16:12 {
ERR!   details: "resolve '../component/abstract-form.component' in 'C:\\Git\\fiyu\\frontend\\libs\\ui\\src\\lib\\components\\acl-view'\n" +
ERR!     '  using description file: C:\\Git\\fiyu\\frontend\\libs\\ui\\package.json (relative path: ./src/lib/components/acl-view)\n' +
ERR!     "    Field 'browser' doesn't contain a valid alias configuration\n" +
ERR!     '    using description file: C:\\Git\\fiyu\\frontend\\libs\\ui\\package.json (relative path: ./src/lib/components/component/abstract-form.component)\n' +
ERR!     '      no extension\n' +
ERR!     "        Field 'browser' doesn't contain a valid alias configuration\n" +
ERR!     "        C:\\Git\\fiyu\\frontend\\libs\\ui\\src\\lib\\components\\component\\abstract-form.component doesn't exist\n" +
ERR!     '      .mjs\n' +
ERR!     "        Field 'browser' doesn't contain a valid alias configuration\n" +
ERR!     "        C:\\Git\\fiyu\\frontend\\libs\\ui\\src\\lib\\components\\component\\abstract-form.component.mjs doesn't exist\n" +
ERR!     '      .js\n' +
ERR!     "        Field 'browser' doesn't contain a valid alias configuration\n" +
ERR!     "        C:\\Git\\fiyu\\frontend\\libs\\ui\\src\\lib\\components\\component\\abstract-form.component.js doesn't exist\n" +
ERR!     '      .jsx\n' +
ERR!     "        Field 'browser' doesn't contain a valid alias configuration\n" +
ERR!     "        C:\\Git\\fiyu\\frontend\\libs\\ui\\src\\lib\\components\\component\\abstract-form.component.jsx doesn't exist\n" +
ERR!     '      .ts\n' +
ERR!     "        Field 'browser' doesn't contain a valid alias configuration\n" +
ERR!     "        C:\\Git\\fiyu\\frontend\\libs\\ui\\src\\lib\\components\\component\\abstract-form.component.ts doesn't exist\n" +
ERR!     '      .tsx\n' +
ERR!     "        Field 'browser' doesn't contain a valid alias configuration\n" +
ERR!     "        C:\\Git\\fiyu\\frontend\\libs\\ui\\src\\lib\\components\\component\\abstract-form.component.tsx doesn't exist\n" +
ERR!     '      .json\n' +
ERR!     "        Field 'browser' doesn't contain a valid alias configuration\n" +
ERR!     "        C:\\Git\\fiyu\\frontend\\libs\\ui\\src\\lib\\components\\component\\abstract-form.component.json doesn't exist\n" +
ERR!     '      .cjs\n' +
ERR!     "        Field 'browser' doesn't contain a valid alias configuration\n" +
ERR!     "        C:\\Git\\fiyu\\frontend\\libs\\ui\\src\\lib\\components\\component\\abstract-form.component.cjs doesn't exist\n" +
ERR!     '      as directory\n' +
ERR!     "        C:\\Git\\fiyu\\frontend\\libs\\ui\\src\\lib\\components\\component\\abstract-form.component doesn't exist"
ERR! }


 >  NX   Broken build, fix the error above.

   You may need to refresh the browser.

error about unresolved import is weird because if i go to the mentioned file i dont have that import written like that, its completely different

import { Component, EventEmitter, Injector, Input, Output } from '@angular/core';
import { UntypedFormArray } from '@angular/forms';
import {
  Acl,
  AclUserPrivilege,
  AclUserPrivilegeEnum,
  CoreUser,
  CoreUserService,
  FormOptions,
  SearchResult,
  SuggestionSearchParameters,
} from '@fiyu/core';
import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
import { AbstractFormComponent } from '../form/abstract/abstract-form.component';

@UntilDestroy()
@Component({
  selector: 'fiyu-acl-view',
  templateUrl: './acl-view.component.html',
  styleUrls: ['./acl-view.component.scss'],
})
export class AclViewComponent extends AbstractFormComponent<Acl> {}

Environment

Node : 16.14.0 OS : win32 x64 npm : 8.19.2

nx : 15.1.1 @nrwl/angular : 15.1.1 @nrwl/cypress : 15.1.1 @nrwl/detox : Not Found @nrwl/devkit : 15.1.1 @nrwl/esbuild : Not Found @nrwl/eslint-plugin-nx : 15.1.1 @nrwl/expo : Not Found @nrwl/express : Not Found @nrwl/jest : 15.1.1 @nrwl/js : 15.1.1 @nrwl/linter : 15.1.1 @nrwl/nest : Not Found @nrwl/next : Not Found @nrwl/node : Not Found @nrwl/nx-cloud : 15.0.2 @nrwl/nx-plugin : 15.1.1 @nrwl/react : Not Found @nrwl/react-native : Not Found @nrwl/rollup : Not Found @nrwl/schematics : Not Found @nrwl/storybook : 15.1.1 @nrwl/web : Not Found @nrwl/webpack : 15.1.1 @nrwl/workspace : 15.1.1 typescript : 4.8.4

Local workspace plugins: @fiyu/lib-toolkit

Community plugins: @compodoc/compodoc: 1.1.19 @storybook/angular: 6.5.13 lerna: 6.0.3

[jerkovicl]

@mandarini thx alot for all the help, this is resolved.

[mandarini]

This was resolved in the community slack. The issue was that it needed some extra typescript settings, and also it was a very specific setup.