bugbuilder-vitecompatibility with other toolshelp wanted
Description
Describe the bug
Description:
After upgrading vite/storybook/vike to recent versions I'm getting this issue output during running build-storybook
✗ Build failed in 1.65s
=> Failed to build the preview
[vite]: Rollup failed to resolve import "virtual:vike:importUserCode:client:client-routing" from "./node_modules/vike/dist/esm/client/client-routing-runtime/createPageContext.js".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
at viteLog (file://./node_modules/vite/dist/node/chunks/dep-DrOo5SEf.js:51615:15)
at file://./node_modules/vite/dist/node/chunks/dep-DrOo5SEf.js:51673:18
at onwarn (./node_modules/@vitejs/plugin-react/dist/index.cjs:290:9)
at file://./node_modules/vite/dist/node/chunks/dep-DrOo5SEf.js:51671:7
at onRollupLog (file://./node_modules/vite/dist/node/chunks/dep-DrOo5SEf.js:51663:5)
at onLog (file://./node_modules/vite/dist/node/chunks/dep-DrOo5SEf.js:51313:7)
at file://./node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:20665:32
at Object.logger [as onLog] (file://./node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:22551:9)
at ModuleLoader.handleInvalidResolvedId (file://./node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:21291:26)
at file://./node_modules/vite/node_modules/rollup/dist/es/shared/node-entry.js:21249:26
To resolve on this I've tried externalizing the module as suggested via adding this to my storybook/main.ts
viteFinal: (async (config) => {
const updatedConfig = {
...config,
build: {
...config.build,
rollupOptions: {
cacheDir: './node_modules/.vite',
server: {
middlewareMode: true,
watch: {
usePolling: true,
ignored: ['**/node_modules', '**/dist']
}
},
/*
We have to externalize `vike` and `virtual:vike:importUserCode:client:client-routing`
to resolve the build issue:
=> Failed to build the preview
[vite]: Rollup failed to resolve import "virtual:vike:importUserCode:client:client-routing" from "./node_modules/vike/dist/esm/client/client-routing-runtime/createPageContext.js".
This is most likely unintended because it can break your application at runtime.
If you do want to externalize this module explicitly add it to
`build.rollupOptions.external`
*/
external: ['vike', 'virtual:vike:importUserCode:client:client-routing', 'react', 'react-dom'],
preserveEntrySignatures: true,
output: {
globals: {
'virtual:vike:importUserCode:client:client-routing': 'virtualVikeImport'
},
format: 'esm',
entryFileNames: 'bundle-[hash].js',
chunkFileNames: 'chunk-[hash].js'
}
}
},
core: {
disableCache: true,
builderCache: false
},
optimizeDeps: {
esbuildOptions: {
external: ['virtual:vike:importUserCode:client:client-routing']
}
}
};
return updatedConfig;
}) as StorybookConfig['viteFinal'],
After the adjustment the storybook build passed, but it seems like it still does not fully resolve the issue. When I try to simply run storybook with the approach it outputs this:
[vite] Internal server error: Failed to resolve import "virtual:vike:importUserCode:client:client-routing" from "node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/vike_client_router.js?v=1dd295bc". Does the file exist?
Plugin: vite:import-analysis
File: /Users/hannachechelnytska/Documents/MRE/vike-storybook/node_modules/.cache/storybook/1c3385a5d25e538d10b518b310c74d3ca2690b6aaffeadccd74da79736171f86/sb-vite/deps/vike_client_router.js?v=1dd295bc:2992:38
2990|
2991| // node_modules/vike/dist/esm/client/client-routing-runtime/createPageContext.js
2992| import * as virtualFileExports from "virtual:vike:importUserCode:client:client-routing";
| ^
2993| var { pageFilesAll, allPageIds, pageConfigs, pageConfigGlobal } = getPageConfigsRuntime(virtualFileExports);
2994| async function createPageContext(urlOriginal) {
at TransformPluginContext._formatLog (file:///Users/hannachechelnytska/Documents/MRE/vike-storybook/node_modules/vite/dist/node/chunks/dep-DrOo5SEf.js:47867:41)
at TransformPluginContext.error (file:///Users/hannachechelnytska/Documents/MRE/vike-storybook/node_modules/vite/dist/node/chunks/dep-DrOo5SEf.js:47864:16)
at normalizeUrl (file:///Users/hannachechelnytska/Documents/MRE/vike-storybook/node_modules/vite/dist/node/chunks/dep-DrOo5SEf.js:45998:23)
at file:///Users/hannachechelnytska/Documents/MRE/vike-storybook/node_modules/vite/dist/node/chunks/dep-DrOo5SEf.js:46117:37
at async Promise.all (index 2)
at TransformPluginContext.transform (file:///Users/hannachechelnytska/Documents/MRE/vike-storybook/node_modules/vite/dist/node/chunks/dep-DrOo5SEf.js:46044:7)
at EnvironmentPluginContainer.transform (file:///Users/hannachechelnytska/Documents/MRE/vike-storybook/node_modules/vite/dist/node/chunks/dep-DrOo5SEf.js:47662:18)
at loadAndTransform (file:///Users/hannachechelnytska/Documents/MRE/vike-storybook/node_modules/vite/dist/node/chunks/dep-DrOo5SEf.js:41320:27)
at viteTransformMiddleware (file:///Users/hannachechelnytska/Documents/MRE/vike-storybook/node_modules/vite/dist/node/chunks/dep-DrOo5SEf.js:42796:24)
cc: @brillout
Reproduction link
https://github.com/meanstackmax/vike-storybook-mre
Reproduction steps
No response
System
Storybook Environment Info:
System:
OS: macOS 15.3.2
CPU: (8) arm64 Apple M1
Shell: 5.9 - /bin/zsh
Binaries:
Node: 18.18.1 - ~/.nvm/versions/node/v18.18.1/bin/node
Yarn: 1.22.19 - ~/.yarn/bin/yarn
npm: 9.8.1 - ~/.nvm/versions/node/v18.18.1/bin/npm <----- active
Browsers:
Safari: 18.3.1
npmPackages:
@storybook/addon-actions: ^8.6.12 => 8.6.12
@storybook/addon-essentials: ^8.6.12 => 8.6.12
@storybook/addon-interactions: ^8.6.12 => 8.6.12
@storybook/addon-links: ^8.6.12 => 8.6.12
@storybook/addon-onboarding: ^8.6.12 => 8.6.12
@storybook/addon-queryparams: ^7.0.1 => 7.0.1
@storybook/blocks: ^8.6.12 => 8.6.12
@storybook/manager-api: ^8.6.12 => 8.6.12
@storybook/react: ^8.6.12 => 8.6.12
@storybook/react-vite: ^8.6.12 => 8.6.12
@storybook/test: ^8.6.12 => 8.6.12
@storybook/test-runner: ^0.22.0 => 0.22.0
@storybook/theming: ^8.6.12 => 8.6.12
@storybook/types: ^8.6.12 => 8.6.12
eslint-plugin-storybook: ^0.12.0 => 0.12.0
msw-storybook-addon: ^2.0.4 => 2.0.4
storybook: ^8.6.12 => 8.6.12
storybook-addon-deep-controls: ^0.9.2 => 0.9.2
storybook-addon-mock-date: ^0.6.0 => 0.6.0
storybook-react-i18next: ^3.2.1 => 3.2.1
Additional context
No response