1

I have created TSDX react-with-storybook project, but found out that I couldn't import CSS modules. The problem appears when I run npm start:

✖ Failed to compile
(typescript) Error: G:/projects/design-system/src/index.tsx(2,19): semantic error TS2307: Cannot find module './style.module.css' or its corresponding type declarations.
Error: G:/projects/design-system/src/index.tsx(2,19): semantic error TS2307: Cannot find module './style.module.css' or its corresponding type declarations.
    at error (G:\projects\design-system\node_modules\rollup\dist\shared\node-entry.js:5400:30)
    at throwPluginError (G:\projects\design-system\node_modules\rollup\dist\shared\node-entry.js:11878:12)
    at Object.error (G:\projects\design-system\node_modules\rollup\dist\shared\node-entry.js:12912:24)
    at Object.error (G:\projects\design-system\node_modules\rollup\dist\shared\node-entry.js:12081:38)
    at RollupContext.error (G:\projects\design-system\node_modules\rollup-plugin-typescript2\dist\rollup-plugin-typescript2.cjs.js:17237:30)        
    at G:\projects\design-system\node_modules\rollup-plugin-typescript2\dist\rollup-plugin-typescript2.cjs.js:25033:23
    at arrayEach (G:\projects\design-system\node_modules\rollup-plugin-typescript2\dist\rollup-plugin-typescript2.cjs.js:545:11)
    at Function.forEach (G:\projects\design-system\node_modules\rollup-plugin-typescript2\dist\rollup-plugin-typescript2.cjs.js:9397:14)
    at printDiagnostics (G:\projects\design-system\node_modules\rollup-plugin-typescript2\dist\rollup-plugin-typescript2.cjs.js:25006:12)
    at Object.transform (G:\projects\design-system\node_modules\rollup-plugin-typescript2\dist\rollup-plugin-typescript2.cjs.js:29277:17)

Here's some ideas I had:

// webpack.config.js
const path = require('path');

module.exports = async ({ config, mode }) => {
    config.module.rules.push({
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
        include: path.resolve(__dirname, '../'),
    });

    // Return the altered config
    return config;
};

// .storybook/main.js
module.exports = {
    stories: ['../stories/**/*.stories.@(ts|tsx|js|jsx)'],
    addons: [
        '@storybook/addon-links',
        '@storybook/addon-essentials',
        {
            name: 'storybook-addon-sass-postcss',
            options: {
                sassLoaderOptions: {
                    implementation: require('sass'),
                },
            },
        },
    ],
    typescript: {
        check: true,
    }
};

None of these steps helped (neither separately nor together). What can I do with it? The main goal is to import SCSS file as a module in a React component.

Vladislav
  • 33
  • 4

0 Answers0