#Vite builder indefinite loading

8 messages · Page 1 of 1 (latest)

void ingot
#

I moved our storybook to vite-builder. My main.cjs now looks like this:

const viteTsconfig = require('vite-tsconfig-paths');
const tsconfigPaths = viteTsconfig.default;

const { mergeConfig } = require('vite');

const config = {
    stories: ['../stories/**/*.stories.@(js|jsx|ts|tsx)'],
    /** Expose public folder to storybook as static */
    staticDirs: ['../public', '../public-assets'],
    addons: [
        '@storybook/addon-links',
        '@storybook/addon-essentials',
        // '@storybook/addon-interactions',
        {
            name: '@storybook/addon-postcss',
            options: {
                postcssLoaderOptions: {
                    implementation: require('postcss'),
                },
            },
        },
    ],
    framework: '@storybook/react',
    core: {
        builder: '@storybook/builder-vite',
    },
    async viteFinal(config) {
        return mergeConfig(config, {
            plugins: [tsconfigPaths()],
        });
    },
};

module.exports = config;

And vite.config.ts is using import svgr from 'vite-plugin-svgr'.
When I start storybook, it doesn't crash, but it stays in loading animation forever, and I get the following error in devtools:

Uncaught Error: Cannot find module '/Users/ronny.efronny/projects/frontend/node_modules/@storybook/client-api'
    at webpackMissingModule (preview.js:11:1)

I don't understand what this is. I installed @storybook/client-api and added it to addons, and now I get a different error:

The requested module '/public-assets/add.svg?import' does not provide an export named 'ReactComponent'
```.
I don't understand, it seems like completely random errors. In the main App, Vite handles the same SVG files fine. What's going on?
void ingot
void ingot
#

I adjusted my viteFinal to have plugins: [tsconfigPaths(), react(), svgr()], (identical to vite.config) and now the svg error is gone, but all stories result in 404 errors that look like this:

  Plugin: vite:esbuild
  File: /Users/ronny.efronny/projects/frontend/components/generic/Spinner.tsx
  
  The symbol "prevRefreshReg" has already been declared
  1  |  import RefreshRuntime from "/@react-refresh";let prevRefreshReg;let prevRefreshSig;if (import.meta.hot) {  if (!window.__vite_plugin_react_preamble_installed__) {    throw new Error(      "@vitejs/plugin-react can't detect preamble. Something is wrong. " +      "See https://github.com/vitejs/vite-plugin-react/pull/11#discussion_r430879201"    );  }  prevRefreshReg = window.$RefreshReg$;  prevRefreshSig = window.$RefreshSig$;  window.$RefreshReg$ = (type, id) => {    RefreshRuntime.register(type, "/Users/ronny.efronny/projects/frontend/components/generic/Spinner.tsx" + " " + id)  };  window.$RefreshSig$ = RefreshRuntime.createSignatureFunctionForTransform;}var _s2 = $RefreshSig$();
  2  |  import RefreshRuntime from "/@react-refresh";
  3  |  let prevRefreshReg;
     |      ^
  4  |  let prevRefreshSig;
  5  |  if (import.meta.hot) {
  
  The symbol "prevRefreshSig" has already been declared
  2  |  import RefreshRuntime from "/@react-refresh";
  3  |  let prevRefreshReg;
  4  |  let prevRefreshSig;
     |      ^
  5  |  if (import.meta.hot) {
  6  |    if (!window.__vite_plugin_react_preamble_installed__) {
#

I'm really getting frustrated, setting this up was supposed to be simple??

#

If I remove react() from the plugin array in main.cjs, then all stories break with the following error:

Uncaught Error: Rendered more hooks than during the previous render.

All stories are unaltered since moving to Vite.

void ingot
#

I finally uninstalled addons-essentials and by process of elimination found that addons-docs is the one breaking my book. This is odd. I am investigating.

neat rose
#

are you using pnpm by any chance? and AFAIK client-api isn't an addon

void ingot
#

I'm not and I know it isn't, but I tried all sorts of things