Search code examples
reactjserror-handling

Error : does not match the corresponding name on disk, REACT

I have this error : ./src/pages/Freelances/index.jsx Cannot find file: 'index.jsx' does not match the corresponding name on disk: '.\src\components\Card\Components'. And I honnestly don't undersatand why.

My code is :

import Card from '../../components/Card'
import styled from 'styled-components'
import colors from '../../utils/style/colors'
import React from 'react'

const CardsContainer = styled.div`
  display: grid;
  gap: 24px;
  grid-template-rows: 350px 350px;
  grid-template-columns: repeat(2, 1fr);
  align-items: center;
  justify-items: center;
`

const PageTitle = styled.h1`
  font-size: 30px;
  color: black;
  text-align: center;
  padding-bottom: 30px;
`

const PageSubtitle = styled.h2`
  font-size: 20px;
  color: ${colors.secondary};
  font-weight: 300;
  text-align: center;
  padding-bottom: 30px;
`

const freelanceProfiles = [
  {
    name: 'Jane Doe',
    jobTitle: 'Devops',
  },
  {
    name: 'John Doe',
    jobTitle: 'Developpeur frontend',
  },
  {
    name: 'Jeanne Biche',
    jobTitle: 'Développeuse Fullstack',
  },
]

function Freelances() {
  return (
    <div>
      <PageTitle>Trouvez votre prestataire</PageTitle>
      <PageSubtitle>
        Chez Shiny nous réunissons les meilleurs profils pour vous.
      </PageSubtitle>
      <CardsContainer>
        {freelanceProfiles.map((profile, index) => (
          <Card
            key={`${profile.name}-${index}`}
            label={profile.jobTitle}
            title={profile.name}
          />
        ))}
      </CardsContainer>
    </div>
  )
}

export default Freelances

And if I take back the import react from react i have this error : ./src/pages/Freelances/index.jsx Line 46: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 47: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 48: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 51: 'React' must be in scope when using JSX react/react-in-jsx-scope Line 53: 'React' must be in scope when using JSX react/react-in-jsx-scope

I just want to use a code that was working in a TP into somthing else. Do you know what caused this error?

Solution

    1. Ensure you have imported React in all the files that have jsx. Like, import React from 'react' It might also be required by your build system that files with jsx have .jsx or .tsx extensions (not just .js / .ts)

    2. Ensure that file names that are referenced in your code are matching actual file names in a filesystem. There could be issues if file names had changes in capitalization. Keeping file names in lowercase might be a good idea to avoid such sort of problems