SyntaxError: Invalid or unexpected token in a Next + JS setup

[mcbrwr]

When in a NextJS project with JS configured instead of TS the plugin fails with an error: SyntaxError: Invalid or unexpected token

To reproduce:

Start a new NextJS project without Typescript:

npx create-next-app@latest visual_options_test --eslint --app --src-dir --use-yarn --no-tailwind

✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to customize the default import alias? … No / Yes

Then cd into that dir and create sanity project, also without TypeScript:

# npm create sanity@latest

? Would you like to add configuration files for a Sanity project in this Next.js folder? Yes
? Do you want to use TypeScript? No
? Would you like an embedded Sanity Studio? Yes
? Would you like to use the Next.js app directory for routes? No
? What route do you want to use for the Studio? /studio
? Select project template to use Clean project with no predefined schemas
? Would you like to add the project ID and dataset to your .env file? Yes

Add a simple schema with just a title in /sanity/schema.js

export const schema = {
  types: [
    {
      name: "post",
      type: "document",
      title: "Post",
      fields: [
        {
          name: "title",
          type: "string",
          title: "Title",
        },
      ],
    },
  ],
};

Add the plugin to the project:

yarn add sanity-plugin-visual-options

And add it to the sanity config:

/**
 * This configuration is used to for the Sanity Studio that’s mounted on the `/pages/studio/[[...index]].jsx` route
 */

import { visionTool } from "@sanity/vision";
import { defineConfig } from "sanity";
import { deskTool } from "sanity/desk";

// Go to https://www.sanity.io/docs/api-versioning to learn how API versioning works
import { apiVersion, dataset, projectId } from "./sanity/env";
import { schema } from "./sanity/schema";
import { visualOptions } from "sanity-plugin-visual-options";

export default defineConfig({
  basePath: "/studio",
  projectId,
  dataset,
  // Add and edit the content schema in the './sanity/schema' folder
  schema,
  plugins: [
    deskTool(),
    visualOptions(),
    // Vision is a tool that lets you query your content with GROQ in the studio
    // https://www.sanity.io/docs/the-vision-plugin
    visionTool({ defaultApiVersion: apiVersion }),
  ],
});

Run the server and load the /studio url. It crashes with an "unexpected token" error:

Note:

When running this reproduction commands and choosing "Typescript: Yes" in both Next and Sanity the setup does work.

[nicktaylor]

Hi @mcbrwr, I'm assuming based on the date of this post that it's installed v2.0.0 of the plugin, is that correct? Thanks!

[MattWIP]

Hi @mcbrwr, I'm assuming based on the date of this post that it's installed v2.0.0 of the plugin, is that correct? Thanks!

Hey @nicktaylor I'm not the original poster but stumbled across this because I am also experiencing this issue. I am using ^2.0.1

[nicktaylor]

Thanks @MattWIP I've managed to replicate this, but haven't discovered what's causing the underlying issue yet. I've been a bit tight on time to try and resolve this.

A PR would be very welcome if you know what the issue might be. Thanks.

[nicktaylor]

Hi @MattWIP / @mcbrwr, this should now be resolved in version 2.0.2. Please let me know if you are still having issues. Thanks a lot for reporting.