Ts2307 cannot find module css or its corresponding type declarations

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TS Error using CSS/SCSS Modules in TypeScript #9690

TS Error using CSS/SCSS Modules in TypeScript #9690

Comments

Bug report

Describe the bug

Try to use CSS Modules in TypeScript the same way I would use them in JavaScript, l see an error: ”TS2307: Cannot find module ‘./styles.css’”.

To Reproduce

I think webpack css-loader should be updated.

Expected behavior

I should not see such an error

Screenshots

System information

The text was updated successfully, but these errors were encountered:

you can add this to the next-env.d.ts file.

declare module '*.scss'  const content: string; export default content; >

you can add this to the next-env.d.ts file.

declare module '*.scss'  const content: string; export default content; >

declare module '*.scss' < const classes: < [key: string]: string>; export default classes; >

Works better since you don’t get any errors in the code about undeclared props.

I just implemented it and created video walkthrough on how to implent on NextJS and React.

if anybody stumbles upon this thread and has the same problems as me:
I migrated from CRA to next.js and didn’t change the include option in tsconfig.json . It should roughly look like this:

"include": [ "next-env.d.ts", "**/*.ts", "**/*.tsx", ],

My include was missing the «next-env.d.ts» option, which automatically includes the aforementioned declarations for css modules (at least in new next.js versions).

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

Источник

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Typescript error for css module imports #259

Typescript error for css module imports #259

Comments

Using the default demo template, I get the following error in any index.js file when importing from css (modules):

Cannot find module './style.module.css' or its corresponding type declarations. 

The text was updated successfully, but these errors were encountered:

What’s interesting is that I don’t seem to have any typing available. Everything is either inferred return types or any .

const About: ( query >:  query: any; >) => any

The only thing that seems to be typed is useState from preact/hooks :

(alias) function useStateS>(initialState: S | (() => S)): [S, StateUpdaterS>] import useState // Returns a stateful value, and a function to update it. // @param initialState — The initial value (or a function that returns the initial value)

I’m using VScode 1.52 if it helps.

Hiya — any chance you have a custom tsconfig.json instead of using create-wmr to generate the project? We do ship a d.ts file for this as marvin mentioned, and it includes ambient declarations for *.module.css .

There is an issue where the imported value is incorrectly typed as string that is fixed on master but hasn’t been released.

What version of TypeScript are you using? (local and/or vscode versions)

One thing to check: I believe our ambient declarations require moduleResolution: ‘node’ in tsconfig’s compilerOptions.

There is a tsconfig.json but it was generated using create-wmr .

 "compileOnSave": false, "compilerOptions":  "jsx": "preserve", "allowJs": true, "checkJs": true, // "strict": true, "noEmit": true, "moduleResolution": "node", "target": "ESNext", "module": "esnext", "resolveJsonModule": true, "allowSyntheticDefaultImports": true, "downlevelIteration": true >, "typeAcquisition":  "enable": true > >

Ok, I had «typescript.disableAutomaticTypeAcquisition»: true, enabled in VScode for some reason. Removed it.

Now two projects using create-wmr are reporting different errors. A newly created one can’t seem to get typings for preact/hooks and there are errors when accessing CSS modules:

Property 'home' does not exist on type 'string'.ts(2339) 

Could be a VScode / TS quirk.

I was going to open a PR but it seems the code on master will fix this issue.

I think the issue @ivancuric and I are seeing is related with the order ambient modules are declared.
This is the order I’m getting with wmr@1.0.0 :

// types.d.ts declare module '*.css'  const url: string; export default url; > declare module '*.scss'  const url: string; export default url; > declare module '*.sass'  const url: string; export default url; > declare module '*.styl'  const url: string; export default url; > /** Maps authored classNames to their CSS Modules -suffixed generated classNames. */ interface Mapping  [key: string]: string; > declare module '*.module.css'  const mapping: Mapping; export default mapping; > declare module '*.module.scss'  const mapping: Mapping; export default mapping; > declare module '*.module.sass'  const mapping: Mapping; export default mapping; > declare module '*.module.styl'  const mapping: Mapping; export default mapping; >

But on master the order is correct. (which is a bummer, I was eager to make a splash with an easy fix PR )

A newly created one can’t seem to get typings for preact/hooks and there are errors when accessing CSS modules:

This is a different issue (or feature).
preact is installed locally if you run npm run build but not by default. preact-iso lists preact as a dev-dependency which is why it’s not installed when you npm install on a wmr template project.

This is a different issue (or feature).
preact is installed locally if you run npm run build but not by default. preact-iso lists preact as a dev-dependency which is why it’s not installed when you npm install on a wmr template project.

Yeah, we noticed that yesterday and this was fixed with #256

Ah thanks for clarifying that @Marabyte, I hadn’t realized it was because of the peerDependencies thing. preact-iso is correct in that regard, we just needed to have create-wmr do the right thing as @rschristian mentioned.

We’ll get a release out today that sorts these things out.

developit added has fix A fix is PR’d or merged, but not yet released and removed needs more info More information is needed to diagnose. labels Dec 17, 2020

Источник

Cannot Find Module ‘XXX.scss’ or Its Corresponding Type Declarations

When using CSS Module in Typescript + Webpack + Sass projects, you can use CSS modules normally, but vscode always prompts cannot find module’XXX.scss’ or its corresponding type declarations.

Solution

Option 1

1. First of all, make sure that webpack and sass have been able to recognize the CSS Module, please refer to the webpack official website configuration.

declare module'*.scss'  const content: [key: string]: any> export = content > 

After this configuration, my problem has been solved, and neither VSCODE nor Node command line interface will report an error, and it can match normally.

Option 2

The recommended solution on the Internet is to write the d.ts file in the same level directory of the css file, usually using a plug-in to automatically complete

Choose one of the following plugins

• webpack plugin typings-for-css-modules-loader
• webpacl plugin css-modules-typescript-loader
• Possible plug-ins, Typescript plug-in typescript-plugin-css-modules (I used it to no effect)

Usually after installing the plug-in to automatically generate each css declaration file, there will be no error, but there are two shortcomings, one is that there are too many project files, and the other is that the path alias is still not recognized by VSCODE (the Node command line is normal), this Two d.ts must be configured as above to prevent VSCODE from prompting errors.

Reference

//example one declare module'*.scss'; //example two declare module'*.scss'  const content: any; export default content; > //example three declare module'*.scss'  const content: Recordstring, string>; export default content; > //example four declare module'*.scss'  const content: [key: string]: any> export = content > 

Источник

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

TS Error using CSS/SCSS Modules in TypeScript #9690

TS Error using CSS/SCSS Modules in TypeScript #9690

Comments

Bug report

Describe the bug

Try to use CSS Modules in TypeScript the same way I would use them in JavaScript, l see an error: ”TS2307: Cannot find module ‘./styles.css’”.

To Reproduce

I think webpack css-loader should be updated.

Expected behavior

I should not see such an error

Screenshots

System information

The text was updated successfully, but these errors were encountered:

you can add this to the next-env.d.ts file.

declare module '*.scss'  const content: string; export default content; >

you can add this to the next-env.d.ts file.

declare module '*.scss'  const content: string; export default content; >

declare module '*.scss' < const classes: < [key: string]: string>; export default classes; >

Works better since you don’t get any errors in the code about undeclared props.

I just implemented it and created video walkthrough on how to implent on NextJS and React.

if anybody stumbles upon this thread and has the same problems as me:
I migrated from CRA to next.js and didn’t change the include option in tsconfig.json . It should roughly look like this:

"include": [ "next-env.d.ts", "**/*.ts", "**/*.tsx", ],

My include was missing the «next-env.d.ts» option, which automatically includes the aforementioned declarations for css modules (at least in new next.js versions).

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

Источник