Typescript type error property does not exist

Question

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**

Can you please share how the `style` looks like in `./contact.style`? — norbitrial, Nov 06 '20 at 14:17
@UKS Not a type it is supposed to be `.styl` I am using Stylus a CSS PreProcessor like Sass — ContainLetters, Nov 06 '20 at 16:06

Sergey · Accepted Answer · 2020-11-06T18:32:19.703

0

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;
}

edited Nov 06 '20 at 18:32

answered Nov 06 '20 at 14:28

Sergey

1,000
8
19

How would I change the export type? The declare module looks like `declare module '*.styl' { const content: string; export default content; }` – ContainLetters Nov 06 '20 at 16:00
@ContainLetters I updated the answer with an example. – Sergey Nov 06 '20 at 18:05
This didn't fix it unfortunately – ContainLetters Nov 06 '20 at 18:22
I get this error with your suggestion: `Cannot find module './contact.styl' or its corresponding ~ │type declarations.` – ContainLetters Nov 06 '20 at 18:22
@ContainLetters you can also try to use either `{[key: string]: string}` or just use `any` as the type. I updated the answer again. Please, notice the asterisk in the module name. – Sergey Nov 06 '20 at 18:29
With any : `Cannot find module './contact.styl' or its corresponding ~ │type declarations.` – ContainLetters Nov 06 '20 at 18:32
With `{[key: string]...` I get: `Cannot find module './contact.styl' or its corresponding ~ │type declarations.` – ContainLetters Nov 06 '20 at 18:33
@ContainLetters Try to add an asterisk to the module name as in the updated example. – Sergey Nov 06 '20 at 18:34
That worked! I am sure I had an asterisk in there before! My bad – ContainLetters Nov 06 '20 at 18:39

Typescript type error property does not exist

Figured out the problem

1 Answers1

Linked