How I run storybook with tsx and sass files

Question

I'm using TSDX to create a library with storybook.

My problem is when I run storybook with:

npm run start-storybook -p 6006

show me next errors:

• ERROR in ./src/sidenav/functions/index.tsx Module not found: Error: Can't resolve '../../../constants/global-constants'

• ERROR in ./src/alarmbar/styles/alarmbar.scss 1:0 Module parse failed: Unexpected character '@' (1:0) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

It seems that cant load tsx and sass files.

In scss files I'm using this to use dark and light mode on each component.

$color-text-black-base: #343434;
$color-text-white-base: #ffffff;

@function themed($key) {
    @return map-get($theme-map, $key);
}

$a-tags: "a, a:active, a:hover, a:visited";
$a-tags-hover: "a:active, a:hover";

/*
 * Implementation of themes
 */
@mixin themify($themes) {
    @each $theme, $map in $themes {
        .#{$theme} & {
            $theme-map: () !global;
            @each $key, $submap in $map {
                $value: map-get(map-get($themes, $theme), "#{$key}");
                $theme-map: map-merge(
                    $theme-map,
                    (
                        $key: $value,
                    )
                ) !global;
            }
            @content;
            $theme-map: null !global;
        }
    }
}

$themes: (
    light: (
        textColorBase: $color-text-black-base,
    ),
    dark: (
        textColorBase: $color-text-white-base,
    ),
);

So, with that each component change if theme is dark or light:

@import "./styles-utils.scss";

.breadcrumb-item {
    font-weight: 500;
    @include themify($themes) {
        color: themed("textColorBase");
    }
    margin-right: 5px;
    user-select: none;

    .normal {
        @include themify($themes) {
            color: themed("textColorBase");
        }
        text-decoration: none;
    }

    .normal:active,
    .normal:visited,
    .normal:hover {
        @include themify($themes) {
            color: themed("textColorBase");
        }
    }
}

.breadcrumb-item--active {
    font-weight: 700;
    @include themify($themes) {
        color: themed("textColorBase");
    }
}

Any idea how to fix it?

SOLUTION:

1. Update "@storybook/react": "^6.1.11"

2. Add "@storybook/preset-create-react-app": "^3.1.5"

3. Add this on main.js inside .storybook:

   const path = require("path");
   
   module.exports = {
   stories: ["../src/**/*.stories.@(ts|tsx|js|jsx|mdx)"],
   addons: [
       "@storybook/addon-links",
       {
           name: "@storybook/addon-docs",
           options: {
               configureJSX: true,
           },
       },
       "@storybook/addon-essentials",
       "@storybook/preset-create-react-app",
       "@storybook/addon-knobs",
       "@storybook/addon-actions",
   ],
   // https://storybook.js.org/docs/react/configure/typescript#mainjs-configuration
   typescript: {
       check: true, // type-check stories during Storybook build
   },
   module: {
       rules: [
           {
               test: /\.(scss|css)$/,
               use: ["style-loader", "css-loader", "sass-loader"],
               include: path.resolve(__dirname, "../"),
           },
           // { test: /\.css$/, loader: 'style-loader!css-loader', include: __dirname },
           {
               test: /\.(woff|woff2)$/,
               use: {
                   loader: "url-loader",
                   options: {
                       name: "fonts/[hash].[ext]",
                       limit: 5000,
                       mimetype: "application/font-woff",
                   },
               },
           },
           {
               test: /\.(ttf|eot|svg|png)$/,
               use: {
                   loader: "file-loader",
                   options: {
                       name: "fonts/[hash].[ext]",
                   },
               },
           },
       ],
   },
   

   };