Curso React: comece seu projeto full stack | React

Bom dia, no curso React: comece seu projeto full stack, na aula 04 Estados no video Como funcionam estados, depois que implementei o código, estão ocorrendo os seguintes erros: Failed to compile.

Module not found: Error: Can't resolve 'styled-component' in 'C:\Users\gustavo\OneDrive\Área de Trabalho\Alura cursos\alura-books-react\src'ERROR in ./src/App.js 6:0-38 Module not found: Error: Can't resolve 'styled-component' in 'C:\Users\gustavo\OneDrive\Área de Trabalho\Alura cursos\alura-books-react\src'

ERROR in ./src/componentes/Header/index.js 7:0-38 Module not found: Error: Can't resolve 'styled-component' in 'C:\Users\gustavo\OneDrive\Área de Trabalho\Alura cursos\alura-books-react\src\componentes\Header'

ERROR in ./src/componentes/IconesHeader/index.js 6:0-39 Module not found: Error: Can't resolve 'styled-components' in 'C:\Users\gustavo\OneDrive\Área de Trabalho\Alura cursos\alura-books-react\src\componentes\IconesHeader'

ERROR in ./src/componentes/Input/index.js 3:0-39 Module not found: Error: Can't resolve 'styled-components' in 'C:\Users\gustavo\OneDrive\Área de Trabalho\Alura cursos\alura-books-react\src\componentes\Input'

ERROR in ./src/componentes/Logo/index.js 5:0-39 Module not found: Error: Can't resolve 'styled-components' in 'C:\Users\gustavo\OneDrive\Área de Trabalho\Alura cursos\alura-books-react\src\componentes\Logo'

ERROR in ./src/componentes/OpcoesHeader/index.js 4:0-39 Module not found: Error: Can't resolve 'styled-components' in 'C:\Users\gustavo\OneDrive\Área de Trabalho\Alura cursos\alura-books-react\src\componentes\OpcoesHeader'

ERROR in ./src/componentes/Pesquisa/index.js 6:0-39 Module not found: Error: Can't resolve 'styled-components' in 'C:\Users\gustavo\OneDrive\Área de Trabalho\Alura cursos\alura-books-react\src\componentes\Pesquisa'

ERROR in ./src/index.js 8:0-54 Module not found: Error: Can't resolve 'styled-components' in 'C:\Users\gustavo\OneDrive\Área de Trabalho\Alura cursos\alura-books-react\src'

webpack compiled with 8 errors

Meu arquivo package.json estáda seguinte forma:

{ "name": "alura-books-react", "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-component": "^2.8.0", "web-vitals": "^2.1.4", "@babel/plugin-proposal-private-property-in-object": "^7.0.0" }, "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" ] } }

Alguém pode me ajudar?

Obrigado.

Oi Gustavo, tudo bem?

Pelo que você descreveu, parece que o problema está na forma como você está tentando importar a biblioteca 'styled-components'. No seu arquivo package.json, você a nomeou como 'styled-component', mas o nome correto é 'styled-components' (no plural).

Portanto, o primeiro passo é corrigir o nome da biblioteca no seu package.json. Para isso, você pode abrir o terminal na pasta do seu projeto e executar o seguinte comando:

npm uninstall styled-component
npm install styled-components

Isso irá remover a biblioteca 'styled-component' e instalar a 'styled-components' corretamente.

Depois disso, você precisa verificar se está importando a biblioteca corretamente nos seus arquivos .js. A forma correta de importar a biblioteca 'styled-components' é:

import styled from 'styled-components';

Se você estiver importando como 'styled-component', você deve corrigir para 'styled-components'.

Um abraço e bons estudos.