search

ButterCMS / buttercms-marketing-site-nextjs-react

A CMS powered, SEO Optimized, Marketing Site powered by ButterCMS built on Next.js + React
MIT License
27 stars 16 forks source link

TypeError: Cannot read property 'map' of undefined #8

Closed tanakamapondera closed 4 years ago

tanakamapondera commented 4 years ago

I just cloned the repo down, installed all the dependencies, added the buttercms api key and ran "yarn dev" but the app won't run. I get the following error message:

$ yarn dev yarn run v1.22.0 $ next [ wait ] starting the development server ... [ info ] waiting on http://localhost:3000 ... Warning: Built-in CSS support is being disabled due to custom CSS configuration being detected. See here for more info: https://err.sh/next.js/built-in-css-disabled

Using external babel configuration Location: "C:\Users\TANAKA\Desktop\buttercms-marketing-site-nextjs-react.babe lrc" [ ready ] compiled successfully - ready on http://localhost:3000 [ wait ] compiling ... [ ready ] compiled successfully - ready on http://localhost:3000 [ event ] build page: / [ wait ] compiling ... [ ready ] compiled successfully - ready on http://localhost:3000 Warning: the Container in _app has been deprecated and should be removed. ht tps://err.sh/zeit/next.js/app-container-deprecated TypeError: Cannot read property 'map' of undefined at Footer (C:\Users\TANAKA\Desktop\buttercms-marketing-site-nextjs-react.ne xt\server\static\development\pages\index.js:2525:35)

Has anybody else come across this error? FYI: This is a fresh clone from master branch & I have no changed anything to the code

ghoshnirmalya commented 4 years ago

Step 1: Clone the application using git clone https://github.com/ButterCMS/buttercms-marketing-site-nextjs-react Step 2: Install the dependencies using yarn install Step 3: Create a .env file and add your ButterCMS API key inside it. It should be something like BUTTER_CMS_API_KEY=something Step 4: Start your development server using yarn dev

The application should be up and running on http://localhost:3000/. I followed the same steps and it seemed to worked perfectly fine.

jakelumetta commented 4 years ago

@tanakamapondera please let us know if this works for you

tanakamapondera commented 4 years ago

@ghoshnirmalya @jakelumetta Just tried out your suggestion and I got the following error. Might be something off with by environment, taking a look at it now

butter-error

ghoshnirmalya commented 4 years ago

@tanakamapondera Can you share the data that you're receiving from ButterCMS API? You data object is undefined.

tanakamapondera commented 4 years ago

@ghoshnirmalya Sure but what do you mean by that? Screenshot what I have setup in ButterCMS?

ghoshnirmalya commented 4 years ago

@tanakamapondera By that I mean the data that ButterCMS is sending you when you're doing a request to its server.

tanakamapondera commented 4 years ago

@ghoshnirmalya Using the postman test provided by ButterCMS, I get data back from the server just fine actually. Posts: posts Pages: faqs

I rechecked all my naming conventions and it looks like I had the wrong slug on one of the pages. So the "loading" error is gone but a new "map" error is now showing error 2

ghoshnirmalya commented 4 years ago

@tanakamapondera Can you log this request in your browser through code and send me a screenshot? I understand that Postman is fetching the data. However, I need to understand if the data is getting fetched from the browser or not.

tanakamapondera commented 4 years ago

@ghoshnirmalya My apologies, here are the screenshots: Blog Posts: Screenshot (101)

Page: Screenshot (102)

tanakamapondera commented 4 years ago

@ghoshnirmalya So after a bit of reverse engineering, I finally have my site running locally and data is being pulled in from ButterCMS: home

But I have identified 2 blockers: 1) NextJS does not like the "style.css" file, needs to be properly configured: css

Also, there is an issue with the footer component: error 2

Once I remove those two files, everything compiles successfully though. Did you every come across these errors?

ghoshnirmalya commented 4 years ago

@tanakamapondera

  1. The latest version of Next.js supports CSS out of box. You might need to update the version of Next.js to resolve this issue.

  2. For this issue, I think that navigation_links is coming as undefined from your API

tanakamapondera commented 4 years ago

@ghoshnirmalya Makes sense, 1) has been solved. Lastly, how did you setup navigation_links? Is it possible to get a screenshot of the page setup in Butter? That wasn't covered in the tutorial that I am following: Full CMS with ButterCMS & Next JS

Again, thank you very much for your help!

tanakamapondera commented 4 years ago

@ghoshnirmalya As long as I don't use the footer component, then everything works. I think that's what I'll do for now until I figure out whats wrong

jakelumetta commented 4 years ago

Thanks @ghoshnirmalya ! @tanakamapondera Let me know if you have any other issues / questions. Happy to help.