search

chapter-three / next-drupal

Next.js for Drupal has everything you need to build a next-generation front-end for your Drupal site: SSG, SSR, and ISR, Multi-site, Authentication, Webforms, Search API, I18n and Preview mode (works with JSON:API and GraphQL).
https://next-drupal.org
MIT License
624 stars 172 forks source link

Following the Get Started guide on a clean Drupal 10 install fails to resolve #403

Closed cruno91 closed 1 month ago

cruno91 commented 1 year ago

When following the Get Started guide I'm able to get through everything until Start Development Server. The server starts, but if I navigate to the next site, I get an error.

Screenshot 2022-12-16 at 9 55 36 PM

With debug enabled, this is the output from the next server:

wait  - compiling / (client and server)...
event - compiled client and server successfully in 153 ms (246 modules)
[next-drupal][debug]: Debug mode is on.
[next-drupal][debug]: Using default fetch (polyfilled by Next.js).
[next-drupal][debug]: Fetching resource collection of type node--article
[next-drupal][debug]: https://decoupled.lndo.site/jsonapi/node/article?filter%5Bstatus%5D=1&fields%5Bnode--article%5D=title%2Cpath%2Cfield_image%2Cuid%2Ccreated&include=field_image%2Cuid&sort=-created
[next-drupal][debug]: Using default fetch (polyfilled by Next.js).
error - JsonApiErrors: 400 Bad Request
Input value "fields" contains a non-scalar value.
    at /app/next/node_modules/next-drupal/dist/index.js:2550:19
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async getStaticProps (webpack-internal:///./pages/index.tsx:97:19)
    at async Object.renderToHTML (/app/next/node_modules/next/dist/server/render.js:385:20)
    at async doRender (/app/next/node_modules/next/dist/server/base-server.js:720:34)
    at async cacheEntry.responseCache.get.incrementalCache.incrementalCache (/app/next/node_modules/next/dist/server/base-server.js:828:28)
    at async /app/next/node_modules/next/dist/server/response-cache/index.js:83:36 {
  errors: [
    {
      title: 'Bad Request',
      status: '400',
      detail: 'Input value "fields" contains a non-scalar value.',
      links: [Object]
    }
  ],
  statusCode: 400,
  page: '/'
}
wait  - compiling /_error (client and server)...
event - compiled client and server successfully in 52 ms (247 modules)

Navigating to the URL next is trying to retrieve data (https://decoupled.lndo.site/jsonapi/node/article?filter%5Bstatus%5D=1&fields%5Bnode--article%5D=title%2Cpath%2Cfield_image%2Cuid%2Ccreated&include=field_image%2Cuid&sort=-created) from results in that 400 response as well.

If i try to navigate to the same path without the URL parameters (https://decoupled.lndo.site/jsonapi/node/article) I get data back from Drupal (200 response).

Quick note on patches:

The ones defined in the Apply patches section are outdated. The patch listed for decoupled_router does not apply.

This is what I've updated with:

        "patches": {
            "drupal/subrequests": {
                "3049395-47 Get same results on different request": "https://www.drupal.org/files/issues/2022-12-06/subrequests-3049395-chnage-request-type-47.patch"
            },
            "drupal/decoupled_router": {
                "3111456-59 Unable to resolve path on node in other language than default": "https://www.drupal.org/files/issues/2022-12-01/decouple_router-3111456-resolve-language-issue-58--get-translation.patch"
            }
        }

Drupal: 10 Nextjs module: 1.6.1 next drupal starter: 1.7.2 Node: v16.19.0

cruno91 commented 1 year ago

And here is the exception stack from the 400 response:

"Symfony\\Component\\HttpFoundation\\Exception\\BadRequestException: Input value \"fields\" contains a non-scalar value. in /app/vendor/symfony/http-foundation/InputBag.php:37
Stack trace:
#0 /app/web/modules/contrib/next/modules/next_jsonapi/src/Controller/EntityResource.php(81): Symfony\\Component\\HttpFoundation\\InputBag->get('fields')
#1 /app/web/core/modules/jsonapi/src/Controller/EntityResource.php(412): Drupal\
ext_jsonapi\\Controller\\EntityResource->getJsonApiParams(Object(Symfony\\Component\\HttpFoundation\\Request), Object(Drupal\\jsonapi\\ResourceType\\ResourceType))
#2 [internal function]: Drupal\\jsonapi\\Controller\\EntityResource->getCollection(Object(Drupal\\jsonapi\\ResourceType\\ResourceType), Object(Symfony\\Component\\HttpFoundation\\Request))
#3 /app/web/core/lib/Drupal/Core/EventSubscriber/EarlyRenderingControllerWrapperSubscriber.php(123): call_user_func_array(Array, Array)
#4 /app/web/core/lib/Drupal/Core/Render/Renderer.php(580): Drupal\\Core\\EventSubscriber\\EarlyRenderingControllerWrapperSubscriber->Drupal\\Core\\EventSubscriber\\{closure}()
#5 /app/web/core/lib/Drupal/Core/EventSubscriber/EarlyRenderingControllerWrapperSubscriber.php(124): Drupal\\Core\\Render\\Renderer->executeInRenderContext(Object(Drupal\\Core\\Render\\RenderContext), Object(Closure))
#6 /app/web/core/lib/Drupal/Core/EventSubscriber/EarlyRenderingControllerWrapperSubscriber.php(97): Drupal\\Core\\EventSubscriber\\EarlyRenderingControllerWrapperSubscriber->wrapControllerExecutionInRenderContext(Array, Array)
#7 /app/vendor/symfony/http-kernel/HttpKernel.php(163): Drupal\\Core\\EventSubscriber\\EarlyRenderingControllerWrapperSubscriber->Drupal\\Core\\EventSubscriber\\{closure}()
#8 /app/vendor/symfony/http-kernel/HttpKernel.php(74): Symfony\\Component\\HttpKernel\\HttpKernel->handleRaw(Object(Symfony\\Component\\HttpFoundation\\Request), 1)
#9 /app/web/modules/contrib/simple_oauth/src/HttpMiddleware/BasicAuthSwap.php(68): Symfony\\Component\\HttpKernel\\HttpKernel->handle(Object(Symfony\\Component\\HttpFoundation\\Request), 1, true)
#10 /app/web/core/lib/Drupal/Core/StackMiddleware/Session.php(58): Drupal\\simple_oauth\\HttpMiddleware\\BasicAuthSwap->handle(Object(Symfony\\Component\\HttpFoundation\\Request), 1, true)
#11 /app/web/core/lib/Drupal/Core/StackMiddleware/KernelPreHandle.php(48): Drupal\\Core\\StackMiddleware\\Session->handle(Object(Symfony\\Component\\HttpFoundation\\Request), 1, true)
#12 /app/web/core/modules/page_cache/src/StackMiddleware/PageCache.php(106): Drupal\\Core\\StackMiddleware\\KernelPreHandle->handle(Object(Symfony\\Component\\HttpFoundation\\Request), 1, true)
#13 /app/web/core/modules/page_cache/src/StackMiddleware/PageCache.php(85): Drupal\\page_cache\\StackMiddleware\\PageCache->pass(Object(Symfony\\Component\\HttpFoundation\\Request), 1, true)
#14 /app/vendor/asm89/stack-cors/src/Cors.php(53): Drupal\\page_cache\\StackMiddleware\\PageCache->handle(Object(Symfony\\Component\\HttpFoundation\\Request), 1, true)
#15 /app/web/core/lib/Drupal/Core/StackMiddleware/ReverseProxyMiddleware.php(48): Asm89\\Stack\\Cors->handle(Object(Symfony\\Component\\HttpFoundation\\Request), 1, true)
#16 /app/web/core/lib/Drupal/Core/StackMiddleware/NegotiationMiddleware.php(51): Drupal\\Core\\StackMiddleware\\ReverseProxyMiddleware->handle(Object(Symfony\\Component\\HttpFoundation\\Request), 1, true)
#17 /app/web/core/lib/Drupal/Core/StackMiddleware/StackedHttpKernel.php(51): Drupal\\Core\\StackMiddleware\
egotiationMiddleware->handle(Object(Symfony\\Component\\HttpFoundation\\Request), 1, true)
#18 /app/web/core/lib/Drupal/Core/DrupalKernel.php(675): Drupal\\Core\\StackMiddleware\\StackedHttpKernel->handle(Object(Symfony\\Component\\HttpFoundation\\Request), 1, true)
#19 /app/web/index.php(19): Drupal\\Core\\DrupalKernel->handle(Object(Symfony\\Component\\HttpFoundation\\Request))
#20 {main}

Next Symfony\\Component\\HttpKernel\\Exception\\BadRequestHttpException: Input value \"fields\" contains a non-scalar value. in /app/vendor/symfony/http-kernel/HttpKernel.php:81
Stack trace:
#0 /app/web/modules/contrib/simple_oauth/src/HttpMiddleware/BasicAuthSwap.php(68): Symfony\\Component\\HttpKernel\\HttpKernel->handle(Object(Symfony\\Component\\HttpFoundation\\Request), 1, true)
#1 /app/web/core/lib/Drupal/Core/StackMiddleware/Session.php(58): Drupal\\simple_oauth\\HttpMiddleware\\BasicAuthSwap->handle(Object(Symfony\\Component\\HttpFoundation\\Request), 1, true)
#2 /app/web/core/lib/Drupal/Core/StackMiddleware/KernelPreHandle.php(48): Drupal\\Core\\StackMiddleware\\Session->handle(Object(Symfony\\Component\\HttpFoundation\\Request), 1, true)
#3 /app/web/core/modules/page_cache/src/StackMiddleware/PageCache.php(106): Drupal\\Core\\StackMiddleware\\KernelPreHandle->handle(Object(Symfony\\Component\\HttpFoundation\\Request), 1, true)
#4 /app/web/core/modules/page_cache/src/StackMiddleware/PageCache.php(85): Drupal\\page_cache\\StackMiddleware\\PageCache->pass(Object(Symfony\\Component\\HttpFoundation\\Request), 1, true)
#5 /app/vendor/asm89/stack-cors/src/Cors.php(53): Drupal\\page_cache\\StackMiddleware\\PageCache->handle(Object(Symfony\\Component\\HttpFoundation\\Request), 1, true)
#6 /app/web/core/lib/Drupal/Core/StackMiddleware/ReverseProxyMiddleware.php(48): Asm89\\Stack\\Cors->handle(Object(Symfony\\Component\\HttpFoundation\\Request), 1, true)
#7 /app/web/core/lib/Drupal/Core/StackMiddleware/NegotiationMiddleware.php(51): Drupal\\Core\\StackMiddleware\\ReverseProxyMiddleware->handle(Object(Symfony\\Component\\HttpFoundation\\Request), 1, true)
#8 /app/web/core/lib/Drupal/Core/StackMiddleware/StackedHttpKernel.php(51): Drupal\\Core\\StackMiddleware\
egotiationMiddleware->handle(Object(Symfony\\Component\\HttpFoundation\\Request), 1, true)
#9 /app/web/core/lib/Drupal/Core/DrupalKernel.php(675): Drupal\\Core\\StackMiddleware\\StackedHttpKernel->handle(Object(Symfony\\Component\\HttpFoundation\\Request), 1, true)
#10 /app/web/index.php(19): Drupal\\Core\\DrupalKernel->handle(Object(Symfony\\Component\\HttpFoundation\\Request))
#11 {main}"
shadcn commented 1 year ago

@cruno91 I pushed a fix for this in #404

Can you try the dev release and see if this works for you? You can install the dev release using:

composer require 'drupal/next:1.0.x-dev@dev'
cruno91 commented 1 year ago

@shadcn that worked for when there is no content, but when you add a new Article (per the Get started doc) I'm met with this error:

wait  - compiling / (client and server)...
event - compiled client and server successfully in 68 ms (247 modules)
[next-drupal][debug]: Debug mode is on.
[next-drupal][debug]: Using default fetch (polyfilled by Next.js).
[next-drupal][debug]: Fetching resource collection of type node--article
[next-drupal][debug]: https://decoupled.lndo.site/jsonapi/node/article?filter%5Bstatus%5D=1&fields%5Bnode--article%5D=title%2Cpath%2Cfield_image%2Cuid%2Ccreated&include=field_image%2Cuid&sort=-created
[next-drupal][debug]: Using default fetch (polyfilled by Next.js).
error - Error: Invalid src prop (https://decoupled.lndo.site/sites/default/files/2022-12/test_0.jpeg) on `next/image`, hostname "decoupled.lndo.site" is not configured under images in your `next.config.js`
See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host
    at defaultLoader (/app/next/node_modules/next/dist/shared/lib/image-loader.js:34:27)
    at eval (webpack-internal:///./node_modules/next/dist/client/image.js:94:39)
    at Array.map (<anonymous>)
    at generateImgAttrs (webpack-internal:///./node_modules/next/dist/client/image.js:94:24)
    at eval (webpack-internal:///./node_modules/next/dist/client/image.js:552:27)
    at renderWithHooks (/app/next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5658:16)
    at renderForwardRef (/app/next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5842:18)
    at renderElement (/app/next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6005:11)
    at renderNodeDestructiveImpl (/app/next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/app/next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderNode (/app/next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
    at renderHostElement (/app/next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5642:3)
    at renderElement (/app/next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5952:5)
    at renderNodeDestructiveImpl (/app/next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/app/next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderNode (/app/next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
    at renderChildrenArray (/app/next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6211:7)
    at renderNodeDestructiveImpl (/app/next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6141:7)
    at renderNodeDestructive (/app/next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderNode (/app/next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
    at renderHostElement (/app/next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5642:3)
    at renderElement (/app/next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5952:5)
    at renderNodeDestructiveImpl (/app/next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/app/next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderIndeterminateComponent (/app/next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5785:7)
    at renderElement (/app/next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5946:7)
    at renderNodeDestructiveImpl (/app/next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/app/next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderNode (/app/next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
    at renderChildrenArray (/app/next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6211:7)
    at renderNodeDestructiveImpl (/app/next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6141:7)
    at renderNodeDestructive (/app/next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderNode (/app/next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
    at renderHostElement (/app/next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5642:3)
    at renderElement (/app/next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5952:5)
    at renderNodeDestructiveImpl (/app/next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/app/next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderNode (/app/next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
    at renderChildrenArray (/app/next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6211:7)
    at renderNodeDestructiveImpl (/app/next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6141:7)
    at renderNodeDestructive (/app/next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderNode (/app/next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
    at renderChildrenArray (/app/next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6211:7)
    at renderNodeDestructiveImpl (/app/next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6141:7)
    at renderNodeDestructive (/app/next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14)
    at renderNode (/app/next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6259:12)
    at renderHostElement (/app/next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5642:3)
    at renderElement (/app/next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:5952:5)
    at renderNodeDestructiveImpl (/app/next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6104:11)
    at renderNodeDestructive (/app/next/node_modules/react-dom/cjs/react-dom-server.browser.development.js:6076:14) {
  page: '/'
}
shadcn commented 1 year ago

can you check if you have decoupled.lndo.site configured under NEXT_IMAGE_DOMAIN in your .env.local?

NEXT_IMAGE_DOMAIN=decoupled.lndo.site
cruno91 commented 1 year ago 
# See https://next-drupal.org/docs/environment-variables
NEXT_PUBLIC_DRUPAL_BASE_URL=https://decoupled.lndo.site
NEXT_IMAGE_DOMAIN=next.decoupled.lndo.site

# Required for On-demand Revalidation
DRUPAL_REVALIDATE_SECRET=secret
shadcn commented 1 year ago

It looks like the image is pulling from decoupled.lndo.site but you have next.decoupled.lndo.site configured for NEXT_IMAGE_DOMAIN.

cruno91 commented 1 year ago

Ah yes I understand now. NEXT_IMAGE_DOMAIN is literally for the images of the site. I thought that variable was for the next site itself.

It's working now, thanks!

shadcn commented 1 year ago

Hmm I see. I'll improve the docs for it https://next-drupal.org/docs/environment-variables#required