Storybook build fails after upgrade v12 => v13

[oco2000]

Current Behavior

Storybook build fails

Expected Behavior

Storybook build passes

Steps to Reproduce

Upgrade the existing project using standard migration procedure

Failure Logs

ERROR in Template execution failed: ReferenceError: options is not defined
ERROR in ReferenceError: options is not defined

  - index.ejs:12 
    [build]/[core-server]/[@storybook]/core-common/dist/cjs/templates/index.ejs:    12:11

  - index.ejs:62 module.exports
    [build]/[core-server]/[@storybook]/core-common/dist/cjs/templates/index.ejs:    62:3

  - index.js:450 
    [build]/[manager-webpack5]/[html-webpack-plugin]/index.js:450:16

  - runMicrotasks

  - task_queues.js:95 processTicksAndRejections
    internal/process/task_queues.js:95:5

  - async Promise.all
manager (webpack 5.47.1) compiled with 2 errors in 277821 ms

Environment

  Node : 14.17.0
  OS   : win32 x64
  yarn : 1.22.17

  nx : 13.2.2
  @nrwl/angular : 13.2.2
  @nrwl/cli : 13.2.2
  @nrwl/cypress : 13.2.2
  @nrwl/devkit : 13.2.2
  @nrwl/eslint-plugin-nx : 13.2.2
  @nrwl/express : 13.2.2
  @nrwl/jest : 13.2.2
  @nrwl/linter : 13.2.2
  @nrwl/nest : undefined
  @nrwl/next : undefined
  @nrwl/node : 13.2.2
  @nrwl/nx-cloud : undefined
  @nrwl/react : undefined
  @nrwl/react-native : undefined
  @nrwl/schematics : undefined
  @nrwl/tao : 13.2.2
  @nrwl/web : undefined
  @nrwl/workspace : 13.2.2
  @nrwl/storybook : 13.2.2
  @nrwl/gatsby : undefined
  typescript : 4.4.4
  rxjs : 6.6.6
  ---------------------------------------
  Community plugins:
         @angular/animations: 13.0.0
         @angular/cdk: 13.0.0
         @angular/cli: 13.0.3
         @angular/common: 13.0.0
         @angular/compiler: 13.0.0
         @angular/core: 13.0.0
         @angular/elements: 13.0.0
         @angular/forms: 13.0.0
         @angular/material: 13.0.0
         @angular/platform-browser: 13.0.0
         @angular/platform-browser-dynamic: 13.0.0
         @angular/router: 13.0.0
         @angular/service-worker: 13.0.0
         @ionic/angular: 5.9.1
         @ngneat/reactive-forms: 1.7.5
         @ngneat/transloco: 2.23.5
         @ngrx/component-store: 13.0.1
         @ngrx/effects: 13.0.1
         @ngrx/entity: 13.0.1
         @ngrx/router-store: 13.0.1
         @ngrx/store: 13.0.1
         @angular-builders/custom-webpack: 12.1.3
         @angular-devkit/build-angular: 13.0.3
         @angular/compiler-cli: 13.0.0
         @angular/language-service: 13.0.0
         @ngneat/spectator: 8.3.2
         @ngrx/schematics: 13.0.1
         @ngrx/store-devtools: 13.0.1
         @nxext/stencil: 12.1.2
         @nxtend/capacitor: 11.1.1
         @nxtend/ionic-angular: 11.1.1
         @storybook/angular: 6.4.0-rc.3
         ng-mocks: 12.5.0
         nx-stylelint: 12.3.1

.storybook/main.js

const rootMain = require('../../../../.storybook/main');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');

module.exports = {
  ...rootMain,
  stories: [...rootMain.stories, '../src/lib/**/*.stories.mdx', '../src/lib/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [...rootMain.addons, '@etchteam/storybook-addon-status'],
  core: { ...module.exports.core, builder: 'webpack5' },
  webpackFinal: async (config, { configType }) => {
    // apply any global webpack configs that might have been specified in .storybook/main.js
    if (rootMain.webpackFinal) {
      config = await rootMain.webpackFinal(config, { configType });
    }

    // add your own webpack tweaks if needed

    // We need this to get rid of 'ZoneAwarePromise (window|global).Promise has been overwritten' error
    // https://github.com/storybookjs/storybook/issues/7318
    config.resolve = config.resolve || {};
    config.resolve.alias['core-js/modules/es.promise.js$'] = false;

    config.resolve.plugins = config.resolve.plugins || [];
    config.resolve.plugins.push(
      new TsconfigPathsPlugin({
        configFile: 'libs/shared/ui-core/.storybook/tsconfig.json'
      })
    );

    return config;
  }
};

[kbrilla]

Storybook issue on the problem, also form what I read in nx changelog on storybook this part

config.resolve.plugins.push(
      new TsconfigPathsPlugin({
        configFile: 'libs/shared/ui-core/.storybook/tsconfig.json'
      })
    );

wont be needed anymore

[juristr]

@oco2000 can you try removing the section about TsconfigPathsPlugin. That shouldn't be required anymore.

Our migrations can only handle so much, given that the Storybook config files are JS files that can be highly customized. The best is to create a new Nx v13 workspace, generate a storybook setup and compare the config files and adjust accordingly.

If you still encounter the same error, could you please create a minimal reproduction repository and share it with me?

[kbrilla]

I have a similar problem, and removing tsconfig plugin config didn't help, actually, I tried adding it as a workaround. You can view a sample project in this issue on storybook. Maybe together You can find out what's happening.

https://github.com/storybookjs/storybook/issues/16759

[kbrilla]

Ok, I managed to get my project working by adding manually aliases to my libs.

So in tsconfig.base.json I have

paths: [
'@my-domain/utils: ['libs/utils/src/index.ts']
]

and in main.js I add

 webpackFinal: async (config, { configType }) => {
    // apply any global webpack configs that might have been specified in .storybook/main.js
    if (rootMain.webpackFinal) {
      config = await rootMain.webpackFinal(config, { configType });
    }

    console.log('Now: ', config);

    config.resolve.alias = {
                           ...config.resolve.alias,
                           '@my-domain/utils' :  path.join(__dirname, '../../', '/utils/src/index.ts')
                            };

    console.log('Now2: ', config.resolve.alias);

    return config;
  },

my initial webpack config from console.log('Now: ', config);

 {
  name: 'preview',
  mode: 'development',
  bail: false,
  devtool: 'cheap-module-source-map',
  entry: [
    'C:\\repos\\my-project\\Frontend\\node_modules\\@storybook\\core-client\\dist\\esm\\globals\\polyfills.js',
    'C:\\repos\\my-project\\Frontend\\node_modules\\@storybook\\core-client\\dist\\esm\\globals\\globals.js',
    'C:\\repos\\my-project\\Frontend\\node_modules\\webpack-hot-middleware\\client.js?reload=true&quiet=false&noInfo=true',
    'C:\\repos\\my-project\\Frontend\\storybook-init-framework-entry.js',
    'C:\\repos\\my-project\\Frontend\\node_modules\\@storybook\\angular\\dist\\ts3.9\\client\\preview\\config.js-generated-config-entry.js',
    'C:\\repos\\my-project\\Frontend\\libs\\ui\\.storybook\\preview.js-generated-config-entry.js',
    'C:\\repos\\my-project\\Frontend\\generated-stories-entry.js',
    'C:\\repos\\my-project\\Frontend\\node_modules\\normalize.css\\normalize.css',
    'C:\\repos\\my-project\\Frontend\\libs\\ui\\styles\\styles.scss',
    'C:\\repos\\my-project\\Frontend\\apps\\myapp\\src\\styles.scss',
    'C:\\repos\\my-project\\Frontend\\apps\\myapp\\src\\polyfills.ts',
    'core-js/proposals/reflect-metadata'
  ],
  output: {
    path: 'C:\\repos\\my-project\\Frontend\\node_modules\\.cache\\storybook\\public',
    filename: '[name].iframe.bundle.js',
    publicPath: ''
  },
  stats: { preset: 'none', logging: 'error' },
  watchOptions: { ignored: /node_modules/ },
  ignoreWarnings: [ { message: /export '\S+' was not found in 'global'/ } ],
  plugins: [
    DedupeModuleResolvePlugin { options: [Object], modules: Map(0) {} },
    CopyPlugin { patterns: [Array], options: {} },
    LicenseWebpackPlugin { pluginOptions: [Object] },
    AnyComponentStyleBudgetChecker { budgets: [] },
    { apply: [Function: apply] },
    MiniCssExtractPlugin {
      _sortedModulesCache: [WeakMap],
      options: [Object],
      runtimeOptions: [Object]
    },
    SuppressExtractedTextChunksWebpackPlugin {},
    VirtualModulesPlugin {
      _compiler: null,
      _watcher: null,
      _staticModules: [Object]
    },
    HtmlWebpackPlugin { userOptions: [Object], version: 5 },
    DefinePlugin { definitions: [Object] },
    ProvidePlugin { definitions: [Object] },
    WatchMissingNodeModulesPlugin {
      nodeModulesPath: 'C:\\repos\\my-project\\Frontend\\node_modules'
    },
    HotModuleReplacementPlugin { options: {} },
    CaseSensitivePathsPlugin {
      options: {},
      logger: [Object [console]],
      pathCache: Map(0) {},
      fsOperations: 0,
      primed: false
    },
    ContextReplacementPlugin {
      resourceRegExp: /@angular(\\|\/)core(\\|\/)(fesm5|bundles)/,
      newContentResource: 'C:\\repos\\my-project\\Frontend\\node_modules\\@storybook\\angular\\dist\\ts3.9',
      newContentRecursive: undefined,
      newContentRegExp: undefined
    },
    ForkTsCheckerWebpackPlugin {
      eslint: false,
      eslintOptions: {},
      tsconfigPath: undefined,
      compiler: undefined,
      started: undefined,
      elapsed: undefined,
      cancellationToken: undefined,
      isWatching: false,
      checkDone: false,
      compilationDone: false,
      diagnostics: [],
      lints: [],
      eslintVersion: undefined,
      startAt: 0,
      nodeArgs: [],
      options: [Object],
      ignoreDiagnostics: [],
      ignoreLints: [],
      ignoreLintWarnings: false,
      reportFiles: [],
      logger: [Object [console]],
      silent: false,
      async: false,
      checkSyntacticErrors: false,
      resolveModuleNameModule: undefined,
      resolveTypeReferenceDirectiveModule: undefined,
      memoryLimit: 2048,
      formatter: [Function: defaultFormatter],
      rawFormatter: [Function: rawFormatter],
      emitCallback: [Function: noopEmitCallback],
      doneCallback: [Function: doneCallback],
      typescript: [Object],
      typescriptPath: 'C:\\repos\\my-project\\Frontend\\node_modules\\typescript\\lib\\typescript.js',
      typescriptVersion: '4.4.4',
      tsconfig: 'C:\\repos\\my-project\\Frontend\\libs\\ui\\.storybook\\tsconfig.json',
      compilerOptions: {},
      vue: [Object],
      useTypescriptIncrementalApi: true,
      measureTime: false
    }
  ],
  module: {
    rules: [
      [Object], [Object],
      [Object], [Object],
      [Object], [Object],
      [Object], [Object],
      [Object], [Object],
      [Object], [Object],
      [Object], [Object],
      [Object]
    ]
  },
  resolve: {
    extensions: [
      '.mjs', '.js',
      '.jsx', '.ts',
      '.tsx', '.json',
      '.cjs'
    ],
    modules: [ 'node_modules', 'C:/repos/my-project/Frontend' ],
    mainFields: [
      'es2015_ivy_ngcc',
      'module_ivy_ngcc',
      'main_ivy_ngcc',
      'es2015',
      'browser',
      'module',
      'main'
    ],
    alias: {
      '@emotion/core': 'C:\\repos\\my-project\\Frontend\\node_modules\\@emotion\\core',
      '@emotion/styled': 'C:\\repos\\my-project\\Frontend\\node_modules\\@emotion\\styled',
      'emotion-theming': 'C:\\repos\\my-project\\Frontend\\node_modules\\emotion-theming',
      '@storybook/addons': 'C:\\repos\\my-project\\Frontend\\node_modules\\@storybook\\builder-webpack5\\node_modules\\@storybook\\addons',
      '@storybook/api': 'C:\\repos\\my-project\\Frontend\\node_modules\\@storybook\\builder-webpack5\\node_modules\\@storybook\\api',
      '@storybook/channels': 'C:\\repos\\my-project\\Frontend\\node_modules\\@storybook\\builder-webpack5\\node_modules\\@storybook\\channels',
      '@storybook/channel-postmessage': 'C:\\repos\\my-project\\Frontend\\node_modules\\@storybook\\channel-postmessage',
      '@storybook/components': 'C:\\repos\\my-project\\Frontend\\node_modules\\@storybook\\builder-webpack5\\node_modules\\@storybook\\components',
      '@storybook/core-events': 'C:\\repos\\my-project\\Frontend\\node_modules\\@storybook\\builder-webpack5\\node_modules\\@storybook\\core-events',
      '@storybook/router': 'C:\\repos\\my-project\\Frontend\\node_modules\\@storybook\\builder-webpack5\\node_modules\\@storybook\\router',
      '@storybook/theming': 'C:\\repos\\my-project\\Frontend\\node_modules\\@storybook\\builder-webpack5\\node_modules\\@storybook\\theming',
      '@storybook/semver': 'C:\\repos\\my-project\\Frontend\\node_modules\\@storybook\\builder-webpack5\\node_modules\\@storybook\\semver',
      '@storybook/client-api': 'C:\\repos\\my-project\\Frontend\\node_modules\\@storybook\\client-api',
      '@storybook/client-logger': 'C:\\repos\\my-project\\Frontend\\node_modules\\@storybook\\builder-webpack5\\node_modules\\@storybook\\client-logger',
      react: 'C:\\repos\\my-project\\Frontend\\node_modules\\react',
      'react-dom': 'C:\\repos\\my-project\\Frontend\\node_modules\\react-dom'
    },
    fallback: { path: false, crypto: false, assert: false }
  },
  optimization: {
    splitChunks: { chunks: 'all' },
    runtimeChunk: true,
    sideEffects: true,
    usedExports: true,
    moduleIds: 'named',
    minimizer: []
  },
  performance: { hints: false },
  resolveLoader: { symlinks: true }
}

as You see its lacking '@my-domain/utils': 'C:\\repos\\my-project\\Frontend\\libs\\utils\\src\\index.ts' entry in alias

hope it will help at least a few of You as workaround for now

[juristr]

@oco2000 could you setup a minimum reproduction repository s.t. I can trace down the exact issue of where that options object is not provided correctly? 🙏

@criskrzysiu yep, while the TS Path mapping plugin should not be needed, there's indeed currently an issue on the Storybook side where the tsconfig inheritance won't be properly resolved. Thus the ts path mappings at a higher level (e.g. in the tsconfig.base.json) are not resolved properly

[ywongcais]

Getting this error on some dev machines but not all. Upgrade was from "12.10.0" to "13.2.3"

update: downgrading NX to 13.2.2 fixed it for me

[github-actions[bot]]

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs. If we missed this issue please reply to keep it active. Thanks for being a part of the Nx community! 🙏

[wwlh200]

you can install css-loader@3.6.0 and less-loader@5.0.0 and storybook/builder-webpack5@^6.4.9, this problem can be solved!

[github-actions[bot]]

This issue has been automatically marked as stale because it hasn't had any recent activity. It will be closed in 14 days if no further activity occurs. If we missed this issue please reply to keep it active. Thanks for being a part of the Nx community! 🙏

[mandarini]

Closing this for now, I think above PR should have fixed it. If issue persists, please let me know and I'll reopen!

[oco2000]

It's fixed by updating to the latest versions of SB, thanks to all!

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