Questions Regarding Storybook Implementation and 'base' Setting

[re-taro]

I am implementing Storybook into a project using vite-plugin-ssr. When I tried to pnpm dlx storybook@latest init to see how it works, I encountered the following error.

> pnpm storybook

> [email protected] storybook /home/re-taro/projects/github.com/re-taro/2023-hp
> cross-env NODE_ENV=storybook && storybook dev -p 6006

@storybook/cli v7.0.21

info => Starting manager..
ERR! Error: [[email protected]][Wrong Usage] vite.config.js#base should start with '/', 'http://', or 'https://' (it is ./ instead)
ERR!     at resolve (/home/re-taro/projects/github.com/re-taro/2023-hp/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/vite-plugin-ssr/dist/cjs/node/plugin/plugins/config/resolveBase.js:23:21)
ERR!     at resolveBaseFromUserConfig (/home/re-taro/projects/github.com/re-taro/2023-hp/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/vite-plugin-ssr/dist/cjs/node/plugin/plugins/config/resolveBase.js:17:12)
ERR!     at config (/home/re-taro/projects/github.com/re-taro/2023-hp/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/vite-plugin-ssr/dist/cjs/node/plugin/plugins/baseUrls.js:14:45)
ERR!     at runConfigHook (file:///home/re-taro/projects/github.com/re-taro/2023-hp/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-0bae2027.js:62096:31)
ERR!     at async Module.resolveConfig (file:///home/re-taro/projects/github.com/re-taro/2023-hp/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-0bae2027.js:61597:14)
ERR!     at getOptimizeDeps (/home/re-taro/projects/github.com/re-taro/2023-hp/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@storybook/builder-vite/dist/index.js:160:9078)
ERR!     at createViteServer (/home/re-taro/projects/github.com/re-taro/2023-hp/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@storybook/builder-vite/dist/index.js:160:10498)
ERR!     at Module.start (/home/re-taro/projects/github.com/re-taro/2023-hp/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@storybook/builder-vite/dist/index.js:160:12552)
ERR!     at async storybookDevServer (/home/re-taro/projects/github.com/re-taro/2023-hp/node_modules/.pnpm/@[email protected]/node_modules/@storybook/core-server/dist/index.js:36:7330)
ERR!     at async buildDevStandalone (/home/re-taro/projects/github.com/re-taro/2023-hp/node_modules/.pnpm/@[email protected]/node_modules/@storybook/core-server/dist/index.js:49:2786)
ERR!     at async withTelemetry (/home/re-taro/projects/github.com/re-taro/2023-hp/node_modules/.pnpm/@[email protected]/node_modules/@storybook/core-server/dist/index.js:36:3620)
ERR!     at async dev (/home/re-taro/projects/github.com/re-taro/2023-hp/node_modules/.pnpm/@[email protected]/node_modules/@storybook/cli/dist/generate.js:430:401)
ERR!     at async Command.<anonymous> (/home/re-taro/projects/github.com/re-taro/2023-hp/node_modules/.pnpm/@[email protected]/node_modules/@storybook/cli/dist/generate.js:432:225)
ERR!  Error: [[email protected]][Wrong Usage] vite.config.js#base should start with '/', 'http://', or 'https://' (it is ./ instead)
ERR!     at resolve (/home/re-taro/projects/github.com/re-taro/2023-hp/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/vite-plugin-ssr/dist/cjs/node/plugin/plugins/config/resolveBase.js:23:21)
ERR!     at resolveBaseFromUserConfig (/home/re-taro/projects/github.com/re-taro/2023-hp/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/vite-plugin-ssr/dist/cjs/node/plugin/plugins/config/resolveBase.js:17:12)
ERR!     at config (/home/re-taro/projects/github.com/re-taro/2023-hp/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/vite-plugin-ssr/dist/cjs/node/plugin/plugins/baseUrls.js:14:45)
ERR!     at runConfigHook (file:///home/re-taro/projects/github.com/re-taro/2023-hp/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-0bae2027.js:62096:31)
ERR!     at async Module.resolveConfig (file:///home/re-taro/projects/github.com/re-taro/2023-hp/node_modules/.pnpm/[email protected]_@[email protected][email protected]/node_modules/vite/dist/node/chunks/dep-0bae2027.js:61597:14)
ERR!     at getOptimizeDeps (/home/re-taro/projects/github.com/re-taro/2023-hp/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@storybook/builder-vite/dist/index.js:160:9078)
ERR!     at createViteServer (/home/re-taro/projects/github.com/re-taro/2023-hp/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@storybook/builder-vite/dist/index.js:160:10498)
ERR!     at Module.start (/home/re-taro/projects/github.com/re-taro/2023-hp/node_modules/.pnpm/@[email protected][email protected][email protected]/node_modules/@storybook/builder-vite/dist/index.js:160:12552)
ERR!     at async storybookDevServer (/home/re-taro/projects/github.com/re-taro/2023-hp/node_modules/.pnpm/@[email protected]/node_modules/@storybook/core-server/dist/index.js:36:7330)
ERR!     at async buildDevStandalone (/home/re-taro/projects/github.com/re-taro/2023-hp/node_modules/.pnpm/@[email protected]/node_modules/@storybook/core-server/dist/index.js:49:2786)
ERR!     at async withTelemetry (/home/re-taro/projects/github.com/re-taro/2023-hp/node_modules/.pnpm/@[email protected]/node_modules/@storybook/core-server/dist/index.js:36:3620)
ERR!     at async dev (/home/re-taro/projects/github.com/re-taro/2023-hp/node_modules/.pnpm/@[email protected]/node_modules/@storybook/cli/dist/generate.js:430:401)
ERR!     at async Command.<anonymous> (/home/re-taro/projects/github.com/re-taro/2023-hp/node_modules/.pnpm/@[email protected]/node_modules/@storybook/cli/dist/generate.js:432:225)

My two questions are as follows.

• Why is base set to ./.

• Is there any way to disable this setting

[f3bw]

To change the base value in Storybook, you need to modify the Storybook configuration file. By default, the Storybook configuration file is named .storybook/main.js or .storybook/main.ts (depending on whether you're using JavaScript or TypeScript).

Inside the configuration file, you can specify the basePath option to set the base URL for Storybook. Here's an example of how you can update the base value to a valid path:

// .storybook/main.js

module.exports = {
  // other Storybook config options...

  core: {
    builder: 'storybook-builder-vite',
  },
  
  viteFinal(config) {
    // Update the base path
    config.base = '/';
    return config;
  },
};

In the above example, we are using the viteFinal function provided by storybook-builder-vite to customize the Vite configuration. Inside this function, we update the config.base value to / to set the base path for Storybook.

Save the configuration file, and then restart Storybook. The base path should be updated to /, and the error you encountered should be resolved.

[re-taro]

No it doesn't works well

[saez0pub]

storybook/code/builders/builder-vite/src/vite-config.ts

Line 67 in 395bae6

base: './',

You can't set this parameter :(