Ravenous Project - not rendering in browser

Get Help React.js
#1

On about step 15 of the first stage of creating the Ravenous app. Flipped over to the React app tab in Firefox and it’s just listing a load of error messages. Can anyone tell me what’s wrong? Seems to be to do with the logo.svg image file not being found by the code but I’ve checked all the paths in App.js and index.js and they seem to be alright. Can anyone help?

Quite frustrating because it feels like this is something I should be able to solve myself but a lot of the React module seems rushed through and I feel like there’s some massive gaps in my knowledge already from things that haven’t been covered, or covered really vaguely. Has anyone else found this?

Error: Cannot find module ‘./logo.svg’

webpackMissingModule

http://localhost:3000/static/js/main.chunk.js:150:45

./src/App/App.js/<

http://localhost:3000/static/js/main.chunk.js:150:130

./src/App/App.js

http://localhost:3000/static/js/main.chunk.js:289:30

webpack_require

/Users/jamesbandenburg/Documents/Codecademy/ravenous/ravenous/webpack/bootstrap:856

  853 |   854 | __webpack_require__.$Refresh$.init();  855 | try {> 856 | 	modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));      | ^  857 | } finally {  858 | 	__webpack_require__.$Refresh$.cleanup(moduleId);  859 | }

fn

/Users/jamesbandenburg/Documents/Codecademy/ravenous/ravenous/webpack/bootstrap:150

  147 | 		);  148 | 		hotCurrentParents = [];  149 | 	}> 150 | 	return __webpack_require__(request);      | ^  151 | };  152 | var ObjectFactory = function ObjectFactory(name) {  153 | 	return {

webpack_require

/Users/jamesbandenburg/Documents/Codecademy/ravenous/ravenous/webpack/bootstrap:856

  853 |   854 | __webpack_require__.$Refresh$.init();  855 | try {> 856 | 	modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));      | ^  857 | } finally {  858 | 	__webpack_require__.$Refresh$.cleanup(moduleId);  859 | }

fn

/Users/jamesbandenburg/Documents/Codecademy/ravenous/ravenous/webpack/bootstrap:150

  147 | 		);  148 | 		hotCurrentParents = [];  149 | 	}> 150 | 	return __webpack_require__(request);      | ^  151 | };  152 | var ObjectFactory = function ObjectFactory(name) {  153 | 	return {

1

http://localhost:3000/static/js/main.chunk.js:626:18

webpack_require

/Users/jamesbandenburg/Documents/Codecademy/ravenous/ravenous/webpack/bootstrap:856

  853 |   854 | __webpack_require__.$Refresh$.init();  855 | try {> 856 | 	modules[moduleId].call(module.exports, module, module.exports, hotCreateRequire(moduleId));      | ^  857 | } finally {  858 | 	__webpack_require__.$Refresh$.cleanup(moduleId);  859 | }

checkDeferredModules

/Users/jamesbandenburg/Documents/Codecademy/ravenous/ravenous/webpack/bootstrap:45

  42 | 	}  43 | 	if(fulfilled) {  44 | 		deferredModules.splice(i--, 1);> 45 | 		result = __webpack_require__(__webpack_require__.s = deferredModule[0]);     | ^  46 | 	}  47 | }  48 |

webpackJsonpCallback

/Users/jamesbandenburg/Documents/Codecademy/ravenous/ravenous/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;

(anonymous function)

http://localhost:3000/static/js/main.chunk.js:1:69

#2

The error indicates that the logo is not where you are telling the computer to look for it, so there’s basically two possibilities. Either the path is correct, and the computer is wrong/broken, or the path is not correct. :man_shrugging:

Hint:

Recall in step 8:

Each component should have its own folder inside of components/ . Inside of the components/ directory create a new folder called App .

—> Move App.js and App.css to the App/ folder and update the path in index.js accordingly. <—

Remove App.test.js from the src/ folder, as you will not use it in this project.

Since you moved App.js to another folder the path to logo.svg is changed. You don’t actually need the logo. It’s the React logo. When you get to step 46, you’ll delete the default return method, and write your own. I’m not sure if the instructions also mention deleting this line:

import logo from './logo.svg';

It will need to be removed as well. It’s the cause of your current errors since the relative path is no longer accurate.

1 Like