I can't make it run locally following the readme guide.

[dassiorleando]

Hi @styxlab,
Thank you for this sample that merges NextJS and Ghost.

I just tried it but I couldn't succeed in making it work, I have cloned the repo, defined the env variables and hit yarn then yarn dev.

Here's the output: TypeError: sizes.matchAll(...) is not a function or its return value is not iterable

I'm attaching the full error log from the console:

TypeError: sizes.matchAll(...) is not a function or its return value is not iterable at getWidths (webpack-internal:///./node_modules/next/dist/client/image.js:45:36) at generateImgAttrs (webpack-internal:///./node_modules/next/dist/client/image.js:105:7) at Image (webpack-internal:///./node_modules/next/dist/client/image.js:355:169) at processChild (/projet/node_modules/react-dom/cjs/react-dom-server.node.development.js:3353:14) at resolve (/projet/node_modules/react-dom/cjs/react-dom-server.node.development.js:3270:5) at ReactDOMServerRenderer.render (/projet/node_modules/react-dom/cjs/react-dom-server.node.development.js:3753:22) at ReactDOMServerRenderer.read (/projet/node_modules/react-dom/cjs/react-dom-server.node.development.js:3690:29) at renderToString (/projet/node_modules/react-dom/cjs/react-dom-server.node.development.js:4298:27) at Object.renderPage (/projet/node_modules/next/dist/next-server/server/render.js:54:854) at Function.getInitialProps (webpack-internal:///./node_modules/next/dist/pages/_document.js:128:19) at Function.getInitialProps (webpack-internal:///./pages/_document.tsx:26:24) at loadGetInitialProps (/projet/node_modules/next/dist/next-server/lib/utils.js:5:101) at renderToHTML (/projet/node_modules/next/dist/next-server/server/render.js:54:1145) at process._tickCallback (internal/process/next_tick.js:68:7)

Thanks in advance for your reply.

[styxlab]

@dassiorleando: Welcome to this project! It looks like some issue with custom images that you are using.

Could you please start out even simpler, by not changing the env variables (in this case the example project is generated):

1. clone repo
2. yarn
3. yarn dev

Let's see if that works and we'll take it from there.

[dassiorleando]

@styxlab, I had the same error but once switched to Node 12.16.1 it worked fine.

[styxlab]

Interesting, what node version were you using before?

[dassiorleando]

@styxlab I was using NodeJS v10.19.0.

But still, my own Ghost installation that runs on Heroku using ghost-on-heroku doesn't work.

[styxlab]

Node requirement comes from Next.js and should be v10.13.0 at the minimum, but using node v12 (or better v14) is recommended. If I understand you correctly, the example project is now working, but when you source your own content, the project is not compiling? For further debugging I need:

1. A list of exact config changes that you made
2. The error log from yarn build

[dassiorleando]

It's strange and maybe a local problem, I'm not sure yet.
I have just succeeded in deploying my Ghost on Heroku deployment using Vercel, they use Node 14.

I'm now using Node14 on my PC, but yarn dev doesn't work while yarn build compiles successfully.

The yarn dev error that I have is on the App itself, using Chrome Inspector tool (debugger) I'm able to see this:

Failed to load resource: the server responded with a status of 404 (Not Found)
webpack.js?ts=1621773317918:733 Uncaught (in promise) ChunkLoadError: Loading chunk node_modules_next_dist_client_dev_noop_js failed.
(error: http://localhost:3000/_next/static/chunks/fallback/node_modules_next_dist_client_dev_noop_js.js)
at Object.webpack_require.f.j (http://localhost:3000/_next/static/chunks/webpack.js?ts=1621773317918:733:29)
at http://localhost:3000/_next/static/chunks/webpack.js?ts=1621773317918:154:40
at Array.reduce ()
at Function.webpack_require.e (http://localhost:3000/_next/static/chunks/webpack.js?ts=1621773317918:153:67)
at Function.fn.e (http://localhost:3000/_next/static/chunks/webpack.js?ts=1621773317918:368:50)
at eval (webpack-internal:///./node_modules/next/dist/client/next-dev.js:31:21)
at Object../node_modules/next/dist/client/next-dev.js (http://localhost:3000/_next/static/chunks/main.js?ts=1621773317918:589:1)
at Object.options.factory (http://localhost:3000/_next/static/chunks/webpack.js?ts=1621773317918:685:31)
at webpack_require (http://localhost:3000/_next/static/chunks/webpack.js?ts=1621773317918:37:33)
at webpack_exec (http://localhost:3000/_next/static/chunks/main.js?ts=1621773317918:1335:61)
hot-dev-client.js?eeae:196

[dassiorleando]

I have found a solution, I'm not sure about what's happening behind but once deleted the .next folder it worked fine.

[styxlab]

Glad you found a solution.

[dassiorleando]

@styxlab Thank you for your assistance with this, you helped me clearing some of my doubts.