將 Storybook 添加到 Nx Angular v11 專案后，我無法構建和運行它。該專案最近遷移到 Nx。該專案的構建和服務沒有問題，我能夠毫無問題地添加一個 e2e 應用程式。
? npx nx build-storybook client
> nx run client:build-storybook
> NX ui framework: @storybook/angular
> NX Storybook builder starting ...
info => Cleaning outputDir: /repos/project/dist/storybook/client
info => Loading presets
info => Compiling manager..
info => Compiling preview..
info => Found custom tsconfig.json
info => Using implicit CSS loaders
info => Loading angular-cli config for angular lower than 12.2.0
info => Using angular project "client:build" for configuring Storybook
info => Using angular-cli webpack config
info => Loading custom Webpack config (full-control mode).
Starting type checking service...
(node:35617) DeprecationWarning: Default PostCSS plugins are deprecated. When switching to '@storybook/addon-postcss',
you will need to add your own plugins, such as 'postcss-flexbugs-fixes' and 'autoprefixer'.
See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-default-postcss-plugins for details.
(Use `node --trace-deprecation ...` to show where the warning was created)
ERR! => Failed to build the manager
ERR! Module not found: Error: Can't resolve '@storybook/addon-knobs/register' in '/repos/project'
Module not found: Error: Can't resolve '@storybook/addon-knobs/register' in '/repos/project'
要添加 Storybook，我運行了以下命令：
nx g @nrwl/angular:storybook-configuration --name=client
以下是有關未經修改的結果配置的一些相關細節。
我懷疑這是一個 webpack 配置問題。誰能發現我的問題是什么？謝謝。
? npx nx report
> NX Report complete - copy this into the issue template
Node : 14.16.1
OS : darwin x64
npm : 7.24.2
nx : Not Found
@nrwl/angular : 11.6.3
@nrwl/cli : 11.6.3
@nrwl/cypress : 11.6.3
@nrwl/devkit : 11.6.3
@nrwl/eslint-plugin-nx : 11.6.3
@nrwl/express : 11.6.3
@nrwl/jest : 11.6.3
@nrwl/linter : 11.6.3
@nrwl/nest : Not Found
@nrwl/next : Not Found
@nrwl/node : 11.6.3
@nrwl/react : Not Found
@nrwl/schematics : Not Found
@nrwl/tao : 11.6.3
@nrwl/web : Not Found
@nrwl/workspace : 11.6.3
@nrwl/storybook : 11.6.3
@nrwl/gatsby : Not Found
typescript : 4.0.8
? cat package.json
{
...
"dependencies": {
"@angular/animations": "11.2.14",
"@angular/cdk": "^11.2.13",
"@angular/common": "11.2.14",
"@angular/compiler": "11.2.14",
"@angular/core": "11.2.14",
"@angular/forms": "11.2.14",
"@angular/google-maps": "^11.2.13",
"@angular/platform-browser": "11.2.14",
"@angular/platform-browser-dynamic": "11.2.14",
"@angular/platform-server": "11.2.14",
"@angular/router": "11.2.14",
...
},
"devDependencies": {
"@angular-builders/custom-webpack": "^11.1.1",
"@angular-devkit/build-angular": "~0.1102.0",
"@angular-eslint/eslint-plugin": "~1.0.0",
"@angular-eslint/eslint-plugin-template": "~1.0.0",
"@angular-eslint/template-parser": "~1.0.0",
"@angular/cli": "^11.2.0",
"@angular/compiler-cli": "^11.2.0",
"@angular/elements": "^11.2.14",
"@angular/language-service": "^11.2.0",
"@babel/core": "^7.15.8",
"@compodoc/compodoc": "^1.1.15",
"@nrwl/angular": "11.6.3",
"@nrwl/cli": "11.6.3",
"@nrwl/cypress": "11.6.3",
"@nrwl/eslint-plugin-nx": "11.6.3",
"@nrwl/express": "11.6.3",
"@nrwl/jest": "11.6.3",
"@nrwl/linter": "11.6.3",
"@nrwl/node": "11.6.3",
"@nrwl/storybook": "^11.6.3",
"@nrwl/tao": "11.6.3",
"@nrwl/workspace": "11.6.3",
"@storybook/addon-actions": "^6.3.12",
"@storybook/addon-essentials": "^6.3.12",
"@storybook/addon-knobs": "^6.1.11",
"@storybook/addon-links": "^6.3.12",
"@storybook/angular": "^6.3.12",
...
"ts-node": "~9.1.1",
"typescript": "^4.0.8",
"webpack-bundle-analyzer": "^3.3.2"
},
...
? cat .storybook/tsconfig.json
{
"extends": "../tsconfig.base.json",
"exclude": [
"../**/*.spec.js",
"../**/*.spec.ts",
"../**/*.spec.tsx",
"../**/*.spec.jsx"
],
"include": ["../**/*"]
}
? cat apps/client/.storybook/tsconfig.json
{
"extends": "../tsconfig.json",
"compilerOptions": {
"emitDecoratorMetadata": true
},
"exclude": ["../**/*.spec.ts" ],
"include": ["../src/**/*", "*.js"]
}
? cat .storybook/webpack.config.js
/**
* Export a function. Accept the base config as the only param.
* @param {Object} options
* @param {Required<import('webpack').Configuration>} options.config
* @param {'DEVELOPMENT' | 'PRODUCTION'} options.mode - change the build configuration. 'PRODUCTION' is used when building the static version of storybook.
*/
module.exports = async ({ config, mode }) => {
// Make whatever fine-grained changes you need
// Return the altered config
return config;
};
? cat apps/client/.storybook/webpack.config.js
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
const rootWebpackConfig = require('../../../.storybook/webpack.config');
/**
* Export a function. Accept the base config as the only param.
*
* @param {Parameters<typeof rootWebpackConfig>[0]} options
*/
module.exports = async ({ config, mode }) => {
config = await rootWebpackConfig({ config, mode });
const tsPaths = new TsconfigPathsPlugin({
configFile: './tsconfig.base.json',
});
config.resolve.plugins
? config.resolve.plugins.push(tsPaths)
: (config.resolve.plugins = [tsPaths]);
return config;
};
? cat .storybook/main.js
module.exports = {
stories: [],
addons: ['@storybook/addon-knobs/register'],
};
? cat apps/client/.storybook/main.js
const rootMain = require('../../../.storybook/main');
// Use the following syntax to add addons!
// rootMain.addons.push('');
rootMain.stories.push(
...['../src/app/**/*.stories.mdx', '../src/app/**/*.stories.@(js|jsx|ts|tsx)']
);
module.exports = rootMain;
uj5u.com熱心網友回復：
無論如何，插件旋鈕已被棄用，因此請嘗試將其洗掉并安裝插件控制元件 https://www.npmjs.com/package/@storybook/addon-knobs
uj5u.com熱心網友回復：
此錯誤的根本原因是 addon-knobs 沒有注冊模塊。它有一個預設模塊。
改變
addons: ['@storybook/addon-knobs/register']
到
addons: ['@storybook/addon-knobs/preset']
解決模塊未找到錯誤。
但是，正如@marko 建議的那樣，更好的解決方案是遷移到插件控制元件。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/406590.html
標籤：