Solucionado (ver solução)
Solucionado
(ver solução)
7
respostas

erro no stiled-components por conta da versão antiga do react usado no curso! E solução para o erro no meu caso!:

Antes de instalar o estiled-components o projeto estava rodando numa boa. o problema ocorre depois de instalr ele. não roda mais. Não sei se vocês tiveram esse problema. Vou por hora tentar trocar o projeto pro vit ou outra forma. mas o erro encontrado é o seguinte.

1 parte da instalção do component:

webpack compiled successfully
PS D:\Alura-2025\front_end_react\alura_books> 
PS D:\Alura-2025\front_end_react\alura_books> npm install styled-components

added 12 packages, and audited 1382 packages in 3s

274 packages are looking for funding
  run `npm fund` for details

8 vulnerabilities (2 moderate, 6 high)

depois de usar o comando mensionado:

Run `npm audit` for details.
PS D:\Alura-2025\front_end_react\alura_books> npm audit fix --force
npm warn using --force Recommended protections disabled.
npm warn audit Updating react-scripts to 3.0.1, which is a SemVer major change.
npm warn deprecated @babel/plugin-proposal-optional-catch-binding@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-catch-binding instead.
npm warn deprecated @babel/plugin-proposal-unicode-property-regex@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-unicode-property-regex instead.
npm warn deprecated @babel/plugin-proposal-json-strings@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-json-strings instead.
npm warn deprecated @babel/plugin-proposal-dynamic-import@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-dynamic-import instead.
npm warn deprecated rimraf@2.7.1: Rimraf versions prior to v4 are no longer supported
npm warn deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm warn deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm warn deprecated @babel/plugin-proposal-object-rest-spread@7.20.7: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-object-rest-spread instead.
npm warn deprecated @hapi/bourne@1.3.2: This version has been deprecated and is no longer supported or maintained
npm warn deprecated @hapi/topo@3.1.6: This version has been deprecated and is no longer supported or maintained
npm warn deprecated @babel/plugin-proposal-async-generator-functions@7.20.7: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-async-generator-functions instead.
npm warn deprecated domexception@1.0.1: Use your platform's native DOMException instead
npm warn deprecated move-concurrently@1.0.1: This package is no longer supported.
npm warn deprecated figgy-pudding@3.5.2: This module is no longer supported.

npm warn deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm warn deprecated har-validator@5.1.5: this library is no longer supported
npm warn deprecated eslint-loader@2.1.2: This loader has been deprecated. Please use eslint-webpack-plugin
npm warn deprecated acorn-dynamic-import@4.0.0: This is probably built in to whatever tool you're using. If you still need it... idk
npm warn deprecated rimraf@2.6.3: Rimraf versions prior to v4 are no longer supported
npm warn deprecated @babel/plugin-proposal-nullish-coalescing-operator@7.8.3: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-nullish-coalescing-operator instead.
npm warn deprecated @babel/plugin-proposal-numeric-separator@7.8.3: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-numeric-separator instead.
npm warn deprecated @babel/plugin-proposal-optional-chaining@7.9.0: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-chaining instead.
npm warn deprecated @babel/plugin-proposal-class-properties@7.8.3: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead.
npm warn deprecated left-pad@1.3.0: use String.prototype.padStart()
npm warn deprecated fs-write-stream-atomic@1.0.10: This package is no longer supported.
7 respostas
npm warn deprecated babel-eslint@10.0.1: babel-eslint is now @babel/eslint-parser. This package will no longer receive updates.
npm warn deprecated html-webpack-plugin@4.0.0-beta.5: please switch to a stable version
npm warn deprecated request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
npm warn deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm warn deprecated @hapi/hoek@8.5.1: This version has been deprecated and is no longer supported or maintained
npm warn deprecated @hapi/joi@15.1.1: Switch to 'npm install joi'
npm warn deprecated eslint@5.16.0: This version is no longer supported. Please see https://eslint.org/version-support for other options.
npm warn deprecated core-js@2.6.12: core-js@<3.23.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Some versions have web compatibility issues. Please, upgrade your dependencies to the actual version of core-js.

added 954 packages, removed 381 packages, changed 375 packages, and audited 1955 packages in 1m

137 packages are looking for funding
  run `npm fund` for details

# npm audit report

ansi-html  <0.0.8
Severity: high
Uncontrolled Resource Consumption in ansi-html - https://github.com/advisories/GHSA-whgm-jr23-g3j9
fix available via `npm audit fix --force`
Will install react-scripts@5.0.1, which is a breaking change
node_modules/ansi-html
  webpack-dev-server  <=4.7.4
  Depends on vulnerable versions of ansi-html
  Depends on vulnerable versions of bonjour
  Depends on vulnerable versions of chokidar
  Depends on vulnerable versions of http-proxy-middleware
  Depends on vulnerable versions of ip
  Depends on vulnerable versions of selfsigned
  Depends on vulnerable versions of sockjs
  Depends on vulnerable versions of webpack
  Depends on vulnerable versions of webpack-dev-middleware
  Depends on vulnerable versions of yargs
  node_modules/webpack-dev-server
    react-scripts  >=0.1.0

eu resumi a linhas do fix pois são muitas:

Mas, o erro ao rodar o npm start:

Node.js v22.13.0
PS D:\Alura-2025\front_end_react\alura_books> npm start

> alura_books@0.1.0 start
> react-scripts start
Starting the development server...

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:79:19)
    at Object.createHash (node:crypto:139:10)
    at module.exports (D:\Alura-2025\front_end_react\alura_books\node_modules\webpack\lib\util\createHash.js:90:53)
    at NormalModule._initBuildHash (D:\Alura-2025\front_end_react\alura_books\node_modules\webpack\lib\NormalModule.js:401:16)
    at handleParseError (D:\Alura-2025\front_end_react\alura_books\node_modules\webpack\lib\NormalModule.js:449:10)
    at D:\Alura-2025\front_end_react\alura_books\node_modules\webpack\lib\NormalModule.js:481:5
    at D:\Alura-2025\front_end_react\alura_books\node_modules\webpack\lib\NormalModule.js:342:12
    at D:\Alura-2025\front_end_react\alura_books\node_modules\loader-runner\lib\LoaderRunner.js:373:3
    at iterateNormalLoaders (D:\Alura-2025\front_end_react\alura_books\node_modules\loader-runner\lib\LoaderRunner.js:214:10)
    at iterateNormalLoaders (D:\Alura-2025\front_end_react\alura_books\node_modules\loader-runner\lib\LoaderRunner.js:221:10)
    at D:\Alura-2025\front_end_react\alura_books\node_modules\loader-runner\lib\LoaderRunner.js:236:3
    at runSyncOrAsync (D:\Alura-2025\front_end_react\alura_books\node_modules\loader-runner\lib\LoaderRunner.js:130:11)
    at iterateNormalLoaders (D:\Alura-2025\front_end_react\alura_books\node_modules\loader-runner\lib\LoaderRunner.js:232:2)
    at Array.<anonymous> (D:\Alura-2025\front_end_react\alura_books\node_modules\loader-runner\lib\LoaderRunner.js:205:4)
    at Storage.finished (D:\Alura-2025\front_end_react\alura_books\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:55:16)
    at D:\Alura-2025\front_end_react\alura_books\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:91:9
(node:20244) [DEP0060] DeprecationWarning: The `util._extend` API is deprecated. Please use Object.assign() instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
D:\Alura-2025\front_end_react\alura_books\node_modules\react-scripts\scripts\start.js:19
  throw err;
  ^

Error: error:0308010C:digital envelope routines::unsupported
    at new Hash (node:internal/crypto/hash:79:19)
    at Object.createHash (node:crypto:139:10)
    at module.exports (D:\Alura-2025\front_end_react\alura_books\node_modules\webpack\lib\util\createHash.js:90:53)
    at NormalModule._initBuildHash (D:\Alura-2025\front_end_react\alura_books\node_modules\webpack\lib\NormalModule.js:401:16)
    at D:\Alura-2025\front_end_react\alura_books\node_modules\webpack\lib\NormalModule.js:433:10
    at D:\Alura-2025\front_end_react\alura_books\node_modules\webpack\lib\NormalModule.js:308:13
    at D:\Alura-2025\front_end_react\alura_books\node_modules\loader-runner\lib\LoaderRunner.js:367:11
    at D:\Alura-2025\front_end_react\alura_books\node_modules\loader-runner\lib\LoaderRunner.js:233:18
    at context.callback (D:\Alura-2025\front_end_react\alura_books\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
    at D:\Alura-2025\front_end_react\alura_books\node_modules\babel-loader\lib\index.js:51:103
    at process.processTicksAndRejections (node:internal/process/task_queues:105:5) {
  opensslErrorStack: [
    'error:03000086:digital envelope routines::initialization error',
    'error:0308010C:digital envelope routines::unsupported'
  ],
  library: 'digital envelope routines',
  reason: 'unsupported',
  code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v22.13.0
PS D:\Alura-2025\front_end_react\alura_books> 

Bom, eu sei que pedi ajuda para vocês da alura com o problema, entretanto, eu acabei achando uma solução para o problema usando minha assinatura de IA:

abaixo a solução que eu usei e resolveu meu problema:

está primeira parte se alguém tentar e funcionar ok, mas não funcionou para mim:

O erro que você está enfrentando:

vbnet
Copiar código
Error: error:0308010C:digital envelope routines::unsupported
é comum quando há incompatibilidade entre a versão do Node.js e as dependências do seu projeto, especialmente relacionadas ao Webpack e às rotinas de criptografia do OpenSSL. A partir do Node.js 17, houve mudanças significativas no OpenSSL 3, o que pode causar problemas com versões mais antigas de pacotes que não são totalmente compatíveis.

Aqui estão os passos recomendados para resolver esse problema:

1. Definir a Variável de Ambiente NODE_OPTIONS para Usar o Provedor Legado do OpenSSL
Uma solução rápida é definir a variável de ambiente NODE_OPTIONS para usar o provedor legado do OpenSSL. Isso pode contornar o problema temporariamente.

No PowerShell:

powershell
Copiar código
$env:NODE_OPTIONS="--openssl-legacy-provider"
npm start
Passos Detalhados:

Abra o PowerShell no diretório do seu projeto (D:\Alura-2025\front_end_react\alura_books).

Execute o seguinte comando para definir a variável de ambiente:

powershell
Copiar código
$env:NODE_OPTIONS="--openssl-legacy-provider"
Em seguida, inicie o servidor de desenvolvimento:

powershell
Copiar código
npm start

2- Parte funcionou para mim:

O que funcionou para mimno caso em questão;

2. Atualizar Suas Dependências para Versões Compatíveis
É fundamental garantir que todas as dependências do seu projeto estejam atualizadas e compatíveis com a versão do Node.js que você está usando.

Passos:

Atualizar react-scripts e webpack:

Verifique se você está usando a versão mais recente do react-scripts e do webpack. Abra o seu package.json e atualize as versões se necessário.

json
Copiar código
{
  "dependencies": {
    "react-scripts": "^5.0.1",
    "webpack": "^5.0.0"
    // ... outras dependências
  }
}
Reinstalar as Dependências:

Após atualizar o package.json, execute:

powershell
Copiar código
npm install
Verificar e Atualizar Outras Dependências:

Utilize ferramentas como o npm-check-updates para ajudar a identificar e atualizar dependências desatualizadas.

powershell
Copiar código
npm install -g npm-check-updates
ncu -u
npm install

meu package.json ficou da seguinte forma:

{
  "name": "alura_books",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^6.6.3",
    "@testing-library/react": "^16.1.0",
    "@testing-library/user-event": "^14.5.2",
    "alura_books": "file:",
    "cra-template": "1.2.0",
    "react": "^19.0.0",
    "react-dom": "^19.0.0",
    "react-scripts": "^5.0.1",
    "webpack": "^5.97.1",
    "styled-components": "^6.1.14",
    "web-vitals": "^4.2.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"
    ]
  }
}
solução!
Run `npm audit` for details.
PS D:\Alura-2025\front_end_react\alura_books> npm start

> alura_books@0.1.0 start
> react-scripts start

(node:18884) [DEP_WEBPACK_DEV_SERVER_ON_AFTER_SETUP_MIDDLEWARE] DeprecationWarning: 'onAfterSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:18884) [DEP_WEBPACK_DEV_SERVER_ON_BEFORE_SETUP_MIDDLEWARE] DeprecationWarning: 'onBeforeSetupMiddleware' option is deprecated. Please use the 'setupMiddlewares' option.
Starting the development server...
Compiled successfully!

You can now view alura_books in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.0.3:3000

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully

nas duas primeiras vezes que rodei o servidor percebi uma demora de 10s a 5s na terceira vez a página abriu com a renderização de uma vez

assim, se ajudar mais alguém essa é a solução por enquanto!

Obs: por uma questão de teste voltei a rodar o projeto no vscode, pois estava usando no webstore como IDE, ao subir o projeto por algum motivo ele me pediu para trocar a porta 3000 pela 3001 (ps. não sei se tem haver com um servidor de ARK - maquina dedicada que criei neu notebook - que eu tinha condigurado na minha red para acesso de amigos e tem consfigurações específicas de portas, roteador e modem - na máquina, acabei me lembrando desse detalhe do servidor de ARK ascended)

bom mudando a porta para a 3001 o servidor rodou numa boa.... abixo os avisos do servidor:

DETALHE: sou obrigado a mudar a porta para 3001 se não ele não sobe o servidor!!!!!

Compiled successfully!

You can now view alura_books in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.0.3:3000

Note that the development build is not optimized.
Compiled with warnings.

[eslint] 
src\App.js
  Line 3:8:  'styled' is defined but never used  no-unused-vars

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

WARNING in [eslint] 
src\App.js
  Line 3:8:  'styled' is defined but never used  no-unused-vars

webpack compiled with 1 warning
Compiled successfully!

You can now view alura_books in the browser.

  Local:            http://localhost:3001
  On Your Network:  http://192.168.0.3:3001

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully
PS D:\Alura-2025\front_end_react\alura_books> 

WARNING in [eslint] 
src\App.js
  Line 3:8:  'styled' is defined but never used  no-unused-vars

webpack compiled with 1 warning
? Something is already running on port 3000.

Would you like to run the app on another port instead? » (Y/n)
You can now view alura_books in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://192.168.0.3:3000

Note that the development build is not optimized.
Compiled with warnings.

[eslint] 
src\App.js
  Line 3:8:  'styled' is defined but never used  no-unused-vars

Search for the keywords to learn more about each warning.
To ignore, add // eslint-disable-next-line to the line before.

WARNING in [eslint] 
src\App.js
  Line 3:8:  'styled' is defined but never used  no-unused-vars

webpack compiled with 1 warning
Compiled successfully!

You can now view alura_books in the browser.

  Local:            http://localhost:3001
  On Your Network:  http://192.168.0.3:3001

Note that the development build is not optimized.
To create a production build, use npm run build.

webpack compiled successfully