M1#A36 - Cannot read properties of undefined

[marisbispo]

Boa tarde, @fdaciuk! Tudo bom?

Meu codigo está dando erro no 'Repos.propTypes'. O que eu fiz de errado?

Segue o codigo que usei:

import React from 'react'

const Repos = ({className, title, repos}) =>(
    <div className={className}>
      <h2>{title}</h2>
      <ul>
          {repos.map((repo, index) => (
            <li key={index}>
                <a href={repo.link}>{repo.name}</a>
            </li>
          ))}
      </ul>
    </div>
)

Repos.defaultProps = {
    className: ''
}

Repos.propTypes = {
    className: React.PropTypes.string,
    title: React.PropTypes.string.isRequired,
    repos: React.PropTypes.array  
}

export default Repos

O erro:

Obrigada!

@fdaciuk

[fdaciuk]

Oi @marisbispo! Qual versão do React você está usando? Se estiver usando uma versão maior que a 15.4, você precisa instalar separado o pacote prop-types, pois ele foi movido do pacote principal do React =)

[marisbispo]

Estou usando a 17.0.2, @fdaciuk

[fdaciuk]

Então é só instalar o prop-types:

npm install prop-types

E usar à partir desse pacote:

import PropTypes from 'prop-types'

:)

[marisbispo]

@fdaciuk, quando eu faço isso aparece:

PS C:\Users\JANIO\Desktop\react-ninja\ceep> npm install prop-types

up to date, audited 1979 packages in 11s

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

11 vulnerabilities (10 moderate, 1 high)

To address issues that do not require attention, run:   
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

Run `npm audit` for details.

ai quando eu coloco npm audit para mais detalhes, aparece:

PS C:\Users\JANIO\Desktop\react-ninja\ceep> npm audit
# npm audit report

browserslist  4.0.0 - 4.16.4
Severity: moderate
Regular Expression Denial of Service - https://npmjs.com/advisories/1747
fix available via `npm audit fix --force`
Will install react-scripts@1.1.5, which is a breaking change
node_modules/react-dev-utils/node_modules/browserslist
  react-dev-utils  6.0.0-next.fb6e6f70 - 12.0.0-next.37
  Depends on vulnerable versions of browserslist
  node_modules/react-dev-utils
    react-scripts  0.10.0-alpha.328cb32e - 5.0.0-next.37
    Depends on vulnerable versions of @pmmmwh/react-refresh-webpack-plugin
    Depends on vulnerable versions of react-dev-utils
    Depends on vulnerable versions of webpack
    Depends on vulnerable versions of webpack-dev-server
    node_modules/react-scripts

glob-parent  <5.1.2
Severity: moderate
Regular expression denial of service - https://npmjs.com/advisories/1751
fix available via `npm audit fix --force`
Will install react-scripts@1.1.5, which is a breaking change
node_modules/watchpack-chokidar2/node_modules/glob-parent
node_modules/webpack-dev-server/node_modules/glob-parent
  chokidar  1.0.0-rc1 - 2.1.8
  Depends on vulnerable versions of glob-parent
  node_modules/watchpack-chokidar2/node_modules/chokidar
  node_modules/webpack-dev-server/node_modules/chokidar
    watchpack-chokidar2  *
    Depends on vulnerable versions of chokidar
    node_modules/watchpack-chokidar2
      watchpack  1.7.2 - 1.7.5
      Depends on vulnerable versions of watchpack-chokidar2
      node_modules/watchpack
        webpack  4.44.0 - 4.46.0
        Depends on vulnerable versions of watchpack
        node_modules/webpack
          react-scripts  0.10.0-alpha.328cb32e - 5.0.0-next.37
          Depends on vulnerable versions of @pmmmwh/react-refresh-webpack-plugin
          Depends on vulnerable versions of react-dev-utils
          Depends on vulnerable versions of webpack
          Depends on vulnerable versions of webpack-dev-server
          node_modules/react-scripts
    webpack-dev-server  2.1.0-beta.9 - 3.11.2
    Depends on vulnerable versions of chokidar
    node_modules/webpack-dev-server
      @pmmmwh/react-refresh-webpack-plugin  0.3.1 - 0.5.0-beta.0
      Depends on vulnerable versions of webpack-dev-server
      node_modules/@pmmmwh/react-refresh-webpack-plugin

tar  <=4.4.17 || 5.0.0 - 5.0.9 || 6.0.0 - 6.1.8
Severity: high
Arbitrary File Creation/Overwrite via insufficient symlink protection due to directory cache poisoning using symbolic links - https://npmjs.com/advisories/1780
fix available via `npm audit fix`
node_modules/tar

11 vulnerabilities (10 moderate, 1 high)

To address issues that do not require attention, run:
  npm audit fix

To address all issues (including breaking changes), run:
  npm audit fix --force

O que eu deveria fazer nesse caso?

[fdaciuk]

Oi @marisbispo! Pode ignorar as mensagens do NPM.. faltou colocar um --save ali no comando que eu passei, pra salvar essa dependência no seu package.json.. então você pode executar novamente o comando:

npm install --save prop-types

[marisbispo]

Oi, @fdaciuk! continua dando erro :(

veja:

PS C:\Users\JANIO\Desktop\react-ninja\ceep> npm install --save prop-types

up to date, audited 1979 packages in 27s

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

78 vulnerabilities (16 moderate, 38 high, 24 critical)

To address issues that do not require attention, run:
  npm audit fix

To address all issues possible (including breaking changes), run:
  npm audit fix --force

Some issues need review, and may require choosing
a different dependency.

Run `npm audit` for details.

[fdaciuk]

Mas aparece alguma mensagem com ERROR ou algo assim? Que se for só essa mensagem que aparece, pode ignorar =) Confira se no seu package.json o prop-types aparece corretamente, e tente subir o seu servidor de desenvolvimento.

Se subir certinho, quer dizer que deu certo ;)

[marisbispo]

@fdaciuk, aparece assim:

"devDependencies": {
    "create-react-class": "^15.7.0",
    "prop-types": "^15.7.2"
  }

mas continua dando erro!

Esse pacote:

import PropTypes from 'prop-types'

é melhor passar dentro do App.js ou do repos.js?

[fdaciuk]

Oi @marisbispo! Você vai importar o prop-types onde você for usar ele.. no caso, ao invés de usar o React.PropTypes, você vai usar o PropTypes importado :)

[marisbispo]

@fdaciuk, funcionou! MUITO obrigada! Só mais uma dúvida: Seria melhor usar versões anteriores do react?

[fdaciuk]

Não, pode seguir com essa sem problemas! Eu só peço pra seguir com as versões mostradas no curso pra você conseguir acompanhar tudo exatamente do jeito que eu mostro.. mas não vai ter mais nada muito diferente daqui pra frente, pode seguir com a v17 sem problemas :)

[marisbispo]

Muito obrigada!

[fdaciuk]

Qualquer dúvida, só avisar :D