Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
hatchli opened this issue May 2, 2024 · 4 comments
Closed

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

hatchli opened this issue May 2, 2024 · 4 comments
Assignees
Labels

Comments

@hatchli
Copy link

hatchli commented May 2, 2024

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/@[email protected]_@[email protected][email protected][email protected]_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/@[email protected]_@[email protected][email protected][email protected]_next@_hkmzhwv2pfhwxpo272ueu2xx7e/node_modules/@payloadcms/next/dist/routes/rest/buildFormState.js:35:17)
              at eval (webpack-internal:///(rsc)/./node_modules/.pnpm/@[email protected]_@[email protected][email protected][email protected]_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/[email protected][email protected][email protected]/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/[email protected][email protected][email protected]/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/[email protected][email protected][email protected]/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/[email protected][email protected][email protected]/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/[email protected][email protected][email protected]/node_modules/next/dist/server/base-server.js:1578:40)
              at async DevServer.renderToResponseWithComponentsImpl (/Users/wade/Git/payload-3.0-demo/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/server/base-server.js:1498:28)
              at async DevServer.renderPageComponent (/Users/wade/Git/payload-3.0-demo/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/server/base-server.js:1915:24)
              at async DevServer.renderToResponseImpl (/Users/wade/Git/payload-3.0-demo/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/server/base-server.js:1953:32)
              at async DevServer.pipeImpl (/Users/wade/Git/payload-3.0-demo/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/server/base-server.js:900:25)
              at async NextNodeServer.handleCatchallRenderRequest (/Users/wade/Git/payload-3.0-demo/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/server/next-server.js:273:17)
              at async DevServer.handleRequestImpl (/Users/wade/Git/payload-3.0-demo/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/server/base-server.js:796:17)
              at async /Users/wade/Git/payload-3.0-demo/node_modules/.pnpm/[email protected][email protected][email protected]/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/[email protected][email protected][email protected]/node_modules/next/dist/trace/trace.js:157:20)
              at async DevServer.handleRequest (/Users/wade/Git/payload-3.0-demo/node_modules/.pnpm/[email protected][email protected][email protected]/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/[email protected][email protected][email protected]/node_modules/next/dist/server/lib/router-server.js:174:21)
              at async handleRequest (/Users/wade/Git/payload-3.0-demo/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/next/dist/server/lib/router-server.js:353:24)
              at async requestHandlerImpl (/Users/wade/Git/payload-3.0-demo/node_modules/.pnpm/[email protected][email protected][email protected]/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/[email protected][email protected][email protected]/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.

@paulpopus paulpopus self-assigned this May 2, 2024
@siobahnschuck
Copy link

siobahnschuck commented May 9, 2024

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

@denolfe denolfe transferred this issue from payloadcms/payload-3.0-demo May 22, 2024
@denolfe denolfe added the v3 label May 22, 2024
@paulpopus
Copy link
Contributor

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

@hatchli
Copy link
Author

hatchli commented Jul 23, 2024

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!

Copy link

github-actions bot commented Sep 7, 2024

This issue has been automatically locked.
Please open a new issue if this issue persists with any additional detail.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Sep 7, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Projects
None yet
Development

No branches or pull requests

4 participants