[Vite] Can't instrument code when serving production build

[landoephan]

Describe the bug I'm having a storybook with vue3 and vite. I want to measure my code coverage via istanbul when I run playwright tests. Therefore I configured my storybook vite under .storybook/main.ts as follows:

const config: StorybookViteConfig = {
 ....
  typescript: {
    check: false,
    checkOptions: {},
  },
  framework: '@storybook/vue3',
  core: {
    builder: '@storybook/builder-vite',
  },
 ...
  async viteFinal(config, { configType }) {
    return mergeConfig(config, {
      plugins: [
        istanbul({
          include: 'src/*',
          exclude: ['node_modules', 'test/'],
          extension: ['.js', '.ts', '.vue'],
        }),
      ],
      ....
    })
  },
}
export default config

When I run storybook in dev mode with start-storybook -p 6006 and execute my playwright tests afterwards, the code is instrumented (coverage is not null) and a code coverage is measured.

However, when I build storybook and start the static build afterwards with these commands: build-storybook && http-server storybook-static --port 6006, the website works fine, but the coverage variable doesn't exist and no code coverage is measured

System System: OS: macOS 12.6 CPU: (10) arm64 Apple M1 Pro Binaries: Node: 16.16.0 - ~/.nvm/versions/node/v16.16.0/bin/node npm: 8.11.0 - ~/.nvm/versions/node/v16.16.0/bin/npm Browsers: Chrome: 105.0.5195.102 Firefox: 104.0.2 Safari: 16.0 npmPackages: @storybook/addon-a11y: 6.5.12 => 6.5.12 @storybook/addon-actions: 6.5.12 => 6.5.12 @storybook/addon-essentials: 6.5.12 => 6.5.12 @storybook/addon-interactions: 6.5.12 => 6.5.12 @storybook/addon-links: 6.5.12 => 6.5.12 @storybook/builder-vite: 0.2.2 => 0.2.2 @storybook/testing-library: 0.0.13 => 0.0.13 @storybook/vue3: 6.5.12 => 6.5.12

Additional context Add any other context about the problem here.

[joaomelo]

I'm having the same issue

[stuthib]

Relieved to see this is an issue. I am having the same problem but using react with vite and trying to figure out for a few days now. Works fine on dev mode but fails saying the story is not instrumented on production build.

[yannbf]

Hey all, thanks for opening this issue! It's definitely related to how the build process is done in Vite Storybooks. @IanVS would you be so kind to chime in?

[yannbf]

Hey peeps, v0.0.7 was released with a fix for this. Could you try it out? Thank you!

[stuthib]

Hey peeps, v0.0.7 was released with a fix for this. Could you try it out? Thank you!

Wohoo! works now @yannbf , thanks a ton for fixing this so quickly.

[yannbf]

Thanks for trying and giving the feedback!

[landoephan]

Hi, I'm not using the coverage addon, is the fix only valid there? I would have expected an update in @storybook/builder-vite

[IanVS]

@landoephan if you're using Istanbul directly you can replicate the fix that Yann made in your call to the plugin.

[yannbf]

Hey @landoephan you can see the change here and replicate it: https://github.com/storybookjs/addon-coverage/blob/main/src/preset.ts#L15

But I wonder your use case for not using the addon? You could just drop your whole viteFinal and install @storybook/addon-coverage instead, which will do the job for you (and equally configurable)?

[landoephan]

I don't really need the plugin since I'm not using the storybook testrunner, but playwright

[landoephan]

but it works, thanks a lot!

[yannbf]

Hey @landoephan thanks for getting back to me! I'd really love to see how you're achieving code coverage with playwright. Can we talk on discord or twitter?

https://twitter.com/yannbf Yann#9096 on discord

[rbright]

I encountered this issue and determined the root cause to be a conflict with the @storybook/addon-coverage library and vite-plugin-turbosnap (required to properly use Chromatic's Turbosnap functionality with Vite). My solution was to extract the viteFinal declaration from @storybook/addon-coverage and add it directly to my Storybook configuration rather than using the addon.

async viteFinal(config, { configType }) {
  return mergeConfig(config, {
    build: {
      sourcemap: true,
    },
    plugins:
      configType === 'PRODUCTION'
        ? [turbosnap({ rootDir: config.root ?? process.cwd() })]
        : [
            // Replicate @storybook/addon-coverage behavior, since it conflicts with this viteFinal declaration.
            istanbul({
              include: [],
              exclude: [
                '.storybook/**',
                'coverage/**',
                '**/*.d.ts',
                'test{,s}/**',
                `test{,-*}.{ts,tsx}`,
                `**/*{.,-}{spec,stories,types}.{ts,tsx}`,
                '**/__tests__/**',

                /* Exclude common development tool configuration files */
                '**/{ava,babel,nyc}.config.{js,cjs,mjs}',
                '**/jest.config.{js,cjs,mjs,ts}',
                '**/{karma,rollup,webpack}.config.js',
                '**/.{eslint,mocha}rc.{js,cjs}',
              ],
              extension: ['.tsx'],
            }),
          ],
  });
}