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

[cap-anna]

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 type { StorybookConfig } from '@storybook/html-vite';
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

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

[greptile-apps]

** 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 · Edit Issue Bot Settings