Storybook build fails

[jerkovicl]

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

[mandarini]

Hi there @jerkovicl ! Can you please do me a favour and create a reproduction repository, and post it here, so that I can debug this more easily? It would be super helpful!

Thank you so much in advance!

[jerkovicl]

@mandarini its a private repo with private npm registry but yeah I will try to do it. Got email where I can send the details if needed?

[mandarini]

I see. Can you try recreating this bug in a new repo? You can set up a new repo with npx create-nx-workspace and then generate an Angular app, add Storybook and try to mimic the setup of your private repo!

As an alternative, you can join our community slack, post your question in the support channel, and I'll take a look and ping you in a dm, if needed.

[jerkovicl]

@mandarini ok i will try to recreate repo and send you details on slack

[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.

[jerkovicl]

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

[github-actions[bot]]

This issue has been closed for more than 30 days. If this issue is still occuring, please open a new issue with more recent context.