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

[hatchli]

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

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]

@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.

[paulpopus]

This should no longer be an issue on the latest beta from my testing just now. If it persists let me know though!

[hatchli]

Thanks Paul! Sadly I can't test this as a necessary package my in my project can't go React 15 yet. But, for future projects I'll be sure to report here if this issue stands! Thanks for following up and taking care of this!