Çözüldü React.js styled-components çalışmıyor

Yeniçocuk · 7 Eylül 2023

Merhaba. React.js başladım. Styled-components indirdim. Export ve import ettiğim halde hata veriyor. Nasıl çözebilirim? Tayfun Erbilen videosundan bakarak yazdım.

Components.js

JavaScript:

// Components.js

import styled from "styled-components";

 export const Title = styled.h1`
  font-size: 3rem;
  font-weight: 600;
  text-decoration: underline;
`;

App.js

JavaScript:

// App.js

import {Title} from "./components";

function App() {
  return (
    <div>
      <Title>Hello World, this is my first styled component!</Title>
    </div>
  );
}

export default App;

Nullo · 7 Eylül 2023

Ne hatası veriyor?

Yeniçocuk · 7 Eylül 2023

Nullo dedi:
Ne hatası veriyor?

Ekranda hiçbir şey gözükmüyor ve Chrome konsolda bu hata veriyor.

react.development.js:207 warning: Invalid hook call. Hooks can only be called Inside of the body of a function component. This could happen for One of the following reasons:
1. you might have mismatching versions of React and the renderer (such as React dom)
2. you might be breaking the rules of hooks.
3. you might have more than One copy of React'in the same App.
See Rules of Hooks – React for tips about how to Debug and fix this problem.

Nullo · 7 Eylül 2023

Hatanın attığın kodlardan olduğuna emin misin? Hook yazdığın bir yer var mı?

Yeniçocuk · 7 Eylül 2023

Nullo dedi:
Hatanın attığın kodlardan olduğuna emin misin? Hook yazdığın bir yer var mı?

Component kullanınca oldu. Ondan başka hiçbir şekilde bir şey yazmadım.

Kxaan · 7 Eylül 2023

package.json dosyasını paylaşabilir misiniz?

Yeniçocuk · 7 Eylül 2023

Sorunu projeyi silip tekrar kurunca düzeldi.

Kxaan dedi:
package.json dosyasını paylaşabilir misiniz?

Sorun çözüldü ama yine de atayım.

JSON:

{
  "name": "hello-world",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "styled-components": "^6.0.7",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Kxaan · 11 Eylül 2023

Yeniçocuk dedi:

Sorunu projeyi silip tekrar kurunca düzeldi.

Sorun çözüldü ama yine de atayım.

JSON:

{
  "name": "hello-world",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "styled-components": "^6.0.7",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Proje oluşturmak için create-react-app kullanıyorsunuz sanırım. Vite kullanmanızı öneririm.

Bash:

npm create vite@latest my-react-app -- --template react-swc

Yeniçocuk · 12 Eylül 2023

Kxaan dedi:
Proje oluşturmak için create-react-app kullanıyorsunuz sanırım. Vite kullanmanızı öneririm.

Bash:

npm create vite@latest my-react-app -- --template react-swc

Evet create-react-app kullanıyorum. Dikkate aldım bunu. Yine aynı şekilde React kodlarını yazabileceğim öyle değil mi?

Kxaan · 12 Eylül 2023

Yeniçocuk dedi:
Evet create-react-app kullanıyorum. Dikkate aldım bunu. Yine aynı şekilde React kodlarını yazabileceğim öyle değil mi?

Tabii ki.

Çözüldü React.js styled-components çalışmıyor

Ayrıntılı düzenleme

Yeniçocuk

Kilopat

Yeniçocuk

Nullo

Kilopat

Yeniçocuk

Kilopat

Nullo

Kilopat

Yeniçocuk

Kilopat

Kxaan

Kilopat

Yeniçocuk

Kilopat

Kxaan

Kilopat

Yeniçocuk

Kilopat

Kxaan

Kilopat

Benzer konular

Yeni konular

Yeni mesajlar

Gizliliğinize önem veriyoruz