Styled Components Prop Type Error in JavaScript with CoC and tsserver in Vim (No TypeScript)

Question

I'm working on a React project using Emotion js for styled components. I'm using Vim with the CoC plugin and coc-tsserver for JavaScript development. Even though I'm not using TypeScript, I'm relying on tsserver for type checking in my JavaScript files.

I'm encountering type errors when passing props to Emotion styled components. Here's an example of my code:

export const CommandInput = styled.div`
  display: flex;
  flex-direction: column;
  height: ${({ height }) => height};
`;

On using <CommandInput height="200px" /> im getting a type error:

My jsconfig.json:

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "checkJs": true,
    "skipLibCheck": true,
    "baseUrl": ".",
  },
  "exclude": ["node_modules", "dist"]
}

Has anyone encountered a similar problem or have suggestions on how to fix this or configure to ignore it?

Answer 1

The error message you're encountering indicates that you are trying to pass a height prop to an HTML div element, but the div element doesn't inherently support a height prop in its type definition. To resolve this, you have a few options:

1. Use Inline Styles:

Instead of trying to pass a height prop, you can apply the height style directly to the div element using inline styles. This way, you won't need to pass a height prop, and you can set the height directly in your component like this:

<div style={{ height: '200px' }}>Content here</div>

2. Define a Custom Styled Component as you did:

If you want to use Emotion styled components and pass a height prop, you should define your own custom styled component that accepts the height prop and passes it to the underlying div element.

a. Define types for your styled components to specify their props. This will help tsserver understand the props you are using and avoid type errors.

import styled from '@emotion/styled';

export const CommandInput = styled.div`
  display: flex;
  flex-direction: column;
  height: ${({ height }) => height};
`;

// Declare the type for the props
export type CommandInputProps = {
  height: string;
};

b. Apply the defined prop types to your component when using it.

import React from 'react';
import { CommandInput, CommandInputProps } from './MyStyledComponent';

const YourComponent: React.FC = () => {
  return <CommandInput height="200px" />; // Use CommandInputProps as type
};

export default YourComponent;

c. Update your jsconfig.json to include paths to your custom types so that tsserver can recognize them.

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "checkJs": true,
    "skipLibCheck": true,
    "baseUrl": ".",
    "paths": {
      "@emotion/styled": ["node_modules/@emotion/styled/types/index.d.ts"]
      // Add paths to your custom types if needed
    }
  },
  "exclude": ["node_modules", "dist"]
}

Reference: https://dev.to/amanhimself/prop-types-in-react-and-typescript-1kph

Answer 2

Just add height definition like this:

export const CommandInput = styled.div<{ height: string }>`
    display: flex;
    flex-direction: column;
    height: ${({ height }) => height};
`

UPDATE: If you are using js files -> add jsdoc:

 import { css } from '@emotion/react'

 /**
 * @param  {Object}  props
 * @param  {String}  props.height
 * @param  {React.ReactNode}  [props.children]
 */
export const CommandInput = ({ height, children }) => (
    <div
        css={css`
            display: flex;
            flex-direction: column;
            height: ${height};
        `}
    >
        {children}
    </div>
)