Entrar Ainda não tem acesso?
1
resposta

Está dando erro depois que instalei o styled-components

Referente ao curso React: estilize componentes com Styled Components e manipule arquivos estáticos

por Joice da Rosa Araujo
| 157.5k xp | 16 posts

Eu instalei o styled-components e executei o comando npm run dev e apareceu um erro enorme na frente da página e no terminal quando abro seguinte código:

19:37:03 [vite] Internal server error: Failed to resolve import "./App.css" from "src\App.jsx". Does the file exist? Plugin: vite:import-analysis File: C:/Users/Winchester/space-app/src/App.jsx:1:18 15 | window.$RefreshSig$ = RefreshRuntime.createSignatureFunctionForTransform; 16 | } 17 | import "./App.css"; | ^ 18 | function App() { 19 | return /* @PURE */ jsxDEV(Fragment, {}, void 0, false, { at formatError (file:///C:/Users/Winchester/space-app/node_modules/vite/dist/node/chunks/dep-df561101.js:43993:46) at TransformContext.error (file:///C:/Users/Winchester/space-app/node_modules/vite/dist/node/chunks/dep-df561101.js:43989:19) at normalizeUrl (file:///C:/Users/Winchester/space-app/node_modules/vite/dist/node/chunks/dep-df561101.js:41801:33) at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async file:///C:/Users/Winchester/space-app/node_modules/vite/dist/node/chunks/dep-df561101.js:41945:47 at async Promise.all (index 3) at async TransformContext.transform (file:///C:/Users/Winchester/space-app/node_modules/vite/dist/node/chunks/dep-df561101.js:41870:13) at async Object.transform (file:///C:/Users/Winchester/space-app/node_modules/vite/dist/node/chunks/dep-df561101.js:44283:30) at async loadAndTransform (file:///C:/Users/Winchester/space-app/node_modules/vite/dist/node/chunks/dep-df561101.js:54950:29) Failed to resolve import "./App.css" from "src\App.jsx". Does the file exist?

1 resposta
por Renan Lima
| 3636.1k xp | 7664 posts
Alura Scuba Team Apoio Educacional - Alura

Olá, Joice!

Pelo que pude entender, o erro que você está enfrentando está relacionado à importação do arquivo "./App.css" no seu arquivo "App.jsx". O erro diz: "Failed to resolve import "./App.css" from "src\App.jsx". Does the file exist?" (Falha ao resolver a importação "./App.css" de "src\App.jsx". O arquivo existe?).

Isso significa que o compilador não está conseguindo encontrar o arquivo "App.css" no caminho especificado. Aqui estão algumas coisas que você pode verificar:

  1. Verifique se o arquivo "App.css" existe realmente no mesmo diretório que o arquivo "App.jsx". Se não estiver, você precisará mover o arquivo para o local correto ou alterar o caminho na importação para refletir a localização atual do arquivo "App.css".

  2. Se o arquivo "App.css" existir e estiver no local correto, pode ser um problema de case sensitivity. Certifique-se de que o nome do arquivo e o caminho na importação correspondem exatamente, incluindo letras maiúsculas e minúsculas.

  3. Às vezes, o cache pode causar problemas. Tente limpar o cache do seu projeto rodando o comando npm cache clean --force no terminal e depois tente rodar o projeto novamente com npm run dev.

Por exemplo, se o seu arquivo "App.css" estiver na pasta "styles", você precisará alterar a importação para import "./styles/App.css";.

Espero ter ajudado e bons estudos!