Issue with querying references in Sanity v3.47 resolved

This isn't actually a v3.47-specific bug - you're running into Stega encoding, which is how Sanity's Visual Editing system works. The "Unexpected non-white character after JSON" error happens because Stega embeds invisible Unicode characters into string fields to enable click-to-edit overlays in preview/presentation mode.

These hidden characters break:

• String comparisons ('left' === 'left' returns false)
• JSON parsing when references contain encoded strings
• Any business logic that checks string values

The reason it "semi works" with single items but fails with arrays is likely because the Stega characters are corrupting the JSON structure when multiple references are serialized together.

Solutions

1. Filter out fields from Stega encoding (Recommended)

Configure your Sanity client to exclude specific fields you use in conditionals or business logic:

import { createClient } from '@sanity/client'

const client = createClient({
  // ... other config
  stega: {
    filter: (props) => {
      const { sourcePath, value } = props;
      
      // Exclude specific fields by name
      if (sourcePath.includes('imageLocation') || 
          sourcePath.includes('slug') ||
          sourcePath[0] === 'yourReferenceField') {
        return false;
      }
      
      // Exclude short strings (likely enums/keys)
      if (typeof value === 'string' && value.length < 50) {
        return false;
      }
      
      return props.filterDefault(props);
    }
  }
})

2. Use stegaClean() for comparisons

Wrap fields in stegaClean() when doing logic:

import { stegaClean } from '@sanity/client/stega'

if (stegaClean(imageLocation) === 'left') {
  // Now this works correctly
}

// For arrays of references
const cleanedRefs = references.map(ref => ({
  ...ref,
  someField: stegaClean(ref.someField)
}))

3. Disable Stega globally

Turn off Stega and use manual data attributes instead:

// Client config
const client = createClient({
  // ... other config
  stega: false
})

Then annotate your JSX manually:

<div data-sanity={encodeDataAttribute(['imageLocation'])}>
  {imageLocation === 'left' && <LeftLayout />}
</div>

Why this happens

Stega encoding is Sanity's way of embedding metadata into strings to enable visual editing overlays without requiring you to manually add data attributes everywhere. The tradeoff is that it breaks string equality checks. There's an extensive GitHub discussion where Sanity's team explains the design decisions and acknowledges the pain points.

The issue affects all versions using Visual Editing/Presentation mode, not just v3.47. If you just upgraded and started seeing this, you likely enabled these features or they became enabled by default in your setup.

For your specific case with reference arrays: The filter approach (option 1) is your best bet. Add your reference field names to the filter to prevent Stega encoding on them, which should fix both the JSON parsing errors and the comparison issues.