question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Unclear configuration of storysource with Typescript causes TypeErrors

See original GitHub issue

Describe the bug The README for the storysource addon is confusing if you are not quite familiar with Webpack. You are supposed to change the main.js file like this:

module.exports = {
  addons: ['@storybook/addon-storysource'],
};

But also, if you want to use Typescript-based stories, you need to change main.js like this:

module.exports = function({ config }) { /* ... */ };

I have problems with merging these two exports. My current not working solution looks like this:

module.exports = function ({ config }) {
    config.stories = ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'];
    config.addons = [
        '@storybook/addon-links',
        '@storybook/addon-actions',
        '@storybook/addon-essentials',
        '@storybook/addon-storysource',
        '@storybook/addon-docs',
    ];

    config.module.rules.push({
        test: /\.stories\.tsx?$/,
        loaders: [
            {
                loader: require.resolve('@storybook/source-loader'),
                options: { parser: 'typescript' },
            },
        ],
        enforce: 'pre',
    });

    return config;
};

But this does not work since the passed argument does not have a config field.

To Reproduce Install the current storybook version (6.0.0.-rc.x) and try to apply the instructions of the storysource README. Use one of the function-based exports and you will see an error message which indicates that config is undefined.

Expected behavior Ideally, the README would better explain how the function-based exports are to be merged with the default record based export.

Screenshots Screenshot 2020-08-04 at 12 26 50

System:

Environment Info:

  System:
    OS: macOS Mojave 10.14.6
    CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
  Binaries:
    Node: 13.12.0 - ~/.nvm/versions/node/v13.12.0/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.4 - ~/.nvm/versions/node/v13.12.0/bin/npm
  Browsers:
    Chrome: 84.0.4147.105
    Firefox: 76.0.1
    Safari: 13.1
  npmPackages:
    @storybook/addon-actions: 6.0.0-rc.13 => 6.0.0-rc.13 
    @storybook/addon-docs: ^6.0.0-rc.16 => 6.0.0-rc.16 
    @storybook/addon-essentials: 6.0.0-rc.13 => 6.0.0-rc.13 
    @storybook/addon-links: 6.0.0-rc.13 => 6.0.0-rc.13 
    @storybook/addon-storysource: 6.0.0-rc.16 => 6.0.0-rc.16 
    @storybook/angular: 6.0.0-rc.13 => 6.0.0-rc.13 

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:1
  • Comments:9 (2 by maintainers)

github_iconTop GitHub Comments

2reactions
ChrisLangcommented, May 18, 2021

Well this addon is poo, dealing with the same thing?

0reactions
geoquantcommented, Mar 22, 2022

bump

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to allow storybook to build even with TypeScript (type ...
When I build though, with the command yarn build-storybook, the TypeScript errors show up in the console and the command exits with exit...
Read more >
A Guide For Migrating Your Project to TypeScript - Xiaoyun Yang
Introduction to TypeScript and guide for how to migrate your project from Flow to TypeScript. This post is a WIP.
Read more >
MIGRATION.md - Storybook - Fossies
Hoisted CSF annotations; Zero config typescript; Correct globs in main.js ... Story Store immutable outside of configuration; Improved story source handling ...
Read more >
@storybook/addon-storysource - npm
Start using @storybook/addon-storysource in your project by ... TypeScript icon, indicating that this package has built-in type declarations.
Read more >
@storybook/react-native-server | Yarn - Package Manager
Configuration · Advanced · API. @storybook/react-native-server. owner storybookjs281.3kMIT5.3.23 vulns 107 vulnerabilities. A better way to develop React ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found