[Bug]: @storybook/addon-storysource not rendering untranspiled code

[egucciar]

Describe the bug

The storysource plugin is rendering transpiled code, outputting in es5, no JSX, no TS.

I have included repro link with my main.ts config ported over mostly as-is. I've tried dozens of ways to configure main.ts to get this plugin to work with this setup, to no avail.

Reproduction link

https://stackblitz.com/edit/github-qarthtnv?file=src%2Fstories%2FHeader.stories.ts

Reproduction steps

1. Go to the above
2. Look at the page story
3. Look at the Code tab

Actual:

import React from 'react';
import { jsx as _jsx } from "react/jsx-runtime";
var meta = {
    title: 'Example/Page',
    // component: Page,
    parameters: {
        // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
        layout: 'fullscreen'
    }
};
export default meta;
export var BasicExample = {
    // do not pass "activeKeys" from props to avoid switching to controlled
    
    render: function render() {
        return /*#__PURE__*/ _jsx("div", {
            children: "Hello world"
        });
    }
};

expected:

export const BasicExample = {
  // do not pass "activeKeys" from props to avoid switching to controlled
  // eslint-disable-next-line unused-imports/no-unused-vars
  render: () => <div>Hello world</div>,
};

System

this command simply outputs this:


 js (reshaped-4|✚2) npx storybook@latest info
Need to install the following packages:
[email protected]
Ok to proceed? (y) y
 js (reshaped-4|✚2) npx storybook@latest info
Need to install the following packages:
[email protected]
Ok to proceed? (y)

Additional context

No response

[greptile-apps]

** Disclaimer** This information might be inaccurate, due to it being generated automatically
The storysource addon's transpilation behavior is controlled by the loaderOptions parameter in the addon configuration. To show untranspiled source code: 1. In your .storybook/main.ts, modify the addon-storysource configuration: ts { addons: [ { name: '@storybook/addon-storysource', options: { loaderOptions: { prettierConfig: { parser: 'typescript' }, injectStoryParameters: true, parser: 'typescript' } } } ] } The relevant code for this configuration is in code/addons/storysource/src/loader.ts which handles the source transformation.

About Greptile

This response provides a starting point for your research, not a precise solution.

Help us improve! Please leave a 👍 if this is helpful and 👎 if it is irrelevant.

Edit Issue Bot Settings · Greptile

[egucciar]

I updated my stackblitz with above suggestion. though the output is slightly better, it still does not render as expted:

{
    // do not pass "activeKeys" from props to avoid switching to controlled
    
    render: function render() {
        return /*#__PURE__*/ _jsx("div", {
            children: "Hello world"
        });
    }
}

[egucciar]

I really needed this badly, so I worked on it some more using --debug-webpack to identify the loader and modify it.

        // storybook source loader rule
        const storybookSourceLoader = config.module.rules.find(
            // @ts-ignore
            (rule) => rule?.use?.[0]?.loader.includes("@storybook/source-loader")
        );
        // @ts-ignore
        storybookSourceLoader.enforce = "pre";

By moving the source-loader to "enforce: pre", i was able to get the output to render properly