storybook: storybook/react is missing renderToDOM function

@IanVS thank you for you reply.

Maybe this will help someone else :

I had to try npx storybook@next init -p tsx -b vite --package-manager yarn1 --type react with the turbo repo basic example to see if that works.

Under package I created a new storybook folder just next to the ui folder I installed vite, added the ui workspace to package.json

– apps — web — docs – packages — ui — storybook

// packages/storybook/packages.json
{
  "name": "storybook",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "dependencies": {
    "storybook": "7.0.0-rc.1",
    "ui": "workspace:*"
  },
  "devDependencies": {
    "@storybook/addon-essentials": "7.0.0-rc.1",
    "@storybook/addon-interactions": "7.0.0-rc.1",
    "@storybook/addon-links": "7.0.0-rc.1",
    "@storybook/blocks": "7.0.0-rc.1",
    "@storybook/react": "7.0.0-rc.1",
    "@storybook/react-vite": "7.0.0-rc.1",
    "@storybook/testing-library": "0.0.14-next.1",
    "prop-types": "15.8.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "vite": "^4.1.4"
  },
  "scripts": {
    "storybook": "storybook dev -p 6006",
    "build-storybook": "storybook build"
  }
}

For some reason storybook fails to resolve entry for package “ui”

13:44:42 [vite] Internal server error: Failed to resolve entry for package "ui". The package may have incorrect main/module/exports specified in its package.json.

So I had to add an alias to viteFinal in main.js

async viteFinal(config) {
    return mergeConfig(config, {
      resolve: {
        alias: {
          ui: "../../ui",
        },
      },
    });
  },

Edit 1: However, for some reason, I still have the same error even with the rc release in my initial project Failed to load preset: "@storybook\\react-vite\\preset"

Edit 2: Solved the first issue by installing @storybook/react-vite in the monorepo root.

Now I have a different issue

ERR! TypeError: previewBuilder.bail is not a function
ERR!     at C:\Workspace\node_modules\@storybook\cli\node_modules\@storybook\core-server\dist\index.js:27:6486
ERR!     at async storybookDevServer (C:\Workspace\node_modules\@storybook\cli\node_modules\@storybook\core-server\dist\index.js:27:6975)
ERR!     at async buildDevStandalone (C:\Workspace\node_modules\@storybook\cli\node_modules\@storybook\core-server\dist\index.js:40:2724)
ERR!     at async withTelemetry (C:\Workspace\node_modules\@storybook\cli\node_modules\@storybook\core-server\dist\index.js:27:3469)
ERR!     at async dev (C:\Workspace\node_modules\@storybook\cli\dist\generate.js:446:400)
ERR!     at async Command.<anonymous> (C:\Workspace\node_modules\@storybook\cli\dist\generate.js:448:327)
ERR!  TypeError: previewBuilder.bail is not a function
ERR!     at C:\Workspace\node_modules\@storybook\cli\node_modules\@storybook\core-server\dist\index.js:27:6486
ERR!     at async storybookDevServer (C:\Workspace\node_modules\@storybook\cli\node_modules\@storybook\core-server\dist\index.js:27:6975)
ERR!     at async buildDevStandalone (C:\Workspace\node_modules\@storybook\cli\node_modules\@storybook\core-server\dist\index.js:40:2724)
ERR!     at async withTelemetry (C:\Workspace\node_modules\@storybook\cli\node_modules\@storybook\core-server\dist\index.js:27:3469)
ERR!     at async dev (C:\Workspace\node_modules\@storybook\cli\dist\generate.js:446:400)
ERR!     at async Command.<anonymous> (C:\Workspace\node_modules\@storybook\cli\dist\generate.js:448:327)

WARN Broken build, fix the error above.
WARN You may need to refresh the browser.

error Command failed with exit code 1.

Environment Info:

  System:
    OS: Windows 10 10.0.19044
    CPU: (8) x64 Intel(R) Core(TM) i7-8565U CPU @ 1.80GHz
  Binaries:
    Node: 16.13.2 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.17 - C:\Workspace\node_modules\.bin\yarn.CMD
    npm: 8.1.2 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 110.0.5481.180
    Edge: Spartan (44.19041.1266.0), Chromium (110.0.1587.63)
  npmPackages:
    @storybook/addon-essentials: 7.0.0-rc.1 => 7.0.0-rc.1
    @storybook/addon-interactions: 7.0.0-rc.1 => 7.0.0-rc.1
    @storybook/addon-links: 7.0.0-rc.1 => 7.0.0-rc.1
    @storybook/blocks: 7.0.0-rc.1 => 7.0.0-rc.1
    @storybook/react: 7.0.0-rc.1 => 7.0.0-rc.1

@mandarini this is because your vite.config.ts is not in the same folder as you’re running the command from (not in CWD). A new option was recently added to handle this case, so in the most recent betas, you can update your main.js like this:

framework: {
    name: '@storybook/react-vite',
    options: {
      builder: {
        viteConfigPath: 'apps/main-vite/vite.config.ts',
      },
    },
  },

When I try this in your repo, after updating to beta.34, it builds fine after removing viteFinal.

@IanVS this was helpfull. Storybook is running.

@MarcelGeo if you’re using 7.0, there are some changes that are needed to your config file. See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#mainjs-framework-field for details, but basically you need to change the framework to @storybook/react-vite (and install it if it’s not already installed in your project, with the same version as the other packages). Also note, that you don’t need to use viteFinal anymore, if all you’re doing is duplicating config from your vite.config.js file, since storybook will read that config automatically now in 7.0.

@MarcelGeo can you share your main.cjs?

@hanscl Glad you got it working. FWIW, you no longer need to specify core.builder in 7.0 config. That’s handled by the framework now.

Ah, you’ll need to update builder-vite to 7.0, the same alpha as the rest.