sanity-plugin-seo-pane 2.0.0-beta.1 does not work (Uncaught error: _util2.default.inherits is not a function)

[przemo246]

Hey, I am using Sanity 3.2.5 and installed the latest sanity-plugin-seo-pane however I am not able to make it work. I tried on a currently run company project and on a clean Sanity installation. I am getting the same error in both cases:

Uncaught error: _util2.default.inherits is not a function
http://localhost:3333/node_modules/.sanity/vite/deps/sanity-plugin-seo-pane.js?v=6e911c5d:28903:20
TypeError: _util2.default.inherits is not a function
    at node_modules/yoastseo/src/errors/missingArgument.js (http://localhost:3333/node_modules/.sanity/vite/deps/sanity-plugin-seo-pane.js?v=6e911c5d:28903:20)
    at __require2 (http://localhost:3333/node_modules/.sanity/vite/deps/chunk-TFWDKVI3.js?v=6e911c5d:18:50)
    at node_modules/yoastseo/src/bundledPlugins/previouslyUsedKeywords.js (http://localhost:3333/node_modules/.sanity/vite/deps/sanity-plugin-seo-pane.js?v=6e911c5d:28916:28)
    at __require2 (http://localhost:3333/node_modules/.sanity/vite/deps/chunk-TFWDKVI3.js?v=6e911c5d:18:50)
    at node_modules/yoastseo/src/bundledPlugins/index.js (http://localhost:3333/node_modules/.sanity/vite/deps/sanity-plugin-seo-pane.js?v=6e911c5d:29029:35)
    at __require2 (http://localhost:3333/node_modules/.sanity/vite/deps/chunk-TFWDKVI3.js?v=6e911c5d:18:50)
    at node_modules/yoastseo/src/worker/AnalysisWebWorker.js (http://localhost:3333/node_modules/.sanity/vite/deps/sanity-plugin-seo-pane.js?v=6e911c5d:51982:27)
    at __require2 (http://localhost:3333/node_modules/.sanity/vite/deps/chunk-TFWDKVI3.js?v=6e911c5d:18:50)
    at node_modules/yoastseo/src/worker/index.js (http://localhost:3333/node_modules/.sanity/vite/deps/sanity-plugin-seo-pane.js?v=6e911c5d:53274:30)
    at __require2 (http://localhost:3333/node_modules/.sanity/vite/deps/chunk-TFWDKVI3.js?v=6e911c5d:18:50)

deskStructure.js file is as follows:

import {SEOPane} from 'sanity-plugin-seo-pane'
import {getSlug} from './utils/seoPane'

export const getDefaultDocumentNode = (S, {schemaType}) => {
  const slug = getSlug(schemaType)
  const resolveProductionUrl = (doc) => {
    return `http://localhost:3333/${slug}/${doc.slug.current}`
  }
    return S.view
      .component(SEOPane)
      .options({
        // Retrieve the keywords and synonyms at the given dot-notated strings
        keywords: `seo.keywords`,
        synonyms: `seo.synonyms`,
        url: (doc) => resolveProductionUrl(doc),
      })
      .title('SEO')
}

Can you please let me know what I am doing wrong here? Are there any full examples available to compare?

[jeff-overhaul]

Same here, looks to be a problem with the yoast dependency

[SimeonGriggs]

When I tested thie Beta I did it inside of a Next.js app, which allowed it to work.

In Vite it turns out it needs a little assistance...

// ./sanity.cli.ts

import {defineCliConfig} from 'sanity/cli'
// yarn add -D vite-plugin-node-polyfills
import {nodePolyfills} from 'vite-plugin-node-polyfills'

export default defineCliConfig({
  // ... your project's `api` config
  vite: (prev) => ({
    ...prev,
    plugins: [
      ...prev.plugins,
      nodePolyfills({ util: true }),
    ],
    define: {
      ...prev.define,
      'process.env': {},
    },
  }),
})

[przemo246]

Thank you @SimeonGriggs, unfortunately, this leads to another issue connected to styled-components:

Uncaught error: Cannot read properties of undefined (reading 'REACT_APP_SC_ATTR')
http://localhost:3333/node_modules/.sanity/vite/deps/chunk-PMYGOITV.js?v=6f010646:28179:55
TypeError: Cannot read properties of undefined (reading 'REACT_APP_SC_ATTR')
    at http://localhost:3333/node_modules/.sanity/vite/deps/chunk-PMYGOITV.js?v=6f010646:28179:55

I have found the following code snippet from styled-components which is leading to that problem:

export const SC_ATTR: string =
  (typeof process !== 'undefined' && typeof process.env !== 'undefined' && (process.env.REACT_APP_SC_ATTR || process.env.SC_ATTR)) ||
  'data-styled';

So far I haven't found any working solution to that 😥

[SimeonGriggs]

I put some more instructions into the readme, I've updated the comment above with the more complete code example...

[przemo246]

Thank you @SimeonGriggs! Seems to be working now!