Should we do something to avoid those errors @turbid remnant ?
#Vite build Storybook errors with window
languid arrow
At the moment I am passing:
const defineConstant =
configType === 'DEVELOPMENT' ? { global: 'window' } : {};
and then spreading it in define of viteConfig,
define: {
...config.define,
...defineConstant,
},
but should this maybe be in the docs as it's almost certain that people will use the addon-essentials?
turbid remnant
I haven’t seen that error before, I’ll have to look into it. Did it start in recent alpha versions? What if you try changing to alpha.43 or something?
languid arrow
Tbh I only use vite in v7 as I am migrating now from v6 . This happens from importing the addon-essentials: https://www.npmjs.com/package/@storybook/addon-essentials basically and then trying to build storybook 🤔
earnest wren
isn't this the known bug we have, that we are solving by having a preview-head.htmlwith:
// eslint-disable-next-line no-undef
window.global = window;
</script>```
?Is this shipped to a next version @earnest wren ?
earnest wren
by "solved" I mean that the user has to add this, for now. AFAIK we plan on solving it for real before 7.0 release
languid arrow
In my case the define setting solved this that's why I open this thread, not sure if useful at all for you
turbid remnant
@earnest wren His error looked different, it wasn't able to import from window...
earnest wren
yeah I see, it's the other way around
turbid remnant
Can you share the rest of your .storybook/main.cjs and vite.config.js (if you have one)? @languid arrow
languid arrow
@turbid remnant this is the only piece I use as a vite config, as the importing react library does not have one
For the main.js
import { mergeConfig } from 'vite';
import tsconfigPaths from 'vite-tsconfig-paths';
import path from 'path';
export default {
framework: '@storybook/react-vite',
features: {
storyStoreV7: true,
},
docs: {
docsPage: true,
defaultName: 'Docs',
},
stories: ['../src/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
staticDirs: ['../src/assets'],
addons: [
'@storybook/addon-links',
'@storybook/addon-essentials',
'@storybook/addon-a11y',
'@storybook/addon-storysource',
// 'storybook-addon-pseudo-states',
],
async viteFinal(config, { configType }) {
const defineConstant =
configType === 'DEVELOPMENT' ? { global: 'window' } : {};
/** @type {import('vite').UserConfig} */
const customViteConfig = {
plugins: [tsconfigPaths()],
resolve: {
alias: {
'@neo4j-ndl/react/src': path.resolve(__dirname, '../../react/src'),
},
},
define: {
...config.define,
...defineConstant,
},
};
// Merge custom configuration into the default config
return mergeConfig(config, customViteConfig);
},
};
Here it is