greglobinski / gatsby-starter-personal-blog

A ready to use, easy to customize, fully equipped GatsbyJS blog starter with 'like app' layout and views transitions.
https://gatsby-starter-personal-blog.greglobinski.com/
MIT License
885 stars 248 forks source link

Unable to get it running #11

Closed johnapaz closed 6 years ago

johnapaz commented 6 years ago

I'm able to get a standard Gatsby site going, but using

gatsby new <sitedirectory> https://github.com/greglobinski/gatsby-starter-personal-blog

Then I get

Something is already running at port 8000 Would you like to run the app at another port instead? [Y/n] Y success delete html and css files from previous builds — 0.007 s success open and validate gatsby-config.js — 0.008 s error UNHANDLED REJECTION Error: Unable to find plugin "gatsby-plugin-sharp"

Never allows me to deploy the site locally. I get all sorts of npm errors instead. And seems to be the problem is installing sharp, with for the life of me I can't figure out why it won't install as instructed.

Anyway, your site looks great! Hope to get to use it one day1

chakrihacker commented 6 years ago

There are some issues with Gatsby-plugin-sharp provide me more details I may help you

ZacharyChim commented 6 years ago

I've also gotten an error running Gatsby Develop:

`error UNHANDLED EXCEPTION

Error: /Users/zacharychim/Documents/zacklive/gatsby/blog/node_modules/gatsby-plugin-svgr/gatsby-node.js: 2 const { plugins, dir, ...svgrOptions } = options; ___^^^ SyntaxError: Unexpected token ...

greglobinski commented 6 years ago

@johnapaz as @chakrihacker wrote there are some issues using Sharp with Gatsby on Windows, but you did not wrote about your system so I do not know if it really relates to your problem. https://www.gatsbyjs.org/docs/gatsby-on-windows/

and what do you mean by

I'm able to get a standard Gatsby site going,

greglobinski commented 6 years ago

@ZacharyChim I'm sorry but I can't reproduce the error. Have you updated the gatsby-plugin-svgr after you cloned the starter repo from Github? Which version of the plugin do you use?

ZacharyChim commented 6 years ago

Hi @greglobinski, I didn't update anything. Here is my package.json: "gatsby-plugin-svgr": "^0.2.1",

{ "name": "gatsby-starter-personal-blog", "description": "A Gatsby starter for a personal blog", "author": "Greg Lobinski <greglobinski@gmail.com>", "repository": "https://github.com/greglobinski/gatsby-starter-personal-blog", "version": "1.0.3", "license": "MIT", "scripts": { "develop": "gatsby develop", "develop-host": "gatsby develop --host 192.168.0.112", "build": "gatsby build", "serve": "gatsby serve", "format-output": "prettier src/**/*.{js,jsx}", "format": "prettier --write src/**/*.{js,jsx}", "lint-errors": "eslint src/**/*.{js,jsx} --quiet", "lint": "eslint src/**/*.{js,jsx}", "favIcon16": "sharp -i ./src/images/app-icons/icon.png -o ./static/icons/favicon-16x16.png resize 16", "favIcon32": "sharp -i ./src/images/app-icons/icon.png -o ./static/icons/favicon-32x32.png resize 32", "favIcon96": "sharp -i ./src/images/app-icons/icon.png -o ./static/icons/favicon-96x96.png resize 96", "icon512": "sharp -i ./src/images/app-icons/icon.png -o ./static/icons/icon-512x512.png resize 512", "icon384": "sharp -i ./src/images/app-icons/icon.png -o ./static/icons/icon-384x384.png resize 384", "icon256": "sharp -i ./src/images/app-icons/icon.png -o ./static/icons/icon-256x256.png resize 256", "icon192": "sharp -i ./src/images/app-icons/icon.png -o ./static/icons/icon-192x192.png resize 192", "icon144": "sharp -i ./src/images/app-icons/icon.png -o ./static/icons/icon-144x144.png resize 144", "icon96": "sharp -i ./src/images/app-icons/icon.png -o ./static/icons/icon-96x96.png resize 96", "icon48": "sharp -i ./src/images/app-icons/icon.png -o ./static/icons/icon-48x48.png resize 48", "appleIcon180": "sharp -i ./src/images/app-icons/apple-icon.png -o ./static/icons/apple-icon-180x180.png resize 180", "appleIcon152": "sharp -i ./src/images/app-icons/apple-icon.png -o ./static/icons/apple-icon-152x152.png resize 152", "appleIcon144": "sharp -i ./src/images/app-icons/apple-icon.png -o ./static/icons/apple-icon-144x144.png resize 144", "appleIcon120": "sharp -i ./src/images/app-icons/apple-icon.png -o ./static/icons/apple-icon-120x120.png resize 120", "appleIcon114": "sharp -i ./src/images/app-icons/apple-icon.png -o ./static/icons/apple-icon-114x114.png resize 114", "appleIcon76": "sharp -i ./src/images/app-icons/apple-icon.png -o ./static/icons/apple-icon-76x76.png resize 76", "appleIcon72": "sharp -i ./src/images/app-icons/apple-icon.png -o ./static/icons/apple-icon-72x72.png resize 72", "appleIcon60": "sharp -i ./src/images/app-icons/apple-icon.png -o ./static/icons/apple-icon-60x60.png resize 60", "appleIcon57": "sharp -i ./src/images/app-icons/apple-icon.png -o ./static/icons/apple-icon-57x57.png resize 57", "generate-app-icons": "yarn favIcon16 && yarn favIcon32 && yarn favIcon96 && yarn icon512 && yarn icon384 && yarn icon256 && yarn icon192 && yarn icon144 && yarn icon96 && yarn icon48 && yarn appleIcon180 && yarn appleIcon152 && yarn appleIcon144 && yarn appleIcon120 && yarn appleIcon114 && yarn appleIcon76 && yarn appleIcon72 && yarn appleIcon60 && yarn appleIcon57" }, "devDependencies": { "babel-eslint": "^8.2.1", "babel-plugin-dynamic-import-webpack": "^1.0.2", "babel-plugin-syntax-dynamic-import": "^6.18.0", "dotenv": "^5.0.0", "eslint": "^4.17.0", "eslint-config-google": "^0.9.1", "eslint-config-prettier": "^2.9.0", "eslint-plugin-graphql": "^1.5.0", "eslint-plugin-import": "^2.8.0", "eslint-plugin-jsx-a11y": "^6.0.3", "eslint-plugin-prettier": "^2.5.0", "eslint-plugin-react": "^7.6.1", "gatsby-plugin-svgr": "^0.2.1", "prettier": "^1.10.2", "sharp-cli": "^1.6.0", "webpack-bundle-analyzer": "^2.10.0" }, "dependencies": { "color": "^3.0.0", "gatsby": "1.9.224", "gatsby-image": "^1.0.35", "gatsby-link": "1.6.39", "gatsby-plugin-algolia": "^0.0.3", "gatsby-plugin-catch-links": "^1.0.15", "gatsby-plugin-favicon": "^2.1.1", "gatsby-plugin-feed": "^1.3.18", "gatsby-plugin-google-analytics": "^1.0.13", "gatsby-plugin-jss": "^1.5.9", "gatsby-plugin-manifest": "^1.0.8", "gatsby-plugin-netlify": "^1.0.8", "gatsby-plugin-offline": "^1.0.10", "gatsby-plugin-react-helmet": "^2.0.4", "gatsby-plugin-sharp": "^1.6.27", "gatsby-plugin-sitemap": "^1.2.13", "gatsby-remark-copy-linked-files": "^1.5.26", "gatsby-remark-external-links": "^0.0.4", "gatsby-remark-images": "^1.5.56", "gatsby-remark-prismjs": "^1.2.14", "gatsby-remark-responsive-iframe": "^1.4.16", "gatsby-remark-smartypants": "^1.4.10", "gatsby-source-filesystem": "^1.5.14", "gatsby-transformer-remark": "^1.7.35", "gatsby-transformer-sharp": "^1.6.16", "instantsearch.css": "^7.0.0", "material-ui": "1.0.0-beta.36", "material-ui-icons": "^1.0.0-beta.17", "react-custom-scrollbars": "^4.2.1", "react-disqus-comments": "^1.1.1", "react-facebook": "^4.2.1", "react-headroom": "^2.2.2", "react-helmet": "^5.1.3", "react-instantsearch": "5.0.0", "react-lazyload": "^2.3.0", "react-loadable": "^5.3.1", "react-loadable-visibility": "^2.4.2", "react-material-ui-form-validator": "^2.0.0-beta.4", "react-obfuscate": "^1.3.0", "react-popper": "^0.8.3", "react-redux": "^5.0.6", "react-share": "^2.0.0", "rebound": "^0.1.0", "redux": "^3.7.2", "redux-devtools-extension": "^2.13.2", "screenfull": "^3.3.2" } }

greglobinski commented 6 years ago

@ZacharyChim I've updated all dependencies to the latest versions, maybe it will help.

johnapaz commented 6 years ago

Sorry for taking so long. I'm not getting my Github notifications for some reason.

I'm using OSX.

greglobinski commented 6 years ago

@johnapaz Did you try install/reinstall gatsby-plugin-sharp? And once again what do you mean by

I'm able to get a standard Gatsby site going,

helmutgranda commented 6 years ago

I just wanted to add that I ran the following commands without any issues:

gatsby new <sitedirectory> https://github.com/greglobinski/gatsby-starter-personal-blog cd <sitedirectory> gatsby develop

Mac 10.13.4

greglobinski commented 6 years ago

Thanks @helmutgranda

adjwills commented 6 years ago

I think the problem @ZacharyChim is having is an older version of node. I ran into same issue on first try. Try updating to latest from https://nodejs.org

I also ran into an issue with a missing dependency for the sharp module on first try executing gatsby develop, but after applying npm install sharp in the directory it worked fine.

Thanks @greglobinski for putting this together - interesting to try Gatbsy out

ZacharyChim commented 6 years ago

It works! Thanks, @greglobinski and @adjwills

However, I got a new error on the first screen of my blog:

React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.

Check your code at SocialIcons.js:56.
▼ 3 stack frames were expanded.
(anonymous function)
src/components/InfoBox/SocialIcons.js:56
(anonymous function)
src/components/InfoBox/InfoBox.js:86
(anonymous function)
src/components/InfoBox/InfoBox.js:73
greglobinski commented 6 years ago

@ZacharyChim Are you using the latest version of the starter 1.0.6? If not, use it. I have updated recently gatsby-plugin-svgr and made changes in SocialIcons component.

ZacharyChim commented 6 years ago

@greglobinski It works. Thank you very much.