“Cannot find module './style' or its corresponding type declarations” error, typescript linter

Question

I'm building a Gatsby project with css-modules and gatsby-config.js , where I resolve a .scss extension.

It builds and it works great BUT my linter doesn't agree with this, firing an error " Cannot find module './style' or its corresponding type declarations.ts(2307) " when I try to import styles like that:

No errors if I'm importing from js/ts/jsx/tsx files but when I try to import styles (or images) like modules, without a proper extension, it fires this error.

I already tried to declare extensions as modules inside a "typings" folder in the root of the project, like "declare module "*.scss"", didn't work.

My gatsby-config.js

const path = require('path');

const isDev = process.env.NODE_ENV === 'development';

module.exports = {
  siteMetadata: {
    title: 'Title from siteMetadata',
  },
  plugins: [
    {
      resolve: `gatsby-plugin-sass`,
      options: {
        cssLoaderOptions: {
          sourceMap: isDev,
          modules: {
            mode: 'local',
            localIdentName: '[local]--[hash:base64:5]',
          },
        },
      },
    },
    {
      resolve: 'gatsby-plugin-alias-imports',
      options: {
        alias: {
          '@containers': path.resolve(__dirname, 'src/containers'),
          '@components': path.resolve(__dirname, 'src/components'),
          '@pages': path.resolve(__dirname, 'src/pages'),
        },
        extensions: ['.js', '.jsx', '.ts', '.tsx', '.css', '.scss'],
      },
    },
  ],
};

My tsconfig.json

{
  "compilerOptions": {
    "strict": true,
    "outDir": "./build/",
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "commonjs",
    "target": "es6",
    "jsx": "react",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "baseUrl": ".",
    "paths": {
      "@containers/*": ["src/containers/*"],
      "@components/*": ["src/components/*"],
      "@pages/*": ["src/pages/*"]
    }
  }
}

My .eslintrc.js

module.exports = {
  env: {
    browser: true,
    es2020: true,
  },
  extends: [
    'plugin:@typescript-eslint/recommended',
    'plugin:react/recommended',
    'airbnb',
    'prettier',
  ],
  parser: '@typescript-eslint/parser',
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 11,
    sourceType: 'module',
  },
  plugins: ['react', '@typescript-eslint', 'prettier'],
  rules: {
    'prettier/prettier': ['error'],
    indent: ['error', 2],
    'no-unused-vars': 'warn',
    'import/no-unresolved': 'off',
    'import/extensions': 'off',
    'react/prop-types': 'off',
    'react/jsx-props-no-spreading': 'off',
    'react/jsx-filename-extension': [
      'error',
      {
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
      },
    ],
  },
};

I would be grateful for your help. At least, maybe there's some method to turn this ts-rule off?

Answer 1

If your directory structure is src/style/**/*.scss

change "baseUrl": "." to "baseUrl": "src" in tsconfig.json file.

Or Update tsconfig.json

Where the ".scss" type is define.

  "include": [
    "./typings/type.d.ts",
  ],

Answer 2

create a file next-env.d.ts at root and add the below statement to that file

 declare module '*.css'

Before adding the above statement

After adding the statement