[Bug]: Cannot add property __docgen, object is not extensible about storybook HOT 5 CLOSED

Hum, it's not what à i posted few days ago. I'll remake it

Edit: Stackblitz fixed! Tell me if it's not good yet.

from storybook.

Inspecting this issue, I firstly suspected @storybookjs/addon-svelte-csf (because __docgen sounded familiar to me) code transformation - commenting out the export default or export { meta }. It wasn't the root cause for this issue, I've verified it quickly by changing the plugin to remove instead of commenting out. No luck.

Below is my observations notes, perhaps could help other maintainers debug quicker to figure out why it doesn't work.

In this reproduction case, I noticed the Calendar is using "compound component", quite common pattern in React AFAIK.

<!-- calendar-svelte -->
<script lang="ts">
	import { Calendar as CalendarPrimitive } from "bits-ui";
	import * as Calendar from "./index.js"; // This breaks the Storybook
	import { cn } from "$lib/utils.js";
	// ...
</script>

The imported file content is:

// calendar/index.js
import Root from "./calendar.svelte";
import Cell from "./calendar-cell.svelte";
import Day from "./calendar-day.svelte";
import Grid from "./calendar-grid.svelte";
import Header from "./calendar-header.svelte";
import Months from "./calendar-months.svelte";
import GridRow from "./calendar-grid-row.svelte";
import Heading from "./calendar-heading.svelte";
import GridBody from "./calendar-grid-body.svelte";
import GridHead from "./calendar-grid-head.svelte";
import HeadCell from "./calendar-head-cell.svelte";
import NextButton from "./calendar-next-button.svelte";
import PrevButton from "./calendar-prev-button.svelte";

export {
	Day,
	Cell,
	Grid,
	Header,
	Months,
	GridRow,
	Heading,
	GridBody,
	GridHead,
	HeadCell,
	NextButton,
	PrevButton,
	//
	Root as Calendar,
};

For some reason which I haven't found yet, this breaks only in Storybook. It works with normal Vite build.

Current workaround

This is not what you want for sure, it will decrease code readability. But it will work, at least for the time being until the issue is resolved - if that's acceptable for you.

<script lang="ts">
	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import * as Calendar from "./index.js"; // This breaks the Storybook
+	import { Day, Cell, Grid, Header, Months, GridRow, Heading, GridBody, GridHead, HeadCell, NextButton, PrevButton, Calendar } from "./index.js";
	import { cn } from "$lib/utils.js";
	// ...
</script>

from storybook.

i'm having the same issue - also with shadcn-svelte in storybook

from storybook.

The reproduction link doesn't show the setup you described, nor show the issue you have.

from storybook.

I tried, and it works. It's not optimal, but at least it works and it's simple to fix. Thanks a lot !

from storybook.