I have this component in my Typescript Next project
import PageTitle from './pagetitle' import style from './contact.styl' export default function Contact() { return ( <section> <a name="contact"></a> <div className={style.container}> <PageTitle title='get in touch!'/> <form action=""> <input name="name" type="text" placeholder="name" /> <input name="subject" type="text" placeholder="subject" /> <textarea placeholder="message" /> <button type="submit">send</button> </form> </div> </section> ); }
This is what contact.styl
looks like it is a CSS file using the Stylus CSS PreProcessor so there is no typo in the spelling of style. I recently fixed an error using a module declaration in my `next-env.d.ts’ file
.container width 95vw height 90vh display flex flex-direction column background rgba(43,43,43,.97) border-radius 60px margin 0 auto h3 font-size 22px color #d3ecf7 form height 450px display flex flex-direction column justify-content space-evenly align-items center margin-top 3rem input, textarea width 355px box-shadow 0px 3px 6px #00000029 border-radius 13px outline none border none background #2b2b2b font normal normal 300 20px Avenir padding-top 5px text-align center color #fff input height 45px textarea height 200px resize none ::placeholder text-align center font normal normal 300 20px Avenir color #d3ecf7 @media(max-width 760px) .container width 100vw height auto border-radius 0 form height 500px margin-top 0 input, textarea width 90vw
But I keep getting this error?
Type error: Property 'container' does not exist on type 'string'.
Can anyone help me figure out why?
Edit: added contact.styl
Figured out the problem
Try to add an asterisk to the module name as in the updated example. **- Sergey**
Advertisement
Answer
It seems like you have a module declaration somewhere in a declaration .d.ts
file. It may look like this:
declare module ".styl" { const value: string; export default value; }
If this is correct, you should change the export type to be Record<string, string>
. Like this:
declare module "*.styl" { const value: {[key: string]: string}; export default value; }