在 Angular Nx Monorepo 中找不到构建 Storybook 的模块
Module not found building Storybook in an Angular Nx Monorepo
将 Storybook 添加到 Nx Angular v11 项目后，我无法构建和 运行 Storybook。该项目最近已迁移到 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;
无论如何，Addon-knobs 已被弃用，因此请尝试将其删除并安装 addon-controls
https://www.npmjs.com/package/@storybook/addon-knobs
这个错误的根本原因是addon-knobs没有register模块。它有一个预设模块。
改变
addons: ['@storybook/addon-knobs/register']
至
addons: ['@storybook/addon-knobs/preset']
解决了找不到模块的错误。
但是，正如@marko 所建议的，更好的解决方案是迁移到插件控件。
将 Storybook 添加到 Nx Angular v11 项目后，我无法构建和 运行 Storybook。该项目最近已迁移到 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;
无论如何，Addon-knobs 已被弃用，因此请尝试将其删除并安装 addon-controls https://www.npmjs.com/package/@storybook/addon-knobs
这个错误的根本原因是addon-knobs没有register模块。它有一个预设模块。
改变
addons: ['@storybook/addon-knobs/register']
至
addons: ['@storybook/addon-knobs/preset']
解决了找不到模块的错误。
但是，正如@marko 所建议的，更好的解决方案是迁移到插件控件。