'import' and 'export' may appear only with 'sourceType: module' (1:1037)

[DennisKraaijeveld]

Hi!

Trying to use this plugin for V3, but my whole studio crashed.

Module parse failed: 'import' and 'export' may appear only with 'sourceType: module' (1:1037) You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

var e;function r(e,r){ I thought this plugin was V3 compatible? Anyone knows how to fix this?

Node 16 and 18 tested.

[lhendrysiak]

Same problem here!

[kylesalstrom]

Plugin works great when running Sanity on its own. I'm only getting the above error when mounting studio on a next.js route. (similar to this sample project https://github.com/sanity-io/sanity-template-nextjs-clean)

Hope this helps.

[lhendrysiak]

@kylesalstrom

Yeah, I noticed the same, but mounting on a next.js route is the recommended way for Sanity v3 + Next.js. So this issue should be addressed :)

[danteissaias]

Anyone find a fix for this?

[WolffDev]

Same problem here. Looks like the plugin is not build/exported to support NextJS module loader.

[WolffDev]

Found a temporary solution. Looked in the source code and realised it is a custom component passed to the slug type, inside the schema. Got it to work my creating the components files myself, and imported them into the schema - that seems to work. I am also using [email protected].

Samle code.

// top of the schemafile
import { SlugInput } from "../../components/slug-prefix";

// further down
...
{
      name: "slug",
      title: "Slug",
      type: "slug",
      validation: (Rule: Rule) => Rule.required(),
      components: {
        input: SlugInput,
      },
      options: {
        source: "title",
        maxLength: 96,
        urlPrefix: "/nyheder/",
        storeFullUrl: true,
      },
},

[modulareverything]

Further information that might help anyone else looking to do this:

1. Find the plugin in your node_modules folder (it should be called sanity-plugin-prefixed-slug)
2. Copy the src folder from here
3. Paste it into your project, something like a plugins folder will do the trick
4. Rename src to something like sanity-plugin-prefixed-slug
5. Import the SlugInput file you just created into the schema you want to use this component, like this:

import { SlugInput } from "plugins/sanity-plugin-prefixed-slug";

6. The rest of the instructions are the same as the README