search

payloadcms / payload

The best way to build a modern backend + admin UI. No black magic, all TypeScript, and fully open-source, Payload is both an app framework and a headless CMS.
https://payloadcms.com
MIT License
21.4k stars 1.29k forks source link

Webpack Error with @payloadcms/plugin-search (Beta 21) #6456

Open hatchli opened 2 months ago

hatchli commented 2 months ago

Something (I believe depth) has changed with the search plugin from its 2.0 version to the latest 3.0 beta.

To reproduce, simply create a new Restaurant in the Restaurants collection - theoretically, the search plugin is supposed to create a zero-depth search-optimized collection representing that restaurant. While the plugin succeeds in creating an object, the searchOverrides appear to fail: the city and citySlug fields fail while also returning the above Webpack error (which shouldn't exist in 3.0). Additionally, trying to open any of the Search Results collection causes a crash.

The error below logs out constantly when navigating around the Admin Panel, but doesn't to seem cause any problems, so I've generally ignored it:

 ⨯ node_modules/.pnpm/@payloadcms+plugin-search@3.0.0-beta.21_@types+react@18.2.79_monaco-editor@0.48.0_next@14.3.0_avlgtmrux6d4uu4nxa4264tz4u/node_modules/@payloadcms/plugin-search/dist/Search/ui/index.js (5:30) @ LinkToDoc
 ⨯ TypeError: (0 , _payloadcms_ui_forms_Form__WEBPACK_IMPORTED_MODULE_0__.useWatchForm) is not a function
    at stringify (<anonymous>)
digest: "1307261427"
  3 | import React from 'react';
  4 | export const LinkToDoc = ()=>{
> 5 |     const form = useWatchForm();
    |                              ^
  6 |     const fields = form.fields;
  7 |     const { doc: { value: { relationTo, value: docId } } } = fields;
  8 |     const config = useConfig();

This is how I configure the search plugin in the payload config, which worked just fine in 2.0:

    search({
      collections: ['restaurants'],
      searchOverrides: {
        fields: [
          { name: 'city', type: 'text' },
          { name: 'citySlug', type: 'text' },
          { name: 'slug', type: 'text' },
        ],
      },
      beforeSync: ({ searchDoc, originalDoc }) => {
        console.log('searchDoc', searchDoc, 'originalDoc', originalDoc)
        const returnDoc = {
          ...searchDoc,
          city: originalDoc?.city?.name,
          citySlug: originalDoc?.city?.slug,
          title: originalDoc?.name,
          slug: originalDoc?.slug,
        }
        return returnDoc
      },
    }),

This is how it appears in the admin panel, where you can see the 2.0 entries that succeeded with the same config, and the failed 3.0beta21 entry

image

Doing an additional payload call on the assumption that the depth of the query changed fixes the searchOverrides issue:

search({
      collections: ['restaurants'],
      searchOverrides: {
        fields: [
          { name: 'city', type: 'text' },
          { name: 'citySlug', type: 'text' },
          { name: 'slug', type: 'text' },
        ],
      },
      beforeSync: async ({ searchDoc, originalDoc, payload }) => {
        console.log('searchDoc', searchDoc, 'originalDoc', originalDoc)
        const { slug: citySlug, name: cityName } = await payload.findByID({
          collection: 'cities',
          id: originalDoc?.city,
        })
        const returnDoc = {
          ...searchDoc,
          city: cityName,
          citySlug: citySlug,
          title: originalDoc?.name,
          slug: originalDoc?.slug,
        }
        return returnDoc
      },
    }),

Notably the webpack error persists despite the above fix, and clicking any search item causes the admin panel to crash with the console logging that same aforementioned webpack error followed by this TypeError:

[20:23:49] ERROR: There was an error building form state
    err: {
      "type": "TypeError",
      "message": "Cannot destructure property 'collectionSlug' of 'reqData' as it is undefined.",
      "stack":
          TypeError: Cannot destructure property 'collectionSlug' of 'reqData' as it is undefined.
              at Object.buildFormState [as form-state] (webpack-internal:///(rsc)/./node_modules/.pnpm/@payloadcms+next@3.0.0-beta.21_@types+react@18.2.79_graphql@16.8.1_monaco-editor@0.48.0_next@_hkmzhwv2pfhwxpo272ueu2xx7e/node_modules/@payloadcms/next/dist/routes/rest/buildFormState.js:35:17)
              at eval (webpack-internal:///(rsc)/./node_modules/.pnpm/@payloadcms+next@3.0.0-beta.21_@types+react@18.2.79_graphql@16.8.1_monaco-editor@0.48.0_next@_hkmzhwv2pfhwxpo272ueu2xx7e/node_modules/@payloadcms/next/dist/routes/rest/index.js:537:55)
              at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
              at async /Users/wade/Git/payload-3.0-demo/node_modules/.pnpm/next@14.3.0-canary.34_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/next-server/app-route-experimental.runtime.dev.js:6:54186
              at async e_.execute (/Users/wade/Git/payload-3.0-demo/node_modules/.pnpm/next@14.3.0-canary.34_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/next-server/app-route-experimental.runtime.dev.js:6:45421)
              at async e_.handle (/Users/wade/Git/payload-3.0-demo/node_modules/.pnpm/next@14.3.0-canary.34_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/compiled/next-server/app-route-experimental.runtime.dev.js:6:55440)
              at async doRender (/Users/wade/Git/payload-3.0-demo/node_modules/.pnpm/next@14.3.0-canary.34_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/base-server.js:1364:42)
              at async cacheEntry.responseCache.get.routeKind (/Users/wade/Git/payload-3.0-demo/node_modules/.pnpm/next@14.3.0-canary.34_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/base-server.js:1578:40)
              at async DevServer.renderToResponseWithComponentsImpl (/Users/wade/Git/payload-3.0-demo/node_modules/.pnpm/next@14.3.0-canary.34_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/base-server.js:1498:28)
              at async DevServer.renderPageComponent (/Users/wade/Git/payload-3.0-demo/node_modules/.pnpm/next@14.3.0-canary.34_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/base-server.js:1915:24)
              at async DevServer.renderToResponseImpl (/Users/wade/Git/payload-3.0-demo/node_modules/.pnpm/next@14.3.0-canary.34_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/base-server.js:1953:32)
              at async DevServer.pipeImpl (/Users/wade/Git/payload-3.0-demo/node_modules/.pnpm/next@14.3.0-canary.34_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/base-server.js:900:25)
              at async NextNodeServer.handleCatchallRenderRequest (/Users/wade/Git/payload-3.0-demo/node_modules/.pnpm/next@14.3.0-canary.34_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/next-server.js:273:17)
              at async DevServer.handleRequestImpl (/Users/wade/Git/payload-3.0-demo/node_modules/.pnpm/next@14.3.0-canary.34_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/base-server.js:796:17)
              at async /Users/wade/Git/payload-3.0-demo/node_modules/.pnpm/next@14.3.0-canary.34_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/dev/next-dev-server.js:339:20
              at async Span.traceAsyncFn (/Users/wade/Git/payload-3.0-demo/node_modules/.pnpm/next@14.3.0-canary.34_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/trace/trace.js:157:20)
              at async DevServer.handleRequest (/Users/wade/Git/payload-3.0-demo/node_modules/.pnpm/next@14.3.0-canary.34_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/dev/next-dev-server.js:336:24)
              at async invokeRender (/Users/wade/Git/payload-3.0-demo/node_modules/.pnpm/next@14.3.0-canary.34_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/lib/router-server.js:174:21)
              at async handleRequest (/Users/wade/Git/payload-3.0-demo/node_modules/.pnpm/next@14.3.0-canary.34_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/lib/router-server.js:353:24)
              at async requestHandlerImpl (/Users/wade/Git/payload-3.0-demo/node_modules/.pnpm/next@14.3.0-canary.34_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/lib/router-server.js:377:13)
              at async Server.requestListener (/Users/wade/Git/payload-3.0-demo/node_modules/.pnpm/next@14.3.0-canary.34_react-dom@18.2.0_react@18.2.0/node_modules/next/dist/server/lib/start-server.js:142:13)
    }

I've sent @paulpopus the repro and dm'd him the env file for reproduction.

siobahnschuck commented 2 months ago

@hatchli @paulpopus Is there any update on this? I am currently trying to enable the search plugin on version 3.0.0-beta.24 and am seeing both these errors in addition to an empty search results index in the admin dash.