Simple Styled Components and Typescript Setup Typechecking Error

Question

I am currently installing Typescript into a repository with an existing Webpack and Babel setup that includes Styled Components.

Since Babel will take care of compilation, I have configured tsc to perform typechecking only. However, with a simple Typescript React component that defines a Styled Component div, tsc is giving me the following error(s):

core/ui/NoticeBanner/index.tsx:33:6 - error TS2786: 'BannerContainer' cannot be used as a JSX component.
  Its return type 'ReactElement<Omit<Omit<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<...>> & { ...; }, never> & Partial<...>, "theme"> & { ...; }, string | JSXElementConstructor<...>>' is not a valid JSX element.
    Type 'ReactElement<Omit<Omit<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<...>> & { ...; }, never> & Partial<...>, "theme"> & { ...; }, string | JSXElementConstructor<...>>' is missing the following properties from type 'Element': nodeName, attributes, children

33     <BannerContainer>
        ~~~~~~~~~~~~~~~

core/ui/NoticeBanner/index.tsx:41:8 - error TS2786: 'BannerText' cannot be used as a JSX component.
  Its return type 'ReactElement<Omit<Omit<Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<...>> & { ...; }, never> & Partial<...>, "theme"> & { ...; }, string | JSXElementConstructor<...>>' is not a valid JSX element.

41       <BannerText>{message}</BannerText>

Here is the component in question:

import React from 'react';

import AlertWarning from 'material-ui/svg-icons/alert/warning';
import ActionInfo from 'material-ui/svg-icons/action/info';

import styled from 'styled-components';

const BannerContainer = styled.div`
  background-color: rgba(243, 209, 121, 0.23);
  padding: 10px 30px;
  margin: 40px 0px;
  flex-direction: row;
  display: flex;
  align-items: center;
`;

const BannerText = styled.div`
  margin-left: 13px;
  font-size: 18px;
  font-weight: 400;
  color: #333333 !important;
  line-height: 140.28% !important;
`;

interface NoticeBannerProps {
  message: string;
  status: string;
}

const NoticeBanner = (props: NoticeBannerProps) => {
  const { message, status } = props;
  return (
    <BannerContainer>
      <div style={{ display: 'flex' }}>
        {status === 'failed' ? (
          <AlertWarning className="alert-icon" color="#dc3545" />
        ) : (
          <ActionInfo className="info-icon" color="#8F2C87" />
        )}
      </div>
      <BannerText>{message}</BannerText>
    </BannerContainer>
  );
};

export default NoticeBanner;

Dependency Versions

"@types/react": "16.9.30",
"@types/styled-components": "^5.1.9",
"react": "16.8.6",
"styled-components": "^5.3.0",
"typescript": "4.2.4",

tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "module": "commonjs",
    "allowJs": true,
    "jsx": "react",
    "noEmit": true,
    "isolatedModules": true,
    "strict": true,
    "moduleResolution": "node",
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "baseUrl": "./",
    "paths": {
      "~/*": ["*"]
    }
  },
  "exclude": ["node_modules", "__mocks__", "**/*.spec.js", "test", "public", "dist"]
}

I have tried different versions of Styled Components within v5 as well as different versions of the @types/react and @types/styled-components.

I am a bit stuck on what else I can look into or what I can use to debug the problem.

I am guessing it is either a dependency graph issue (version of @types aren't aligning correctly).

rob rob · Accepted Answer · 2021-05-17T03:32:17

I figured out the issue.

My repository is using yarn workspaces and there was a folder unrelated with it's own node_modules folder that was causing the issue. Adding it to the tsconfig.json's exclude config option resolved this.

Simple Styled Components and Typescript Setup Typechecking Error

1 Answers