Typecasting of the default export breaks the parsing of title/args and doesn't load the story

[romaia]

As claimed in the blog post (btw, really excited to try ladle), I tried to use ladle as a drop-in replacement, without success.

First problem is that we use a mono repo with some packages under <root>/packages, but ladle assumes stories will be under <root>/src, so first things first: configure where the stories are. Easily found the documentation, changed that accordingly, but when starting I got an error that no stories were found, still indicating that the default stories glob (src/**/*.stories.{js,jsx,ts,tsx}).

Starting with DEBUG=ladle* revealed the real problem:

  ladle:vite Parsing packages/components/src/Alert/Alert.stories.tsx +2ms
  ladle:vite Error when generating the list: +588ms
  ladle:vite Error: Can't parse the default title and meta of packages/components/src/Alert/Alert.stories.tsx. Meta must be serializable and title a string literal.
  ladle:vite     at getDefaultExport (file:///home/romaia/dev/stoq/stoq-pdv/node_modules/@ladle/react/lib/cli/vite-plugin/parse/get-default-export.js:32:11)
  ladle:vite     at NodePath._call (/home/romaia/dev/stoq/stoq-pdv/node_modules/@ladle/react/node_modules/@babel/traverse/lib/path/context.js:53:20)
(...)

So, there is something wrong with my default exports, it seems. This are the first few lines of that story:

import React from "react";  
import { Story, Meta } from "@storybook/react";    
import { action } from "@storybook/addon-actions";                                     
                    
import { SeverityOptions } from "@xxx/types";     
import { Alert } from "@xxx/components";                                     
                    
export default {     
  component: Alert,     
  title: "Components/Core/Alert",     
  argTypes: {       
    severity: {     
      options: Object.values(SeverityOptions),     
      control: { type: "select" },     
    },              
  },                
} as Meta;          
                    
const Template: Story = (args) => {  
  const [open, setOpen] = React.useState(true);  
  return (          
    <Alert {...args} open={open} onClose={() => setOpen(false)}>  
      {args.children}  
    </Alert>        
  );                
};                  
                    
export const Default = Template.bind({});  
Default.args = {    
  children: "Este é um alerta",  
};  

Commenting out the default exports gets me a little bit further. (by now, I am isolating the stories and using just this one, since all our stories have default exports).

I now see a loading spinner with all my stories on the right side menu. Debug logs don't complain about default exports. Some vite messages, but then when it tries to reload, boom.

6:33:22 AM [vite] new dependencies found: @material-ui/icons, @material-ui/core/TextField, date-fns/locale, @material-ui/lab, @material-ui/icons/NavigateNextOutlined, formik, updating...
6:33:25 AM [vite] ✨ dependencies updated, delaying reload as new dependencies have been found...
6:33:25 AM [vite] new dependencies found: @testing-library/user-event, @sentry/browser, fast-xml-parser, currency.js, updating...
/home/romaia/dev/stoq/stoq-pdv/node_modules/@ladle/react/node_modules/vite/dist/node/chunks/dep-6ae84d6b.js:51603
    const err = new Error(`There is a new version of the pre-bundle for "${id}", ` +
                ^

Error: There is a new version of the pre-bundle for "/home/romaia/dev/stoq/stoq-pdv/node_modules/.vite/deps/@material-ui_icons.js?v=8f0250ca", a page reload is going to ask for it.
    at throwOutdatedRequest (/home/romaia/dev/stoq/stoq-pdv/node_modules/@ladle/react/node_modules/vite/dist/node/chunks/dep-6ae84d6b.js:51603:17)
    at Context.load (/home/romaia/dev/stoq/stoq-pdv/node_modules/@ladle/react/node_modules/vite/dist/node/chunks/dep-6ae84d6b.js:51557:29)
    at Object.load (/home/romaia/dev/stoq/stoq-pdv/node_modules/@ladle/react/node_modules/vite/dist/node/chunks/dep-6ae84d6b.js:35159:50)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async doTransform (/home/romaia/dev/stoq/stoq-pdv/node_modules/@ladle/react/node_modules/vite/dist/node/chunks/dep-6ae84d6b.js:51433:24) {
  code: 'ERR_OUTDATED_OPTIMIZED_DEP'
}

Important disclaimer: This project does not use vite (yet). We are currently using webpack. It was not clear from the documentation if this would be a problem or not.

[romaia]

Now I was able to get it not to crash by adding a optimizeDeps.exclude = ['@material-ui/icons'] to the config, but sadly, not stories work. I get the menu with all of them, but just a blank page when I try to load.

Nothing in the console.

[tajo]

Hey @romaia

It seems that the type cast for default export as Meta; is causing the parser to fail. If you delete that, it should unblock you. This is something to fix for us.

The error related to pre-bundling of @material-ui/icons seems to be a Vite error. We are currently using 2.9.0 beta version since it dramatically improved the initial startup speed but it has some glitches. However, they should not be critical and the Vite team knows about them so it should get fixed in the next versions.

[romaia]

So, I did manage to get one story up and running.

Besides the default export, I also had to change one that that used @storybook/addon-actions.

const Template: Story = (args) => {                                                                                                                                                                             
  const [open, setOpen] = React.useState(true);                                                                                                                                                                 
  return (                                                                                                                                                                                                      
    <Alert {...args} open={open} onClose={() => setOpen(false)}>                                                                                                                                                
      {args.children}                                                                                                                                                                                           
    </Alert>                                                                                                                                                                                                    
  );                                                                                                                                                                                                            
};    
                                                                                                                                                                                                     
export const WithAction = Template.bind({});                                                                                                                                                                    
WithAction.args = {                                                                                                                                                                                             
  ...WithTitle.args,                                                                                                                                                                                            
  action: "Ação",                                                                                                                                                                                               
  // onActionClick: action("onActionClick"),                                                                                                                                                                       
};                                                                                                                                                                                                              
            

Uncommenting the onActionClick line causes all the stories to not render (without any error). Edit: There were actual errors, I just had a filter applied:

Uncaught ReferenceError: module is not defined
    at @storybook_addon-actions.js?v=a8b07fce:6261:1
(anonymous) @ @storybook_addon-actions.js?v=a8b07fce:6261

So i guess this is just an incompatibility between ladle and storybook addons.

[tajo]

incompatibility between ladle and storybook addons

Yea. Storybook addons or anything imported from storybook won't work.