[Bug]: Expected your framework's preset to export a `renderToCanvas` field: After Migration to V8

Describe the bug

Hi there, I have just upgraded my stencil.js repository, which uses storybook, from 7 to 8.

When I locally start storybook, I do not get any console errors. However the browser does not render any stories but give the error "Expected your framework's preset to export a renderToCanvas field.".

The framework I am using is html-vite. Dependencies can be seen in system section.

main.ts in storybook folder

import { mergeConfig } from 'vite';
import baseConfig from '../vite.config';

const config: StorybookConfig = {
  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: [
    '@storybook/addon-links',
    '@storybook/addon-essentials',
    '@storybook/addon-interactions',
    '@storybook/addon-a11y',
    {
      name: '@storybook/addon-coverage',
      options: {
        istanbul: {
          exclude: ['**/index*.js', '**/loader.js'],
        },
      },
    },
    'storybook-addon-stencil',
    '@storybook/addon-designs',
    'storybook-addon-mock',
    'storybook-addon-cookie',
    '@storybook/addon-actions',
    '@storybook/addon-docs',
    '@storybook/addon-viewport',
  ],
  staticDirs: [
    {
      from: '../assets',
      to: '/assets',
    },
  ],
  framework: {
    name: '@storybook/html-vite',
    options: {},
  },
  async viteFinal(config) {
    return mergeConfig(config, baseConfig);
  },
};

export default config;

vite.config.ts

import autoprefixer from 'autoprefixer';
import path from 'path';
import { sourcemaps } from './.storybook/vite-plugin-sourcemaps';

const baseConfig = {
  css: {
    postcss: {
      plugins: [autoprefixer],
    },
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, '../src'),
    },
  },
  base: '',
  sourcemaps: true,
  plugins: [sourcemaps()],
};

export default baseConfig;

manager.ts

import { addons } from '@storybook/manager-api';

addons.setConfig({
  enableShortcuts: false,
});`

Is there any idea what the issue might be?

### Reproduction link

/no-repro-possible

### Reproduction steps

_No response_

### System

```bash
System:
    OS: Linux 5.10 openSUSE Leap 15.5
    CPU: (6) x64 Intel(R) Xeon(R) Gold 6248 CPU @ 2.50GHz
    Shell: 4.4.23 - /bin/bash
  Binaries:
    Node: 20.8.1 - /usr/local/bin/node
    npm: 10.1.0 - /usr/local/bin/npm <----- active
  npmPackages:
    @storybook/addon-a11y: 8.2.6 => 8.2.6 
    @storybook/addon-actions: 8.2.6 => 8.2.6 
    @storybook/addon-coverage: 0.0.9 => 0.0.9 
    @storybook/addon-designs: ^8.0.3 => 8.0.3 
    @storybook/addon-docs: 8.2.6 => 8.2.6 
    @storybook/addon-essentials: 8.2.6 => 8.2.6 
    @storybook/addon-interactions: 8.2.6 => 8.2.6 
    @storybook/addon-links: 8.2.6 => 8.2.6 
    @storybook/addon-viewport: 8.2.6 => 8.2.6 
    @storybook/html-vite: 8.2.6 => 8.2.6 
    @storybook/test: 8.2.6 => 8.2.6 
    @storybook/test-runner: 0.17.0 => 0.17.0 
    eslint-plugin-storybook: 0.6.15 => 0.6.15 
    storybook: 8.2.6 => 8.2.6 
    storybook-addon-cookie: 4.0.0-alpha.0 => 4.0.0-alpha.0 
    storybook-addon-mock: ^5.0.0 => 5.0.0 
    storybook-addon-stencil: 0.2.1 => 0.2.1

Additional context

No response

Disclaimer This information might be inaccurate, due to it being generated automatically To resolve the issue, ensure that the renderToCanvas function is exported in the @storybook/html-vite framework preset. This function is likely located in the /code/renderers/html/src/client/preview/render.ts file. Add the following export if it is missing:

export function renderToCanvas({ storyFn, showMain, showError, forceRemount }) {
  // Implementation of renderToCanvas
}

Then, ensure that the preset.js file in /code/renderers/html includes this export:

module.exports = {
  renderToCanvas: require('./dist/render').renderToCanvas,
};

References

/code/core/src/preview-errors.ts /code/lib/cli/src/automigrate/fixes/new-frameworks.ts /code/core/src/telemetry/storybook-metadata.test.ts /code/core/src/server-errors.ts /code/lib/cli/src/automigrate/fixes/addon-postcss.ts /code/lib/cli/src/automigrate/fixes/new-frameworks.test.ts /code/core/src/preview-api/modules/store/csf/prepareStory.test.ts /code/.storybook /code/lib/cli/src/generators/configure.test.ts /code/lib/cli/src/automigrate/fixes/cra5.ts /code/addons/onboarding/package.json /code/frameworks/html-webpack5 /code/core/src/csf-tools/ConfigFile.test.ts /code/lib/cli/src/automigrate/index.test.ts /code/lib/cli/src/automigrate/fixes/angular-builders-multiproject.ts /code/renderers/svelte/src/portable-stories.ts /docs/addons/addon-migration-guide.mdx /code/lib/cli/src/automigrate/fixes/prompt-remove-react.ts /docs/_snippets/web-components-vite-add-framework.md /docs/_snippets/svelte-vite-add-framework.md /code/renderers/html /code/frameworks/sveltekit/template/stories_svelte-kit-prerelease-ts/forms.stories.js /test-storybooks/portable-stories-kitchen-sink/react/.storybook/main.ts /docs/_snippets/main-config-core-enable-crash-reports.md /code/lib/cli/src/automigrate/fixes/vue3.ts

#### About Greptile

This response provides a starting point for your research, not a precise solution. Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant. [Ask Greptile](https://app.greptile.com/chat/github/storybookjs/storybook/next) · [Edit Issue Bot Settings](https://app.greptile.com/apps/github)

Hi, thanks for reporting this. do you have a reproduction repo you can share? If not, can you please create one via storybook.new? We prioritize bug reports that have reproduction. Thank you! 🙏

storybookjs / storybook