Error: require() of ES Module

[rowin1125]

Error while importing the plugin

Hi there, thansk for this plugin.
I unfortunately encounter an error while including this in the plugins array in sanity.config.ts.

Error

Error: require() of ES Module /var/www/node_modules/@superside-oss/sanity-plugin-copy-paste/node_modules/nanoid/index.js from /var/www/node_modules/@superside-oss/sanity-plugin-copy-paste/dist/index.js not supported.
Instead change the require of /var/www/node_modules/@superside-oss/sanity-plugin-copy-paste/node_modules/nanoid/index.js in /var/www/node_modules/@superside-oss/sanity-plugin-copy-paste/dist/index.js to a dynamic import() which is available in all CommonJS modules.

Schema file

import { copyPaste } from "@superside-oss/sanity-plugin-copy-paste";
import { BiHomeAlt } from "react-icons/bi";
import { defineField, defineType } from "sanity";

import { getCustomComponentTypes } from "../../helper/getCustomComponentTypes";

export default defineType({
    name: "homepage",
    title: "Homepage",
    type: "document",
    icon: BiHomeAlt,
    groups: [
        { name: "content", title: "Content" },
        { name: "seo", title: "SEO" },
    ],
    fields: [
        defineField(copyPaste),
        defineField({
            name: "content",
            group: "content",
            title: "Content",
            type: "array",
            of: getCustomComponentTypes(),
        }),
        defineField({
            group: ["seo"],
            name: "seo",
            title: "SEO Title",
            type: "seo",
        }),
    ],
    preview: {
        prepare() {
            return {
                title: "Homepage",
            };
        },
    },
});

Config:

import { table } from "@sanity/table";
import { visionTool } from "@sanity/vision";
import { copyPastePlugin } from "@superside-oss/sanity-plugin-copy-paste";
import { defineConfig } from "sanity";
import { structureTool } from "sanity/structure";
import { iconPicker } from "sanity-plugin-icon-picker";
import { media } from "sanity-plugin-media";

import singletons from "./sanitySchemas/models/singleton";
import {
    customStructure,
    SingletonType,
} from "./src/components/sanity/deskTool/customStructure";
import StudioLogo from "./src/lib/sanity/sanityStudioTheme/components/StudioLogo/StudioLogo";
import StudioNavBar from "./src/lib/sanity/sanityStudioTheme/components/StudioNavBar/StudioNavBar";
import { toSpitiMasTheme } from "./src/lib/sanity/sanityStudioTheme/sanityTheme";
import { schemaTypes } from "./sanitySchemas";

// Define the actions that should be available for singleton documents
const singletonActions = new Set(["publish", "discardChanges", "restore"]);

// dynamically import all singleton pages
const singletonPages = singletons.map((model) => model.name) as string[];

export default defineConfig({
    name: process.env.NEXT_PUBLIC_SANITY_DATASET,
    title: process.env.NEXT_PUBLIC_SANITY_DATASET ,
    projectId: process.env.NEXT_PUBLIC_SANITY_PROJECT_ID,
    dataset: process.env.NEXT_PUBLIC_SANITY_DATASET,
    basePath: "/studio",
    plugins: [
        iconPicker(),
        structureTool({
            // Custom structure to allow singleton pages to be visible in the studio
            structure: (S) => customStructure(S, singletons as SingletonType[]),
        }),
        visionTool(),
        table(),
        media(),
        copyPastePlugin(),
    ],
    schema: {
        types: schemaTypes,
        // Filter out singleton types from the global “New document” menu options
        templates: (templates) =>
            templates.filter(
                (template) => !singletonPages.includes(template.id)
            ),
    },
    document: {
        // For singleton types, filter out actions that are not explicitly included
        // in the `singletonActions` list defined above
        actions: (input, context) =>
            singletonPages.includes(context.schemaType)
                ? input.filter(
                    ({ action }) => action && singletonActions.has(action)
                )
                : input,
    },
    theme: toSpitiMasTheme,
    studio: {
        components: {
            logo: StudioLogo,
            navbar: StudioNavBar,
        },
    },
});

tscongi.json

{
    "compilerOptions": {
        "downlevelIteration": true,
        "target": "es5",
        "lib": ["dom", "dom.iterable", "esnext"],
        "allowJs": true,
        "skipLibCheck": true,
        "strict": true,
        "forceConsistentCasingInFileNames": true,
        "noEmit": true,
        "esModuleInterop": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "jsx": "preserve",
        "incremental": true,
        "paths": {
            "@/src/*": ["./src/*"],
            "@/public/*": ["./public/*"],
            "@/images/*": ["./src/images/*"]
        }
    },
    "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
    "exclude": ["node_modules"]
}

Versions:

"sanity": "^3.29.1",
"@superside-oss/sanity-plugin-copy-paste": "^1.0.3",
"next-sanity": "^8.0.0",

Any idea how to resolve this issue because I really like to use the plugin 😄

Thanks in advance.

[sarmeyer]

I believe this error is due to the nanoid library removing CommonJS support. Nano ID 4 will work only with ESM applications. v4 is what this library depends on. More info here: ai/nanoid#365 & ai/nanoid#364