TS2339: Property does not exist on type 'typeof import ...'

[CoericK]

Thanks for supporting this library, I am facing issues integrating it with less and the latest version for loaders, I tried different setups but only this managed to "work" (kinda)

I got the following setup:

package.json

{
    "@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"
  }

tsconfig.json

{
  "compilerOptions": {
    "outDir": "./dist/",
    "sourceMap": true,
    "noImplicitAny": true,
    "module": "commonjs",
    "target": "es6",
    "jsx": "react",
    "allowSyntheticDefaultImports": true,
    "typeRoots": ["node_modules/@types", "./typings"]
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
}

webpack.config.js

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

less/components/logo.less

.logo {
  background-color: red;
  width: 100px;
  height: 100px;
}

After running webpack in dev it generates the logo.d.ts file that contents:

export interface ILogoLess {
    logo: string
}

export const locals: ILogoLess
export default locals

I tried importing the styles in several ways but this is the only one that "seems to work":

import * as styles from '../../less/component/logo.less' // {logo: "_3_lAqxKX6-Al3YE3MgBx_J"}

This works on the DOM, but I get the error:

TS2339: Property 'logo' does not exist on type 'typeof import(".../less/component/logo.less")'.

I dont know how to fix this, I tried several times now

Originally posted by @CoericK in #7 (comment)

[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.

[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.