[Bug] TypeError: Cannot read properties of undefined (reading 'envPrefix') at createViteServer /@storybook/builder-vite/dist/vite-server.js:29:72

[kontibosun]

What version of vite are you using?

4.0.0

System info and storybook versions

System: OS: macOS 13.0 CPU: (8) arm64 Apple M2 Binaries: Node: 16.19.0 - ~/.nvm/versions/node/v16.19.0/bin/node Yarn: 1.22.19 - /usr/local/bin/yarn npm: 8.19.3 - ~/.nvm/versions/node/v16.19.0/bin/npm Browsers: Chrome: 110.0.5481.177 Safari: 16.1 npmPackages: @storybook/addon-actions: ^6.5.16 => 6.5.16 @storybook/addon-essentials: ^6.5.16 => 6.5.16 @storybook/addon-interactions: ^6.5.16 => 6.5.16 @storybook/addon-links: ^6.5.16 => 6.5.16 @storybook/builder-vite: ^0.4.2 => 0.4.2 @storybook/testing-library: ^0.0.13 => 0.0.13 @storybook/vue3: ^6.5.16 => 6.5.16

Describe the Bug

Tried to run the storybook yarn storybook

Following occured:

yarn run v1.22.19
$ start-storybook -p 6006
info @storybook/vue3 v6.5.16
info 
info => Loading presets
ERR! TypeError: Cannot read properties of undefined (reading 'envPrefix')
ERR!     at createViteServer (/private/var/www/michaelangelo/node_modules/@storybook/builder-vite/dist/vite-server.js:29:72)
ERR!     at async Object.start (/private/var/www/michaelangelo/node_modules/@storybook/builder-vite/dist/index.js:64:14)
ERR!     at async Promise.all (index 0)
ERR!     at async storybookDevServer (/private/var/www/michaelangelo/node_modules/@storybook/core-server/dist/cjs/dev-server.js:203:28)
ERR!     at async buildDevStandalone (/private/var/www/michaelangelo/node_modules/@storybook/core-server/dist/cjs/build-dev.js:120:31)
ERR!     at async buildDev (/private/var/www/michaelangelo/node_modules/@storybook/core-server/dist/cjs/build-dev.js:174:5)
ERR!  TypeError: Cannot read properties of undefined (reading 'envPrefix')
ERR!     at createViteServer (/private/var/www/michaelangelo/node_modules/@storybook/builder-vite/dist/vite-server.js:29:72)
ERR!     at async Object.start (/private/var/www/michaelangelo/node_modules/@storybook/builder-vite/dist/index.js:64:14)
ERR!     at async Promise.all (index 0)
ERR!     at async storybookDevServer (/private/var/www/michaelangelo/node_modules/@storybook/core-server/dist/cjs/dev-server.js:203:28)
ERR!     at async buildDevStandalone (/private/var/www/michaelangelo/node_modules/@storybook/core-server/dist/cjs/build-dev.js:120:31)
ERR!     at async buildDev (/private/var/www/michaelangelo/node_modules/@storybook/core-server/dist/cjs/build-dev.js:174:5)

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

info => Loading presets
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Tried removing node_modules and did npm i also tried with yarn install. All same results, no luck.

Following is my main.js file:

const path = require('path');

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions"
  ],
  "framework": "@storybook/vue3",
  "core": {
    "builder": "@storybook/builder-vite"
  },
  "features": {
    "storyStoreV7": true
  },
  async viteFinal(config, { configType }) {
    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
    // You can change the configuration based on that.
    // 'PRODUCTION' is used when building the static version of storybook.
    config.resolve.alias['~storybook'] = path.resolve(__dirname);
    config.resolve.alias['@'] = path.resolve(__dirname, '..', 'src');

    config.css = {
      preprocessorOptions: {
        scss: { additionalData: `@import src/styles/main.scss;` },
      },
    };

    config.plugins = [
      ...config.plugins,
    ];
  },
}

I noticed if I comment out async viteFinal(), it will work.

Link to Minimal Reproducible Example

No response

Participation

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

[Jack-Barry]

Ran into this a bit ago, needed to return config from the viteFinal function

[IanVS]

Ah, yes that is most likely the cause, thanks for sharing, @Jack-Barry.

@kontibosun Please let us know if that doesn't solve your issue.

[kontibosun]

Ran into this a bit ago, needed to return config from the viteFinal function

OMG this worked! Thanks man!