TS2339: Property does not exist on type 'typeof import ...' about typings-for-css-modules-loader

[Obi-Dann]

@ErikParso @CoericK started #14 which should resolve this issue. ETA is about 1 or 2 days. Thanks for all the information you provided and for your patience ❤️
As a workaround, you can try enabling TS compilerOptions esModuleInterop to true. TypeScript would check whether the module is esModule and either use the value from default field or just return the module. I was mistakenly thinking that that behavior is configured by allowSyntheticDefaultImports option 😞

[ErikParso]

Thanks! esModuleInterop flag with combination of import styles from './styles.css'; helps. Looking forward to fix.

[Obi-Dann]

@CoericK have you tried importing it as a default import? eg.

import styles from '../../less/component/logo.less'

Please let me know if it helps to fix the type checking error, I had to change the generated typings a bit to allow using it with style-loader and without (when people import locals).

If using default import works if this case, we might somehow consider getting it working for both default imports and * as.

Edit:
Please double check the order of loaders in your setup - typings-for-css-modules should come before css-loader

{
        test: /\.(less)$/,
        use: [
          { loader: 'style-loader' },
          {
            loader: '@teamsupercell/typings-for-css-modules-loader',
          },
          {
            loader: 'css-loader',
            options: { modules: true },
          },
          { loader: 'less-loader', options: { sourceMap: true } },
        ],
}

[CoericK]

Hey @DanNSam thanks for your quick answer, I double checked the order and placed @teamsupercell/typings-for-css-modules-loader before css loader
Also i tried to use the default method

import styles from '../../less/component/logo.less' // undefined

But styles its undefined:

index.tsx?07b1:45 Uncaught TypeError: Cannot read property 'logo' of undefined

[Obi-Dann]

@CoericK out of interest, which loader are you using for TypeScript: ts-loader, awesome-typescript-loader or babel-loader?

[CoericK]

As I listed on my dependencies I am using ts-loader

{
    "@teamsupercell/typings-for-css-modules-loader": "2.0.0",
    "css-loader": "3.2.0",
    "less-loader": "5.0.0",
    "style-loader": "1.0.0",
    "ts-loader": "6.1.0",
    "typescript": "3.6.3",
    "url-loader": "2.1.0",
    "webpack": "4.40.2",
    "webpack-dev-server": "3.8.0"
  }

[CoericK]

Hey guys, @DanNSam any updates regarding my issue?

[Obi-Dann]

@CoericK it looks like it's a runtime issue after you changed to the default import. I am wondering if your ts-loader is configured to use your tsconfig.json - My only idea is that ts-loader doesn't have a config with allowSyntheticDefaultImports set 🤷‍♂

[ErikParso]

Hello, I have same problem, but with awesome-typescript-loader.

If i use import * as styles from './styles.css'; className={styles.x} not working due to compilation error 'Property 'x' does not exist on type ...'

className={styles.default.x} do not work either because default is undefined.

default import import styles from './styles.css'; + className={styles.x} not working, again, a default is undefined.

import * as styles from './styles.css'; + className={(styles as any).x} is working but i loose strong typing and it doesnt look correct solution to me.

file styles.css.d.ts is generated and looks like this:

export interface IStylesCss {
  x: string;
}

export const locals: IStylesCss;
export default locals;

in my webpack.config.js i have:

test: /\.css$/,
use: [
    'style-loader',
    '@teamsupercell/typings-for-css-modules-loader',
    {
        loader: "css-loader",
        options: {
            modules: true,
        }
    }
]

tsconfig.json:

{
	"version": "3.2",
	"compileOnSave": true,
	"compilerOptions": {
		"noImplicitAny": true,
		"moduleResolution": "node",
		"sourceMap": true,
		"module": "commonjs",
		"target": "es2015",
		"jsx": "react",
		"preserveConstEnums": true,
		"allowSyntheticDefaultImports": true
}

I didn't even configured sass styles yet.