Import sanity.json fails in custom action - missing json-loader?
I am trying to use the sanity client to fetch a field from another document while inside a publish action. To get the required api configuration information, I am trying to import the sanity.json file into my action. I have the following code:
import {useState, useEffect} from 'react'
import {useDocumentOperation} from '@sanity/react-hooks'
import sanityClient from '@sanity/client'
import sanityConfig from '../../sanity.json'
export default function SetSlugAndPublishAction(props) {const client = sanityClient({
projectId: sanityConfig.api.projectId,
dataset: sanityConfig.api.dataset,
token: sanityConfig.api.token,
useCdn: true
})Compiling...
Failed to compile.
Error in ./sanity.json
Syntax error: /Users/keneucker/Dev/biketag-sanity/studio/sanity.json: Missing semicolon (2:8)
1 | {
> 2 | "root": true,I assume, from my limited googling, that the issue here is that the plugin
json-loadermay not be included in the project. I went digging for compilation config files to see where I could include this, but I done got myself lost now. 🧑💻
Is this breaking some convention in place that I should be aware of? Am I just doing it wrong? Do I need to add
json-loaderand if so, how do I do that?
Thank you!
You're on Studio v2 (I can tell from your use of @sanity/react-hooks and the sanity.json file), and trying to import JSON directly won't work because of webpack configuration issues. The good news is you don't need to mess with json-loader at all!
For Studio v2, the correct approach is to import the pre-configured client that Studio already provides. Here's how to fix your code:
import {useState, useEffect} from 'react'
import {useDocumentOperation} from '@sanity/react-hooks'
import client from 'part:@sanity/base/client'
export default function SetSlugAndPublishAction(props) {
// client is already configured with your projectId, dataset, and auth
// Just use it directly!
// If you need to customize it (like disabling CDN):
const clientWithoutCdn = client.withConfig({useCdn: false})
// ... rest of your action code
}The key is using import client from 'part:@sanity/base/client' - this gives you a fully configured Sanity client instance that already knows your project ID, dataset, and has the proper authentication set up from your Studio configuration. No need to import sanity.json or manually configure anything.
Important notes:
Don't use
useCdn: truein document actions - You want fresh data when working with document operations, not cached data. Useclient.withConfig({useCdn: false})if you need to explicitly disable it.The client is already authenticated - It will use the current user's session, so you don't need to worry about tokens.
Consider upgrading to Studio v3 - If you have the opportunity, Studio v3 uses a more modern approach with the useClient hook from the
sanitypackage, which is cleaner and more React-friendly. But for v2, thepart:import is the correct approach.
This avoids all the webpack/JSON loader issues entirely because you're working with Studio's built-in module system rather than trying to import raw JSON files.
Show original thread4 replies
Was this answer helpful?
Sanity – Build the way you think, not the way your CMS thinks
Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.
