Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Fetching Data with the Fetch API

Robert Ungar
Robert Ungar
15,723 Points
Posted by Robert Ungar
Robert Ungar
15,723 Points

Project files are broken

I've downloaded the project files, navigated into the first folder and run npm install. After installing all of the packages and trying to run the server, it immediately crashes with the following message:

'(node:14908) UnhandledPromiseRejectionWarning: Unhandled promise rejection (rejection id: 2): TypeError: "listener" argument must be a function (node:14908) DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.'

Please update the project files.

Jere Green
Jere Green
1,029 Points

I tried the downloaded code and it ran fine. It runs but doesn't do the actual loading of images because that's what we'll fill in as we take the course.

You might start over with a clean directory and npm install.

It would help to specify more detail about what directory and files you were actually trying to run, since the zip file contains many projects and each seems to have an initial and final state.

I ran both gif-search and gif-search_final below: The screenshot is from gif-search (the incomplete starting project).

The gif-search_final didn't display any images for me but I noticed that it seemed to load data using the giphy API. In looking over the code for this final version, it doesn't seem to have any code to actually load the retrieved images into the React components. It just uses a console.log to show that it retrieved the data. It looks like later versions of the projects fill in these capabilities.

~/dev.trn/treehouse/data-fetching-in-react $ ls data-fetching-react/
1-fetching-data-with-fetch-api  3-displaying-the-data        5-displaying-the-search-results  ReadMe.txt
2-fetching-data-with-axios      4-building-a-search-feature  gif-search_no-create-react-app
jg1@Squidward ~/dev.trn/treehouse/data-fetching-in-react $ ls data-fetching-react/1-fetching-data-with-fetch-api/
gif-search  gif-search_final
~/dev.trn/treehouse/data-fetching-in-react $

I'm running Node v8.2.1 and Chrome 60

I only have two eslint warnings as viewable in the console in the screenshot.

Project gif-search_no-create-react-app from data-fetching-react.zip

It looks like it hasn't been updated recently, so it doesn't appear that they fixed it in the short period since you asked the question.

~/dev.trn/treehouse/data-fetching-in-react/data-fetching-react $ find gif-search_no-create-react-app/ -type f -ls
1146436   28 -rw-r--r--   1 jg1      jg1         24838 Jan  4  2017 gif-search_no-create-react-app/public/favicon.ico
1146438    4 -rw-r--r--   1 jg1      jg1           436 Jan 10  2017 gif-search_no-create-react-app/public/index.html
1146452    4 -rw-r--r--   1 jg1      jg1           189 Jan 13  2017 gif-search_no-create-react-app/src/Components/GifList.js
1146454    4 -rw-r--r--   1 jg1      jg1           237 Jan 10  2017 gif-search_no-create-react-app/src/Components/NoGifs.js
1146456    4 -rw-r--r--   1 jg1      jg1           777 Jan 12  2017 gif-search_no-create-react-app/src/Components/SearchForm.js
1146450    4 -rw-r--r--   1 jg1      jg1           128 Jan 12  2017 gif-search_no-create-react-app/src/Components/Gif.js
1146446    4 -rw-r--r--   1 jg1      jg1          2940 Jan 12  2017 gif-search_no-create-react-app/src/App.css
1146448    4 -rw-r--r--   1 jg1      jg1           581 Jan 12  2017 gif-search_no-create-react-app/src/App.js
1146458    4 -rw-r--r--   1 jg1      jg1           152 Jan  4  2017 gif-search_no-create-react-app/src/index.js
1146434    4 -rw-r--r--   1 jg1      jg1          2446 Jan 16  2017 gif-search_no-create-react-app/package.json
1146430   12 -rw-r--r--   1 jg1      jg1          8807 Jan 16  2017 gif-search_no-create-react-app/config/webpack.config.dev.js
1146424    4 -rw-r--r--   1 jg1      jg1           301 Jan 16  2017 gif-search_no-create-react-app/config/jest/fileTransform.js
1146422    4 -rw-r--r--   1 jg1      jg1           323 Jan 16  2017 gif-search_no-create-react-app/config/jest/cssTransform.js
1146420    4 -rw-r--r--   1 jg1      jg1          1102 Jan 16  2017 gif-search_no-create-react-app/config/env.js
1146416    8 -rw-r--r--   1 jg1      jg1          6148 Jan 17  2017 gif-search_no-create-react-app/config/.DS_Store
1146426    4 -rw-r--r--   1 jg1      jg1          1787 Jan 16  2017 gif-search_no-create-react-app/config/paths.js
1146428    4 -rw-r--r--   1 jg1      jg1           613 Jan 16  2017 gif-search_no-create-react-app/config/polyfills.js
1146432   12 -rw-r--r--   1 jg1      jg1          9578 Jan 16  2017 gif-search_no-create-react-app/config/webpack.config.prod.js
1146444    4 -rw-r--r--   1 jg1      jg1           994 Jan 16  2017 gif-search_no-create-react-app/scripts/test.js
1146442   16 -rw-r--r--   1 jg1      jg1         12756 Jan 16  2017 gif-search_no-create-react-app/scripts/start.js
1146440   12 -rw-r--r--   1 jg1      jg1          8592 Jan 16  2017 gif-search_no-create-react-app/scripts/build.js
~/dev.trn/treehouse/data-fetching-in-react/data-fetching-react $

It makes it much easier to read the technical details if they are formatted nicely. I'd recommend doing a google search like: Some links to pages about how to nicely format Treehouse Community posts.

An external search engine seems necessary because apparently the built-in Treehouse Community search really sucks.