Not working

[batusai513]

Describe the bug I've created a brand new create-react-app with typescript and followed the instructions you kindly wrote, but as soon as I run yarn start I get the typing error:

Type error: Property 'app' does not exist on type 'typeof import("*.module.scss")'.  TS2339

     6 |   render() {
     7 |     return (
  >  8 |       <div className={styles.app}>
       |                              ^
     9 |         <header className={styles.appHeader}>
    10 |           <img src={logo} className={styles.appLogo} alt="logo" />
    11 |           <p>

.vscode/settings.json

{
  "typescript.tsdk": "./node_modules/typescript/lib"
}

tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "plugins": [
      {
        "name": "typescript-plugin-css-modules",
        "options": {
          "camelCase": "dashes"
        }
      }
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "preserve"
  },
  "include": [
    "src",
    "custom.d.ts"
  ]
}

OS: macOS mojave VScode: 1.30.2 react-scripts: 2.1.3 typescript: 3.2.4 typescript-plugin-css-modules: 1.0.5

[mrmckeb]

Thanks for this report @batusai513, can you please try the previous version?

I think it is an issue with this release - it seems to intermittently fail, I first noted it with a colleague yesterday. I'll investigate and resolve over the weekend.

[batusai513]

@mrmckeb I've tested until v1.0.0 and It is not working :(

[mrmckeb]

Thank you for the update.

I apologise, it looks like I misread your issue. You said it occurs during yarn start only? In the IDE it's fine?

If so, can you share a link to your report? I can take a look))

[batusai513]

@mrmckeb not at all, it is throwing there too.

[mrmckeb]

Can you share your repository with me? Even if it's privately shared? I can debug it tomorrow and come back with a solution.

[batusai513]

@mrmckeb already added you as a collaborator

[mrmckeb]

Sorry @batusai513, I had a busy week and a half. I can look at this tonight or tomorrow.

[dawnmist]

Just checking @batusai513 - are you using import * as styles when importing the css/scss? I had been, and when first testing whether I could start using typescript-plugin-css-modules I was getting the same errors that you're listing until I changed the imports to all be import styles instead of import * as styles.

[batusai513]

@dawnmist yes, I'm using import * as styles, I'll try the other way around, but i think this is a miss, webpack can use the import * as styles to batter analyze the bundle and do proper tree shaking.

[mrmckeb]

@batusai513, @dawnmist is correct (thanks) - the problem is that this is a default export, and you're importing as though they are named exports.

First, tree-shaking won't be impacted here as this isn't a JS module (please correct me if I'm wrong). Second, this plugin originally had named exports, but that meant people had to use JS-friendly names for exports. As the plugin evolved, this was deemed less beneficial than allowing people to import classnames in any style they wanted.

That being said, I think it's always good to support any use case. Issue #10 aims to allow this, but this will only work when users enable the camelCase option.

Can you please report back and let me know if that did solve your problem, and I will get to work on finally closing off #10 which I think will fix your issue.

Thanks for both for your time in helping to resolve this.

[mrmckeb]

This will be resolved by #10, which I'm looking at adding soon.

[ChrisCrossCrash]

Just FYI, this was still an issue for me on my brand-new NextJS project. Here is the error I experienced:

> Executing task: yarn run build <

yarn run v1.22.17
$ next build
Failed to compile.

./components/Hero/Hero.tsx:6:23
Type error: Property 'base' does not exist on type 'typeof import("*.module.scss")'.

  4 | export const Hero = () => (
  5 |   <div
> 6 |     className={styles.base}
    |                       ^
  7 |     style={{
  8 |       // TODO: Load this from a file:
  9 |       backgroundImage:
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
The terminal process "C:\WINDOWS\System32\WindowsPowerShell\v1.0\powershell.exe -Command yarn run build" terminated with exit code: 1.

Changing imports from import * as styles to import styles fixed it for me.

Here are my project's dependencies currently:

"dependencies": {
    "@fontsource/inter": "^4.5.0",
    "@fontsource/metropolis": "^4.5.0",
    "ck-css": "https://github.com/ChrisCrossCrash/ck-css.git#v1.0.0",
    "gsap": "^3.8.0",
    "js-yaml": "^4.1.0",
    "modern-normalize": "^1.1.0",
    "next": "^12.0.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "sass": "^1.43.4",
    "sharp": "^0.29.2"
  },
  "devDependencies": {
    "@cypress/react": "^5.10.3",
    "@cypress/webpack-dev-server": "^1.7.0",
    "@testing-library/cypress": "^8.0.1",
    "@types/js-yaml": "^4.0.4",
    "@types/node": "^16.11.6",
    "@types/react": "^17.0.34",
    "cypress": "^8.7.0",
    "eslint": "7",
    "eslint-config-next": "^12.0.2",
    "eslint-config-prettier": "^8.3.0",
    "html-webpack-plugin": "^5.5.0",
    "prettier": "2.4.1",
    "typescript": "^4.4.4",
    "typescript-plugin-css-modules": "^3.4.0",
    "webpack": "^5.61.0",
    "webpack-dev-server": "^4.4.0"
  }

Here is the full repository (with the fixes applied).

[FDiskas]

Let's reopen this. parcel users are forced to use import * as styles https://parceljs.org/languages/css/#tree-shaking

[osavchukdoit]

Let's reopen this. parcel users are forced to use import * as styles https://parceljs.org/languages/css/#tree-shaking

Follow this guide to solve the issue - https://copyprogramming.com/howto/css-modules-with-sass-next-js-code-example In my case I just added typings.d.ts file to the src folder containing: // typings.d.ts declare module "*.module.scss" { interface IClassNames {

  }
  const classNames: IClassNames;
  export = classNames;
}