storybook 7 does not recognize module declarations

14 Views Asked by At

I use storybook 7.6.7 for my project. I want to be able to use *.module.scss and *.jpeg files in my stories. however, when I import a module.scss file, I get this error.

Cannot find module './*.module.scss' or its corresponding type declarations.ts(2307)

this is just a typescript error and the styles work fine in stories in production. here is my storybook config in main.ts.

import type { StorybookConfig } from "@storybook/react-webpack5";
const path = require("path");

function getAbsolutePath(value) {
  return path.dirname(require.resolve(path.join(value, "package.json")));
}

const config: StorybookConfig = {
  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
  addons: [
    "@storybook/addon-links",
    "@storybook/addon-essentials",
    "@storybook/addon-interactions",
    "@storybook/addon-styling-webpack",
    "@storybook/manager-api",
    "@storybook/theming",
    "storybook-dark-mode",
  ],
  framework: getAbsolutePath("@storybook/react"),
  core: {
    builder: {
      name: "@storybook/builder-webpack5",
      options: {
        fsCache: false,
        lazyCompilation: true,
      },
    },
  },
  webpackFinal: async (config, { configType }) => {
    config.module?.rules?.push({
      test: /\.module\.s(a|c)ss$/,
      use: [
        "style-loader",
        {
          loader: "css-loader",
          options: {
            modules: {
              localIdentName:
                configType === "PRODUCTION"
                  ? "[local]__[hash:base64:5]"
                  : "[name]__[local]__[hash:base64:5]",
              exportLocalsConvention: "camelCase",
            },
            sourceMap: true,
          },
        },
        {
          loader: "sass-loader",
          options: {
            sourceMap: true,
          },
        },
      ],
      include: path.resolve(__dirname, "../"),
    });
    return config;
  },
};

export default config;

I have no idea how to fix it. I have already declared a index.d.ts file with module declarations included but no luck.

any help is appreciated.

0

There are 0 best solutions below