1

I split my components into two files. Index.tsx and Style.js. I keep my styles in Style.js to keep the index file clean.

When I try to import my styled component from Style.js i get the following error:

Could not find a declaration file for module './Style'. '/Users/sjoerdvermeijden/Sites/react-vite-typescript-todo/src/components/Footer/Style.js' implicitly has an 'any' type.

This is what the import looks like:

import { FooterWrapper } from "./Style";

This is what the styles look like:

import styled from "styled-components";

export const FooterWrapper = styled.div`
  padding: 25px 0;
  background: var(--darkgray);
  color: white;
`;

These are the modules i have installed to get styled components working:

npm i -D @types/styled-components
npm i styled-components
Adriaan
  • 17,741
  • 7
  • 42
  • 75
Sjoerd
  • 13
  • 4
  • Maybe duplicated. Have a look to: https://stackoverflow.com/questions/41292559/could-not-find-a-declaration-file-for-module-module-name-path-to-module-nam – devpolo Feb 08 '23 at 08:46

3 Answers3

0

Change the file extension from .js to .jsx

P Savva
  • 309
  • 1
  • 5
0

I noticed that you're facing some difficulties setting up Styled Components with TypeScript and React. I've encountered a similar issue in the past and found a solution that worked well for me. I've created a template that combines Tailwind CSS, TypeScript, and Styled Components. Feel free to modify it by adding or removing any dependencies to suit your project's requirements.

tsdx

I've tested this template, and it successfully wokring with Styled Components with TypeScript and React.

I hope this template helps you resolve the issues you're facing.Good luck!

Harrison
  • 1,654
  • 6
  • 11
  • 19
Wali Ahmad
  • 1
  • 1
  • While this link may answer the question, it is better to include the essential parts of the answer here and provide the link for reference. Link-only answers can become invalid if the linked page changes. - [From Review](/review/late-answers/34356052) – Aaron Meese May 13 '23 at 13:57
0

change your Style.js to .ts and also type your exported FooterWrapper:

export const FooterWrapper: ReactNode // or JSX.Element
NoNam4
  • 786
  • 4
  • 15