How I run storybook with tsx and sass files - reactjs

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:
Update "#storybook/react": "^6.1.11"
Add "#storybook/preset-create-react-app": "^3.1.5"
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]",
},
},
},
],
},
};