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

See original GitHub issue

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 https://github.com/TeamSupercell/typings-for-css-modules-loader/issues/7#issuecomment-531636867_

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Comments:9 (4 by maintainers)

github_iconTop GitHub Comments

2reactions
ErikParsocommented, Nov 7, 2019

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

2reactions
Obi-Danncommented, Nov 7, 2019

@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 😞

Read more comments on GitHub >

github_iconTop Results From Across the Web

Property 'use' does not exist on type 'typeof... ...
Vue 3 has just been released. and there is no Vue.use() method anymore. the correct way now is as you did createApp(App) .use(store) ......
Read more >
Property 'Provider' does not exist on type 'typeof import.ts ...
Photo by Dim Hou on Unsplash. Ever experienced this error, there are several ways to resolve this → Property 'Provider' does not exist...
Read more >
Property 'create' does not exist on type 'typeof import ...
While converting existing project to TS I'm getting an error: Property 'create' does not exist on type 'typeof import("/Users/my-path/node_ ...
Read more >
property 'extend' does not exist on type 'typeof
I'm trying to add a menu bar to videoJS control bar in TypeScript but I'm getting an error saying "Property 'extend' does not...
Read more >
Property does not exist on type Object in TypeScript
The "Property does not exist on type Object" error occurs when we try to access a property that is not contained in the...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found