Get help on Discord

Import sanity.json fails in custom action - missing json-loader?

4 replies
Last updated: Dec 1, 2025
Hello again!
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
      })
And I am seeing the following error:

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-loader
may 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-loader
and if so, how do I do that?
Thank you!
AI Update

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:

  1. Don't use useCdn: true in document actions - You want fresh data when working with document operations, not cached data. Use client.withConfig({useCdn: false}) if you need to explicitly disable it.

  2. The client is already authenticated - It will use the current user's session, so you don't need to worry about tokens.

  3. Consider upgrading to Studio v3 - If you have the opportunity, Studio v3 uses a more modern approach with the useClient hook from the sanity package, which is cleaner and more React-friendly. But for v2, the part: 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 thread
4 replies

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.

Get started for freeExplore the demo

Was this answer helpful?