builder-vite: [Bug] Cannot start storybook with newly generated project

What version of vite are you using?

3.0.0

System info and storybook versions

System:
    OS: macOS 12.4
    CPU: (8) arm64 Apple M1
  Binaries:
    Node: 16.16.0 - /opt/homebrew/bin/node
    Yarn: 1.22.19 - /opt/homebrew/bin/yarn
    npm: 8.11.0 - /opt/homebrew/bin/npm
  Browsers:
    Chrome: 103.0.5060.114
    Safari: 15.5
  npmPackages:
    @storybook/addon-actions: ^6.5.9 => 6.5.9 
    @storybook/addon-essentials: ^6.5.9 => 6.5.9 
    @storybook/addon-interactions: ^6.5.9 => 6.5.9 
    @storybook/addon-links: ^6.5.9 => 6.5.9 
    @storybook/builder-vite: ^0.2.0 => 0.2.0 
    @storybook/testing-library: ^0.0.13 => 0.0.13 
    @storybook/vue3: ^6.5.9 => 6.5.9

Describe the Bug

• Follow the guide https://github.com/storybookjs/builder-vite#getting-started-with-vite-and-storybook-on-a-new-project (I chose template vue-ts for Vite)
• Starting Storybook I ran into this exception

ERR! Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/anh.pham/my-vue-app/.storybook/main.js from /Users/anh.pham/my-vue-app/node_modules/@storybook/core-common/dist/cjs/utils/interpret-require.js not supported.
ERR! main.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
ERR! Instead rename main.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in /Users/anh.pham/my-vue-app/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

Link to Minimal Reproducible Example

https://github.com/ahnpnl/vite-sb-ts

Participation

• I am willing to submit a pull request for this issue.