Erro de compilação: react-router

Leonardo, boa tarde!

Tente alterar a package.json na linha do react-router para:

"react-router": "2.7.0",

E dar um npm install

Espero ter ajudado e bons estudos!

Boa tarde Felipe!

Mudei e retornou:

npm ERR! code EJSONPARSE npm ERR! JSON.parse Failed to parse json npm ERR! JSON.parse Unexpected token : in JSON at position 303 while parsing near '... "file:react-router": "2.7.0", npm ERR! JSON.parse "reac...' npm ERR! JSON.parse Failed to parse package.json data. npm ERR! JSON.parse package.json must be actual JSON, not just JavaScript.

Leonardo, boa tarde!

A versão do react scripts é a 3.0.1 mesmo, o que é necessário alterar é do react-router para 2.7.0, caso o problema continue. faça assim:

npm install react-router@2.7.0 --save;
npm install;

Então Felipe, acho que evoluímos um pouco, aquele erro sumiu mas agora ta assim:

× TypeError: Cannot read property 'func' of undefined ./node_modules/react-router/lib/InternalPropTypes.js node_modules/react-router/lib/InternalPropTypes.js:9 6 | 7 | var _react = require('react'); 8 |

9 | var func = react.PropTypes.func; 10 | var object = react.PropTypes.object; 11 | var arrayOf = _react.PropTypes.arrayOf; 12 | var oneOfType = _react.PropTypes.oneOfType; View compiled _webpackrequire__ /home/leonardo/my-app/webpack/bootstrap:781 778 | }; 779 | 780 | // Execute the module function 781 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); | ^ 782 | 783 | // Flag the module as loaded 784 | module.l = true; View compiled fn /home/leonardo/my-app/webpack/bootstrap:149 146 | ); 147 | hotCurrentParents = []; 148 | } 149 | return webpack_require(request); | ^ 150 | }; 151 | var ObjectFactory = function ObjectFactory(name) { 152 | return { View compiled ./node_modules/react-router/lib/PropTypes.js node_modules/react-router/lib/PropTypes.js:12 webpack_require /home/leonardo/my-app/webpack/bootstrap:781 778 | }; 779 | 780 | // Execute the module function 781 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); | ^ 782 | 783 | // Flag the module as loaded 784 | module.l = true; View compiled fn /home/leonardo/my-app/webpack/bootstrap:149 146 | ); 147 | hotCurrentParents = []; 148 | } 149 | return webpack_require(request); | ^ 150 | }; 151 | var ObjectFactory = function ObjectFactory(name) { 152 | return { View compiled ./node_modules/react-router/lib/index.js node_modules/react-router/lib/index.js:15 webpack_require /home/leonardo/my-app/webpack/bootstrap:781 778 | }; 779 | 780 | // Execute the module function 781 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); | ^ 782 | 783 | // Flag the module as loaded 784 | module.l = true; View compiled fn /home/leonardo/my-app/webpack/bootstrap:149 146 | ); 147 | hotCurrentParents = []; 148 | } 149 | return webpack_require(request); | ^ 150 | }; 151 | var ObjectFactory = function ObjectFactory(name) { 152 | return { View compiled Module../src/App.js

...

http://localhost:3000/static/js/main.chunk.js:379:70 webpack_require /home/leonardo/my-app/webpack/bootstrap:781 778 | }; 779 | 780 | // Execute the module function

781 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); | ^ 782 | 783 | // Flag the module as loaded 784 | module.l = true; View compiled fn /home/leonardo/my-app/webpack/bootstrap:149 146 | ); 147 | hotCurrentParents = []; 148 | } 149 | return webpack_require(request); | ^ 150 | }; 151 | var ObjectFactory = function ObjectFactory(name) { 152 | return { View compiled Module../src/index.js http://localhost:3000/static/js/main.chunk.js:1505:62 webpack_require /home/leonardo/my-app/webpack/bootstrap:781 778 | }; 779 | 780 | // Execute the module function 781 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); | ^ 782 | 783 | // Flag the module as loaded 784 | module.l = true; View compiled fn /home/leonardo/my-app/webpack/bootstrap:149 146 | ); 147 | hotCurrentParents = []; 148 | } 149 | return webpack_require(request); | ^ 150 | }; 151 | var ObjectFactory = function ObjectFactory(name) { 152 | return { View compiled 0 http://localhost:3000/static/js/main.chunk.js:1574:18 webpack_require /home/leonardo/my-app/webpack/bootstrap:781 778 | }; 779 | 780 | // Execute the module function 781 | modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId)); | ^ 782 | 783 | // Flag the module as loaded 784 | module.l = true; View compiled checkDeferredModules /home/leonardo/my-app/webpack/bootstrap:45 42 | } 43 | if(fulfilled) { 44 | deferredModules.splice(i--, 1); 45 | result = webpack_require(webpack_require.s = deferredModule[0]); | ^ 46 | } 47 | } 48 | return result; View compiled Array.webpackJsonpCallback [as push] /home/leonardo/my-app/webpack/bootstrap:32 29 | deferredModules.push.apply(deferredModules, executeModules || []); 30 | 31 | // run deferred modules when all chunks ready 32 | return checkDeferredModules(); | ^ 33 | }; 34 | function checkDeferredModules() { 35 | var result; View compiled (anonymous function) http://localhost:3000/static/js/main.chunk.js:1:57 This screen is visible only in development. It will not appear if the app crashes in production. Open your browser’s developer console to further inspect this error.

Leonardo, boa tarde!

Muito estranho, o que eu vou recomendar é usar o do instrutor:

{
  "name": "cdc-admin",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "react-scripts": "0.3.1"
  },
  "dependencies": {
    "jquery": "^3.1.0",
    "pubsub-js": "^1.5.3",
    "react": "^15.3.1",
    "react-dom": "^15.3.1",
    "react-router": "^2.8.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "./node_modules/react-scripts/config/eslint.js"
}

rodar um: sudo npm install

Voltar o react-router para uma versão de 3 anos atrás é uma solução muito superficial e decepcionante. Pesquisei aqui, essa versão mencionada é de agosto de 2016 (três anos atrás).

Seria interessante a aula de rotas, e outras deste curso, serem refeitas considerando as novas versões do React e React Router.

Sem dar downgrade no Router, o meu ficou assim:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import * as serviceWorker from './serviceWorker';
import {BrowserRouter,Route,Switch} from 'react-router-dom';

import App from './App';
import AutorBox from './Autor';

ReactDOM.render(
    (<BrowserRouter>
        <Route path="/" component={App} />
        <Route path="/autor" component={AutorBox} />
        <Route path="/livro" />
    </BrowserRouter>),
    document.getElementById('root')
);

Ainda não assisti as aulas seguintes então não sei se dá pra seguir o curso de boa fazendo assim. Deve dar.