Error on first try

[claudiu-cristea]

I remember I tried this project 1 year ago and it was very easy to setup following the "Getting started" section. I'm now trying again to start from zero, but I'm facing this error accessing the site:

Error: Failed to fetch JSON:API index at http://localhost:8080/ag-ng/web/jsonapi - fetch failed

• Drupal installed at http://localhost:8080/ag-ng/web
• NEXT_PUBLIC_DRUPAL_BASE_URL=http://localhost:8080/ag-ng/web
• NEXT_IMAGE_DOMAIN=localhost
• DRUPAL_REVALIDATE_SECRET=secret

[shadcn]

Are you using Lando?

[claudiu-cristea]

No, just running locally on Mac. But I remember 1 year ago or so there were some better docs on how to configure the auth (how Next interacts with Drupal). Maybe I'm missing something

[RobinHoutevelts]

I'm having the same issue when following the umami-demo guide. Not using Lando.

NEXT_PUBLIC_DRUPAL_BASE_URL=https://next_drupal.dev.kzen.pro
NEXT_IMAGE_DOMAIN=next_drupal.dev.kzen.pro
DRUPAL_PREVIEW_SECRET=secret
NEXTAUTH_SECRET=zdauNuBL7lLAHT9zIpxExCThVHSSOfIwouGOhr5cjWQ
NEXTAUTH_URL=http://localhost:3000
DRUPAL_CLIENT_ID=7fb61dd2-b623-4713-b3c4-b487089cd71e
DRUPAL_CLIENT_SECRET=weDKc7PD845kq49JfPeYmsZ48eunder

From the docs it is unclear to me where the NEXTAUTH_SECRET value comes from.

"fetch failed" in the error message isn't telling me much either about what went wrong.

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Loaded env from /Users/robin/Projects/next-drupal/nextjs/.env.local
event - compiled client and server successfully in 263 ms (316 modules)
wait  - compiling / (client and server)...
event - compiled client and server successfully in 174 ms (542 modules)
error - Error: Failed to fetch JSON:API index at https://next_drupal.dev.kzen.pro/jsonapi - fetch failed
    at /Users/robin/Projects/next-drupal/nextjs/node_modules/next-drupal/dist/index.js:2053:28
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async getStaticProps (webpack-internal:///./pages/index.tsx:105:30)
    at async Object.renderToHTML (/Users/robin/Projects/next-drupal/nextjs/node_modules/next/dist/server/render.js:386:20)
    at async doRender (/Users/robin/Projects/next-drupal/nextjs/node_modules/next/dist/server/base-server.js:687:38)
    at async cacheEntry.responseCache.get.isManualRevalidate.isManualRevalidate (/Users/robin/Projects/next-drupal/nextjs/node_modules/next/dist/server/base-server.js:796:28)
    at async /Users/robin/Projects/next-drupal/nextjs/node_modules/next/dist/server/response-cache/index.js:80:36 {
  page: '/'
}

Edit: I am using a self-signed certificate. Even though it is in my keychain the nextjs (node) server rejects it.

Solved it by running nextjs dev server like this:

NODE_TLS_REJECT_UNAUTHORIZED=0 npm run dev

Now I'm hitting https://github.com/chapter-three/next-drupal/issues/248, but seems to be solveable by reading the comments.

[shadcn]

...there were some better docs on how to configure the auth (how Next interacts with Drupal). Maybe I'm missing something

There's preview mode docs that goes over auth setup. https://next-drupal.org/learn/preview-mode

But it looks like you're seeing a different error. We should be able to read JSON:API without auth.

Can you turn of debug mode and report back the logs?

[claudiu-cristea]

@shadcn, sure. Here's what I got in console:

$ npm run dev

> [email protected] dev
> next dev

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Loaded env from /Users/clau/development/ag-ng/ascent/.env.local
event - compiled client and server successfully in 413 ms (163 modules)
wait  - compiling / (client and server)...
event - compiled client and server successfully in 226 ms (247 modules)
[next-drupal][debug]: Debug mode is on.
[next-drupal][debug]: Using default fetch (polyfilled by Next.js).
(node:61603) ExperimentalWarning: The Fetch API is an experimental feature. This feature could change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
error - Error: Failed to fetch JSON:API index at http://localhost:8080/ag-ng/web/jsonapi - fetch failed
    at /Users/clau/development/ag-ng/ascent/node_modules/next-drupal/dist/index.js:2053:28
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async getStaticProps (webpack-internal:///./pages/index.tsx:97:19)
    at async Object.renderToHTML (/Users/clau/development/ag-ng/ascent/node_modules/next/dist/server/render.js:385:20)
    at async doRender (/Users/clau/development/ag-ng/ascent/node_modules/next/dist/server/base-server.js:720:34)
    at async cacheEntry.responseCache.get.incrementalCache.incrementalCache (/Users/clau/development/ag-ng/ascent/node_modules/next/dist/server/base-server.js:837:28)
    at async /Users/clau/development/ag-ng/ascent/node_modules/next/dist/server/response-cache/index.js:83:36 {
  page: '/'
}
wait  - compiling /_error (client and server)...
event - compiled client and server successfully in 52 ms (248 modules)
wait  - compiling...
event - compiled successfully in 36 ms (31 modules)

[2dareis2do]

I am having same or similar issues. Running without certificate for simplicity.

mainly

error - JsonApiErrors: Not Found
    at /Users/danlobo/Sites/next-example-umami2/node_modules/next-drupal/dist/index.js:2550:19
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:95:5) {
  errors: 'Not Found',
  statusCode: 404,
  page: '/'
}
error - JsonApiErrors: Not Found
    at /Users/danlobo/Sites/next-example-umami2/node_modules/next-drupal/dist/index.js:2550:19
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (internal/process/task_queues.js:95:5) {
  errors: 'Not Found',
  statusCode: 404,
  page: '/login'
}

Tried running vanilla using quick start but also running using wodby's for docker4drupal.

node v14.21.3 drupal 10.x

looking at the logs in drupal I am seeing:

page not found | 04/12/2023 - 15:07 | /jsonapi/views/recipe_collections/block?sort=name&… | Anonymous (not verified) |  
-- | -- | -- | -- | --
  | page not found | 04/12/2023 - 15:07 | /jsonapi/views/recipe_collections/block?sort=name&… | Anonymous (not verified)

page not found	04/12/2023 - 15:07	[/jsonapi/views/recipe_collections/block?sort=name&…](http://umami2.internal/en/admin/reports/dblog/event/113)	Anonymous (not verified)	
page not found	04/12/2023 - 15:07	[/jsonapi/views/recipe_collections/block?sort=name&…](http://umami2.internal/en/admin/reports/dblog/event/112)	Anonymous (not verified)

[2dareis2do]

eureka

basically I had to enable JSON:API Views and everything starts to work as expected.

[2dareis2do]

The other issue I have is when visiting subpage with a port number I get the error

error - Error: Not Found at /Users/myuser/Sites/next-example-umami3/node_modules/next-drupal/dist/index.js:2550:19 at processTicksAndRejections (node:internal/process/task_queues:96:5) { type: 'JsonApiErrors', errors: 'Not Found', statusCode: 404, page: '/[...slug]'.

In other words I have to swap out say http://umami3.internal:80 for http://umami3.internal`.

Might post a separate issue for this

[welly]

I've also been running into a similar problem when using a ddev environment. https doesn't work but in .env.local, setting the URL to http seems to fix it. At this stage in my nextjs/drupal life, that's good enough. But it'd be great if anyone has any advice on how to get it running on https.

[kopeboy]

I'm also trying with DDEV, but receiving the error both with http://[my-project-name].ddev.site and https://[my-project-name].ddev.site (and corresponding NEXT_IMAGE_DOMAIN=[my-project-name].ddev.site) in my .env.local

The error when trying to access localhost:3000 in my case is

Server Error
Error: Failed prop type: The prop `href` expects a `string` or `object` in `<Link>`, but got `null` instead.