[Bug] TypeError: previewBuilder.bail is not a function #485
Comments
FezVrasta
changed the title
|
Having a similar issue: const Pages = require('vite-plugin-pages');
module.exports = {
/* ... */
async viteFinal(config, { configType }) {
return mergeConfig(config, {
plugins: [
Pages({
extensions: ['vue']
})]
});
}
}=> |
|
@AnnikenYT that seems a completely unrelated error. |
|
That's very strange, @FezVrasta. It's definitely a function: builder-vite/packages/builder-vite/index.ts Lines 60 to 68 in 0affa70 Can you share your |
|
Thanks for looking into it @IanVS , this is my main.js const path = require('path');
const { mergeConfig } = require('vite');
const customConfig = require('../vite.config.js');
module.exports = {
core: { builder: '@storybook/builder-vite' },
stories: ['../src/**/*.stories.@(mdx|js|jsx|ts|tsx)'],
addons: ['@storybook/addon-essentials'],
staticDirs: ['../public'],
viteFinal(storybookConfig) {
const config = mergeConfig(customConfig({}), storybookConfig);
return config;
},
};And this is my vite.config.js if it helps: // @noflow
const { defineConfig, loadEnv } = require('vite');
const react = require('@vitejs/plugin-react');
const svgr = require('vite-plugin-svgr');
const { VitePWA } = require('vite-plugin-pwa');
const {
esbuildFlowPlugin: esbuildFlow,
flowPlugin: flow,
} = require('@bunchtogether/vite-plugin-flow');
const { createHtmlPlugin } = require('vite-plugin-html');
const path = require('path');
const { readdirSync, readFileSync } = require('fs');
const hasha = require('hasha');
const { viteStaticCopy } = require('vite-plugin-static-copy');
const { itkImageIoVersion, itkVersion, writeConfigurationFile } = require('./scripts/itk-config');
const srcPath = path.resolve('./src/');
const srcRootContent = readdirSync(srcPath, { withFileTypes: true }).map((dirent) =>
dirent.name.replace(/(\.js)/, '')
);
const absolutePathAliases = srcRootContent.reduce((acc, directory) => {
acc[directory] = path.join(srcPath, directory);
return acc;
}, {});
const itkModulePath = path.parse(path.resolve('./node_modules/itk-wasm/package.json')).dir;
const itkImageIoModulePath = path.parse(require.resolve('itk-image-io').replace(/\\/g, '/')).dir;
const publicPath = path.resolve(__dirname, './public');
writeConfigurationFile(publicPath);
// https://vitejs.dev/config/
module.exports = defineConfig(({ mode }) => {
const env = loadEnv(mode, process.cwd()); // reuse vite's env parser to inject into our index.html
return {
server: {
host: true,
port: 3000,
},
optimizeDeps: {
esbuildOptions: {
plugins: [esbuildFlow()],
},
},
resolve: {
alias: {
...absolutePathAliases,
'./itkConfig.js': path.join(publicPath, 'itk/configuration.js'),
'../itkConfig.js': path.join(publicPath, 'itk/configuration.js'),
'../../itkConfig.js': path.join(publicPath, 'itk/configuration.js'),
},
},
build: {
outDir: './build',
},
define: {
// The schema version is automatically generated starting from the GraphQL Flow types
// anytime the schema changes, the hash will change, and the client will be forced to
// flush the cache and start from scratch
'import.meta.env.GRAPHQL_SCHEMA_VERSION': JSON.stringify(
hasha(
readFileSync(path.join(__dirname, 'src/generated/graphql.js'), {
encoding: 'utf8',
})
)
),
},
plugins: [
viteStaticCopy({
targets: [
{
src: path.join(itkModulePath, 'dist', 'web-workers'),
dest: path.join(publicPath, 'itk'),
rename: `web-workers.${itkVersion}`,
},
{
src: path.join(itkImageIoModulePath, '*'),
dest: path.join(publicPath, 'itk', `image-io.${itkImageIoVersion}`),
transform: (content, filePath) => {
const fileName = path.basename(filePath);
const imageIoModules = [
'ReadImageDICOMFileSeries',
'ReadDICOMTags',
'MetaImageIOWriteImage',
'MetaImageIOReadImage',
'NrrdImageIOReadImage',
];
const shouldCopy = imageIoModules.some((pattern) => fileName.startsWith(pattern));
return shouldCopy ? content : null;
},
},
],
}),
createHtmlPlugin({
minify: true,
inject: {
data: { ...env, MODE: mode },
},
}),
flow(),
react({
babel: {
plugins: ['babel-plugin-styled-components'],
},
}),
svgr(),
VitePWA({
strategies: 'injectManifest',
srcDir: 'src',
filename: 'sw.js',
injectManifest: {
maximumFileSizeToCacheInBytes: 3000000, // 3 MiB
},
}),
],
};
}); |
|
I tried to add a console.log right before The I may be wrong but In any case, it looks like I'm not sure why it's trying to use webpack though. |
|
Oh my, I'm sorry, I noticed I had a custom resolution for I think there's still a problem with that Also, now I get an out of memory error when I try to build my app :-( |
|
Webpack is still used for the "manager" part of storybook (the sidebar, addons panel, toolbar, etc), at least until storybook 7 is released. This looks like a bug in the vite-builder, but I'm not sure why we've never hit it before. In the meantime, I think your config will also cause some problems. If you merge in your vite I saw your latest comment, glad that was the issue. But yes, we should still fix the bail issue. As for the memory, we find that vite requires a lot of memory to build, and storybook together with it adds even more. You can normally use |
|
For what it's worth I'm hitting this same issue. I've been on a long chain of dependency errors starting I think with upgrading react-scripts to v5 which led to updating all sorts of things, and I'm assuming updating typescript which ran me into webpack errors. I ran the storybook terminal migration and also added an override for webpack 5.74 in my package.json and now I'm here. Update: Looks like removing webpack and the webpack override from my package json has things working again. Looking forward to v7! ;) |
|
@joshwooding I'm getting this issue too. Can this fix be released to NPM? |
|
@shadow7412 0.2.5 has now been released 🎉 |
What version of
viteare you using?3.0.9
System info and storybook versions
Describe the Bug
If I run
start-storybook, it fails the first time, works the second, but with some errors about my Flow annotations, and works just fine the third time...build-storybookalways fails:Link to Minimal Reproducible Example
No response
Participation
The text was updated successfully, but these errors were encountered: