Interactions not rendering in static build #30744

anderspollack · 2025-03-04T01:56:03Z

anderspollack
Mar 4, 2025

Summary

I recently implemented interaction tests for one of our components.
When running locally in with storybook dev --port 6006, I see my the interaction test UI with all steps:

Yet in a static build created with storybook build and viewed with a generic web server (npx http-server), I only see the empty Interactions panel

Additional information

Storybook version: 8.5.5
Node version: 22.4.1

Errors in browser console:

GET http://localhost:6006/sb-preview/runtime.js net::ERR_ABORTED 404 (Not Found)

[Storybook] One of your manager-entries failed: http://localhost:8080/sb-addons/storybook-13/manager-bundle.js TypeError: Cannot read properties of null (reading 'useContext')

Main configuration file:

import fs from 'node:fs';
import path from 'node:path';
import remarkGfm from 'remark-gfm';

export default {
  /**
   * Nota bene: addons are loaded in order
   * @see https://storybook.js.org/docs/addons/install-addons
   */
  addons: [
    '@storybook/addon-links',
    {
      name: '@storybook/addon-essentials',
      options: {
        docs: {
          mdxPluginOptions: { mdxCompileOptions: { remarkPlugins: [remarkGfm] }}
        }
      }
    },
    '@storybook/addon-mdx-gfm',
    '@storybook/addon-interactions',
    '@storybook/addon-a11y',
    // FIXME: Istanbul code coverage plugin may have a memory leak (DEV-18797)
    //'@storybook/addon-coverage',
    '@chromatic-com/storybook'
  ],
  /**
   * Configure Storybook production builds for testing purposes
   * @see https://storybook.js.org/docs/api/main-config-build#test
   */
  build: {
    test: {
      disabledAddons: [
        '@storybook/addon-a11y',
        '@storybook/addon-essentials/docs',
        '@storybook/addon-links'
      ],
      disableAutoDocs: true,
      disableBlocks: true,
      disableDocgen: true,
      disableMDXEntries: true,
      disableSourcemaps: true,
      disableTreeShaking: false
    }
  },
  core: {
    disableTelemetry: true,
    disableWhatsNewNotifications: true,
    enableCrashReports: false
  },
  /**
   * Configure auto-generated documentation
   * @see https://storybook.js.org/docs/api/main-config/main-config-docs
   */
  docs: {},
  /**
   * Enable/disable step debugging features
   * @see https://storybook.js.org/addons/@storybook/addon-interactions
   */
  features: {
    interactionsDebugger: true
  },
  /**
   * @see https://storybook.js.org/docs/get-started/frameworks/vue3-vite
   */
  framework: {
    name: '@storybook/vue3-vite',
    options: {
      docgen: 'vue-component-meta'
    }
  },
  /**
   * Programmatically modify the HTML <head> for stories
   * (instead of using a separate `preview-head.html` file).
   * @see https://storybook.js.org/docs/addons/writing-presets#previewmanager-templates
   *
   * Nota bene: work around for storybook#17516 and storybook#18399
   * @see https://github.com/storybookjs/storybook/issues/17516
   * @see https://github.com/storybookjs/storybook/issues/18399
   *
   * @param {String} head  the existing HTML Head Element content string
   * @return {String} the modified HTML Head Element content string
   */
  previewHead: (head) => {
    // borrowed from buildHeadLinks, not sure it's worth making it generic at this point
    const fontsDir = path.resolve(__dirname, '../src/assets/fonts');
    let fontLinks = '';
    // include the references to web fonts locally to improve page loading speed
    fs.readdirSync(fontsDir).forEach((fontFamilyDir) => {
      fs.readdirSync(path.join(fontsDir, fontFamilyDir)).forEach((fontFile) => {
        if (fontFile.includes('.woff2')) {
          fontLinks += `<link as="font" href="/assets/fonts/${fontFamilyDir}/${fontFile}" rel="preload" type="font/woff2" crossOrigin="anonymous">\n`;
        }
      });
    });
    return `
      ${head}
      ${fontLinks}
      <script>window.global = window;</script>
    `;
  },
  stories: [
    '../src/**/*.mdx',
    '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'
  ],
  /**
   * Directories of static files to be loaded by Storybook
   */
  staticDirs: [{ from: '../src/assets', to: 'assets/' }],
  /**
   * Customize Storybook's Vite setup when using the Vite builder
   * @see https://storybook.js.org/docs/api/main-config-vite-final
   *
   * @todo load and merge getty-ui/vite.config.js when refactoring for vite@5
   * Nota bene: dynamic import from vite will enusure the framework loads first
   */
  async viteFinal(config, { configType }) {
    const { loadConfigFromFile, mergeConfig } = await import('vite');

    // const { config: guiConfig } =
    //   await loadConfigFromFile(path.resolve(__dirname, '../vite.config.js'));

    return mergeConfig(config, {
      // ...guiConfig,
      /**
       * Importing assets from JS will return their resolved URL string
       * @see https://vitejs.dev/config/shared-options.html#assetsinclude
       */
      assetsInclude: ['**/*.md'],
      /**
       * Vite build options
       * @see https://vitejs.dev/config/build-options.html
       */
      build: {
        cssMinify: false,
        rollupOptions: {
          maxParallelFileOps: 2,
          output: {
            sourcemap: true,
            manualChunks: (id) => id.includes('node_modules') && 'vendor'
          }
        }
      }
    });
  }
};

Create a reproduction

No response

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Interactions not rendering in static build #30744

{{title}}

Replies: 0 comments

Select a reply

Interactions not rendering in static build #30744

anderspollack Mar 4, 2025

Summary

Additional information

Create a reproduction

Replies: 0 comments

anderspollack
Mar 4, 2025