storybook Angular 10.1.4错误 '@angular-devkit/build-angular/src/webpack/configs'

k2fxgqgv  于 3个月前  发布在  Angular
关注(0)|答案(5)|浏览(49)

描述错误

在Discord上有一个关于Storybook 6.4.0-rc.1 在使用Angular 10.1.4 时抛出错误的问题。我创建了一个新的Angular 10.1.4 应用，并初始化了Storybook 64.0-rc.1 ,但仍然遇到了相同的错误。该应用似乎对我来说是有效的，但它是一个新项目，只添加了由sb init 添加的相同故事。我没有尝试调试构建最终使用的配置。因此，我不确定这是否是由于不需要记录的检查或影响构建的情况。
我的假设是#16644 可能导致了这个问题，但我没有尝试确认这一点。
使用npm run storybook时的错误：
详细信息

WARN   Failed to load preset: {"name":"C:\\Users\\mberry\\dev_home\\tmp\\example-app\\node_modules\\@storybook\\angular\\dist\\ts3.9\\server\\framework-preset-angular-cli.js","type":"presets"} on level 2
ERR! Error: Cannot find module '@angular-devkit/build-angular/src/webpack/configs'
ERR! Require stack:
ERR! - C:\Users\mberry\dev_home\tmp\example-app\node_modules\@storybook\angular\dist\ts3.9\server\angular-cli-webpack-12.2.x.js
ERR! - C:\Users\mberry\dev_home\tmp\example-app\node_modules\@storybook\angular\dist\ts3.9\server\framework-preset-angular-cli.js
ERR! - C:\Users\mberry\dev_home\tmp\example-app\node_modules\@storybook\core-common\dist\cjs\presets.js
ERR! - C:\Users\mberry\dev_home\tmp\example-app\node_modules\@storybook\core-common\dist\cjs\index.js
ERR! - C:\Users\mberry\dev_home\tmp\example-app\node_modules\@storybook\core-server\dist\cjs\index.js
ERR! - C:\Users\mberry\dev_home\tmp\example-app\node_modules\@storybook\core\dist\cjs\server.js
ERR! - C:\Users\mberry\dev_home\tmp\example-app\node_modules\@storybook\core\server.js
ERR! - C:\Users\mberry\dev_home\tmp\example-app\node_modules\@storybook\angular\dist\ts3.9\server\index.js
ERR! - C:\Users\mberry\dev_home\tmp\example-app\node_modules\@storybook\angular\bin\index.js
ERR!     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:725:27)
ERR!     at Module.require (internal/modules/cjs/loader.js:952:19)
ERR!     at require (internal/modules/cjs/helpers.js:88:18)
ERR!     at Object.<anonymous> (C:\Users\mberry\dev_home\tmp\example-app\node_modules\@storybook\angular\dist\ts3.9\server\angular-cli-webpack-12.2.x.js:57:10)
ERR!     at Module._compile (internal/modules/cjs/loader.js:1063:30)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
ERR!     at Module.load (internal/modules/cjs/loader.js:928:32)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:769:14)
ERR!     at Module.require (internal/modules/cjs/loader.js:952:19)
ERR!     at require (internal/modules/cjs/helpers.js:88:18)
ERR!     at Object.<anonymous> (C:\Users\mberry\dev_home\tmp\example-app\node_modules\@storybook\angular\dist\ts3.9\server\framework-preset-angular-cli.js:79:36)
ERR!     at Module._compile (internal/modules/cjs/loader.js:1063:30)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
ERR!     at Module.load (internal/modules/cjs/loader.js:928:32)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:769:14)
ERR!  Error: Cannot find module '@angular-devkit/build-angular/src/webpack/configs'
ERR! Require stack:
ERR! - C:\Users\mberry\dev_home\tmp\example-app\node_modules\@storybook\angular\dist\ts3.9\server\angular-cli-webpack-12.2.x.js
ERR! - C:\Users\mberry\dev_home\tmp\example-app\node_modules\@storybook\angular\dist\ts3.9\server\framework-preset-angular-cli.js
ERR! - C:\Users\mberry\dev_home\tmp\example-app\node_modules\@storybook\core-common\dist\cjs\presets.js
ERR! - C:\Users\mberry\dev_home\tmp\example-app\node_modules\@storybook\core-common\dist\cjs\index.js
ERR! - C:\Users\mberry\dev_home\tmp\example-app\node_modules\@storybook\core-server\dist\cjs\index.js
ERR! - C:\Users\mberry\dev_home\tmp\example-app\node_modules\@storybook\core\dist\cjs\server.js
ERR! - C:\Users\mberry\dev_home\tmp\example-app\node_modules\@storybook\core\server.js
ERR! - C:\Users\mberry\dev_home\tmp\example-app\node_modules\@storybook\angular\dist\ts3.9\server\index.js
ERR! - C:\Users\mberry\dev_home\tmp\example-app\node_modules\@storybook\angular\bin\index.js
ERR!     at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:725:27)
ERR!     at Module.require (internal/modules/cjs/loader.js:952:19)
ERR!     at require (internal/modules/cjs/helpers.js:88:18)
ERR!     at Object.<anonymous> (C:\Users\mberry\dev_home\tmp\example-app\node_modules\@storybook\angular\dist\ts3.9\server\angular-cli-webpack-12.2.x.js:57:10)
ERR!     at Module._compile (internal/modules/cjs/loader.js:1063:30)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
ERR!     at Module.load (internal/modules/cjs/loader.js:928:32)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:769:14)
ERR!     at Module.require (internal/modules/cjs/loader.js:952:19)
ERR!     at require (internal/modules/cjs/helpers.js:88:18)
ERR!     at Object.<anonymous> (C:\Users\mberry\dev_home\tmp\example-app\node_modules\@storybook\angular\dist\ts3.9\server\framework-preset-angular-cli.js:79:36)
ERR!     at Module._compile (internal/modules/cjs/loader.js:1063:30)
ERR!     at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
ERR!     at Module.load (internal/modules/cjs/loader.js:928:32)
ERR!     at Function.Module._load (internal/modules/cjs/loader.js:769:14) {
ERR!   code: 'MODULE_NOT_FOUND',
ERR!   requireStack: [
ERR!     'C:\\Users\\mberry\\dev_home\\tmp\\example-app\\node_modules\\@storybook\\angular\\dist\\ts3.9\\server\\angular-cli-webpack-12.2.x.js',
ERR!     'C:\\Users\\mberry\\dev_home\\tmp\\example-app\\node_modules\\@storybook\\angular\\dist\\ts3.9\\server\\framework-preset-angular-cli.js',
ERR!     'C:\\Users\\mberry\\dev_home\\tmp\\example-app\\node_modules\\@storybook\\core-common\\dist\\cjs\\presets.js',
ERR!     'C:\\Users\\mberry\\dev_home\\tmp\\example-app\\node_modules\\@storybook\\core-common\\dist\\cjs\\index.js',
ERR!     'C:\\Users\\mberry\\dev_home\\tmp\\example-app\\node_modules\\@storybook\\core-server\\dist\\cjs\\index.js',
ERR!     'C:\\Users\\mberry\\dev_home\\tmp\\example-app\\node_modules\\@storybook\\core\\dist\\cjs\\server.js',
ERR!     'C:\\Users\\mberry\\dev_home\\tmp\\example-app\\node_modules\\@storybook\\core\\server.js',
ERR!     'C:\\Users\\mberry\\dev_home\\tmp\\example-app\\node_modules\\@storybook\\angular\\dist\\ts3.9\\server\\index.js',
ERR!     'C:\\Users\\mberry\\dev_home\\tmp\\example-app\\node_modules\\@storybook\\angular\\bin\\index.js'
ERR!   ]
ERR! }

用户还提到了以下警告。我不知道它们的样式是什么样子或者项目依赖关系，所以我不确定它们是否相关。在我创建的项目中，我尝试使用/进行除法操作，没有收到警告。
详细信息

DEPRECATION WARNING: Using / for division is deprecated and will be removed in Dart Sass 2.0.0.

Recommendation: math.div($spacer, 2)

More info and automated migrator: https://sass-lang.com/d/slash-div

重现

我使用npx -p @angular/cli@10.1.4 ng new example-app --style=scss创建了一个新项目，然后添加了Storybook npx sb@6.4.0-rc.1 init 。

系统

Environment Info:

  System:
    OS: Windows 10 10.0.19043
    CPU: (12) x64 Intel(R) Core(TM) i7-8700 CPU @ 3.20GHz
  Binaries:
    Node: 14.15.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.10 - C:\Program Files\nodejs\yarn.CMD
    npm: 6.14.8 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 95.0.4638.69
    Edge: Spartan (44.19041.1266.0), Chromium (95.0.1020.53), ChromiumDev (97.0.1069.0)
  npmPackages:
    @storybook/addon-actions: ^6.4.0-rc.1 => 6.4.0-rc.1
    @storybook/addon-essentials: ^6.4.0-rc.1 => 6.4.0-rc.1
    @storybook/addon-links: ^6.4.0-rc.1 => 6.4.0-rc.1
    @storybook/angular: ^6.4.0-rc.1 => 6.4.0-rc.1

附加上下文

询问问题的Discord消息： https://discord.com/channels/486522875931656193/490770949910691862/909823122759381103

storybook

5条答案

按热度按时间
ugmeyewa

ugmeyewa1#

我刚刚遇到了同样的问题，想知道是否有解决方法？

赞(0）分享  回复(0）举报  3个月前
tcbh2hod

tcbh2hod2#

大家好！最近似乎没有太多关于这个问题的进展。如果还有问题、评论或错误，请随时继续讨论。遗憾的是，我们没有时间处理每一个问题。我们始终欢迎贡献，所以如果你想帮忙，请发送一个pull request。30天后未活跃的问题将被关闭。谢谢！

赞(0）分享  回复(0）举报  3个月前
iecba09b

iecba09b3#

我也遇到了与Angular 10.2.5和storybook 6.4.13相同的问题。

赞(0）分享  回复(0）举报  3个月前
jfewjypa

jfewjypa4#

我也遇到了同样的问题，Angular 10
Angular CLI: 10.2.4
Node: 14.15.0
OS: win32 x64
Angular: 10.2.5
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router
Ivy Workspace: Yes

Package Version

@angular-devkit/architect 0.1002.4
@angular-devkit/build-angular 0.1002.4
@angular-devkit/core 10.2.4
@angular-devkit/schematics 10.2.4
@angular/cli 10.2.4
@schematics/angular 10.2.4
@schematics/update 0.1002.4
ng-packagr 10.1.2
rxjs 6.6.7
typescript 4.5.5
Storybook 6.4.19

赞(0）分享  回复(0）举报  3个月前
4c8rllxm

4c8rllxm5#

对于我来说，也遇到了同样的问题。这个问题来自于这个链接：https://github.com/storybookjs/storybook/blob/next/code/frameworks/angular/src/server/angular-cli-webpack.js#L10
因为 "@angular-devkit/build-angular/src/webpack/configs" 不存在，它只出现在 @angular-devkit/build-angular 的 0.1102.19 版本中(而不是在 0.1002.4 版本中)。

我发现 getCommonConfig 和 getStylesConfig 在 @angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs 中：

const { getCommonConfig, getStylesConfig } = require('@angular-devkit/build-angular/src/angular-cli-files/models/webpack-configs');

但是我找不到 getDevServerConfig 和 getTypeScriptConfig,有什么建议吗？

赞(0）分享  回复(0）举报  3个月前
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com