Skip to content
Advertisement

Typescript type error property does not exist

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;
}
User contributions licensed under: CC BY-SA
7 People found this is helpful
Advertisement