Skip to content

"Cannot use import statement outside a module" when using the module with Vite #8

Open
@johan-jnn

Description

@johan-jnn

Issue

When using sanity-plugin-singleton-tools with vite (+ svelte but i'm not sure it's related), I get a SyntaxError: Cannot use import statement outside a module.

Reproduction

Create a vite + sanity project (without bundlers as modules).
I'm using this configuration :

// sanity.config.ts

import { defineConfig } from "sanity";
import { structureTool } from "sanity/structure";
import { codeInput } from "@sanity/code-input";
import { dataset, projectId } from "./config.json";
import { singletonTools } from "sanity-plugin-singleton-tools";

export default defineConfig({
  projectId,
  dataset,
  basePath: "/studio",
  plugins: [structureTool(), codeInput(), singletonTools()],
  schema: {
    // ...
  },
  form: {},
});
// vite.config.ts

import { sveltekit } from "@sveltejs/kit/vite";
import { defineConfig } from "vite";

export default defineConfig({
  plugins: [sveltekit()],
  envPrefix: ["ENV_", "SANITY_STUDIO_"],
  css: {
    preprocessorOptions: {
      sass: {
        silenceDeprecations: ["legacy-js-api"],
      },
    },
  },
});

Note : I have no typing error using these configurations.
Error shown in the console :

C:\...\project_folder\node_modules\sanity-plugin-singleton-tools\dist\index.esm.js:1
import { DocumentIcon } from "@sanity/icons";
^^^^^^

SyntaxError: Cannot use import statement outside a module
    at wrapSafe (node:internal/modules/cjs/loader:1281:20)
    at Module._compile (node:internal/modules/cjs/loader:1321:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1416:10)
    at Module.load (node:internal/modules/cjs/loader:1208:32)
    at Module._load (node:internal/modules/cjs/loader:1024:12)
    at cjsLoader (node:internal/modules/esm/translators:348:17)
    at ModuleWrap.<anonymous> (node:internal/modules/esm/translators:297:7)
    at ModuleJob.run (node:internal/modules/esm/module_job:222:25)
    at async ModuleLoader.import (node:internal/modules/esm/loader:316:24)
    at async nodeImport (file:///C:/.../project_folder/node_modules/vite/dist/node/chunks/dep-BWSbWtLw.js:53056:15)

Dependencies versions

{
	"devDependencies": {
		"@portabletext/svelte": "^2.1.11",
		"@sveltejs/adapter-auto": "^3.3.1",
		"@sveltejs/kit": "^2.8.0",
		"@sveltejs/vite-plugin-svelte": "^4.0.0",
		"@types/gsap": "^3.0.0",
		"dotenv": "^16.4.5",
		"sass": "^1.80.6",
		"svelte": "^5.1.12",
		"svelte-check": "^4.0.6",
		"typescript": "^5.6.3",
		"vite": "^5.4.10"
	},
	"dependencies": {
		"@danteissaias/groq-builder": "^0.9.2",
		"@sanity/client": "^6.22.3",
		"@sanity/code-input": "^4.1.4",
		"@types/three": "^0.169.0",
		"gsap": "^3.12.5",
		"postprocessing": "^6.36.4",
		"sanity": "^3.63.0",
		"sanity-plugin-singleton-tools": "^1.1.0",
		"svelte-highlight": "^7.7.0",
		"three": "^0.170.0"
	}
}

Solutions

I manage to fix this issue by remove by hands the exports property on the module's package.json.
I didn't found another way to fix it. I'm not a pro of configuring this file but is this property very important ? (When removing it I had no typing issues, but the module is function as well as it should)


Last thing :
I didn't found any issue like this one on Internet (forums, docs, ...)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions