Gatsby: Error while use Gatsby with Typescript and scss module

[kamontat]

Description

Error module not found in my vscode while I use sass module with typescript

Steps to reproduce

1. Make project support typescript, sass, and sass-module using gatsby plugin.
2. Create demo component with sass module.
3. Cause error in import module line said Cannot find module './index.module.scss'.

Demo typescript code

// error this line said '[ts] Cannot find module './index.module.scss'.'
import styles from './index.module.scss'

const Some: React.StatelessComponent<Prop> = ({ children }) => (
  <div className={styles.container}>
    {children}
  </div>
)

Demo scss code

.container {
  color: red;
}

Expected result

Cause only in vscode BUT not error while complied or deployed

Actual result

Clear, no error

Environment

  System:
    OS: macOS High Sierra 10.13.6
    CPU: x64 Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
    Shell: 5.5.1 - /usr/local/bin/zsh
  Binaries:
    Node: 9.11.1 - ~/.nvm/versions/node/v9.11.1/bin/node
    Yarn: 1.9.4 - /usr/local/bin/yarn
    npm: 5.6.0 - ~/.nvm/versions/node/v9.11.1/bin/npm
  Browsers:
    Chrome: 70.0.3538.16
    Safari: 11.1.2
  npmPackages:
    gatsby: 2.0.0-rc.24 => 2.0.0-rc.24 
    gatsby-image: 1.0.55 => 1.0.55 
    gatsby-plugin-emotion: 2.0.0-rc.5 => 2.0.0-rc.5 
    gatsby-plugin-favicon: 3.1.4 => 3.1.4 
    gatsby-plugin-google-analytics: 1.0.31 => 1.0.31 
    gatsby-plugin-manifest: 2.0.2-rc.1 => 2.0.2-rc.1 
    gatsby-plugin-netlify: 2.0.0-rc.6 => 2.0.0-rc.6 
    gatsby-plugin-netlify-cache: 1.0.0-beta0 => 1.0.0-beta0 
    gatsby-plugin-netlify-cms: 3.0.0-rc.5 => 3.0.0-rc.5 
    gatsby-plugin-nprogress: ^1.0.14 => 1.0.14 
    gatsby-plugin-offline: 2.0.0-rc.7 => 2.0.0-rc.7 
    gatsby-plugin-react-helmet: 3.0.0-rc.1 => 3.0.0-rc.1 
    gatsby-plugin-sass: 2.0.0-rc.2 => 2.0.0-rc.2 
    gatsby-plugin-sharp: 2.0.0-rc.7 => 2.0.0-rc.7 
    gatsby-plugin-sitemap: 2.0.0-rc.1 => 2.0.0-rc.1 
    gatsby-plugin-typescript: 2.0.0-rc.6 => 2.0.0-rc.6 
    gatsby-transformer-sharp: 2.1.1-rc.3 => 2.1.1-rc.3 

[ascorbic]

You can either add a d.ts file that includes declare module "*.scss", or create an index.module.scss.d.ts with export const container:string. I've not used it, but this plugin might help.

[kakadiadarpan]

@kamontat can you please provide a reproduction repo where we can see this error? That would make it much easier to diagnose this issue.

[kamontat]

@ascorbic THE PLUGIN didn't work, since It out of date.

@kakadiadarpan I try to solve it for the long time,
and I found that file *.d.ts was missing so It cannot found the type or make autocomplete.

I also found that if I manually add *.d.tsfile the error will gone away.

I try to add typings-for-css-modules-loader but not success. either add at the wrong path or library don't work in gatsby.

[kakadiadarpan]

Hi @kamontat, how did you integrated typings-for-css-modules-loader in your app? It would be great if you can provide a reproduction repo for this.

[kakadiadarpan]

There hasn't been any activity on this issue recently. Due to the high number of incoming GitHub issues, we have to clean some of the old issues as many of them have already been resolved with the latest updates.

Please make sure to update to the latest Gatsby version and check if that solves the issue. Let us know if that works for you by adding a comment 👍

[kakadiadarpan]

This issue is being closed because there hasn't been any activity for at least 30 days. Feel free to open a new one if you still experience this problem 👍

[mddizon]

In case anyone stumbles onto this issue from a search engine:
I ran into the same issue and @tdharmon was able to provide some guidance here: https://github.com/tdharmon/gatsby-starter-typescript-sass/issues/1