Get help on Discord

Error when using portable text fields within sanity-plugin-internationalized-array

7 replies
Last updated: Aug 23, 2023
Error when using portable text (array of type block) fields within sanity-plugin-internationalized-array I am experiencing an error when editing formattable text within internationalized arrays. The studio runs and the fields appear without issues, but when editing the text I get the following error when attempting to edit the field:

Uncaught error: Cannot resolve a Slate point from DOM point: [object Text]
This is how the field is set up:
export const internationalizedArrayConfig = {
    languages,
    fieldTypes: [
        'string',
        defineField({
            name: 'formattedText',
            type: 'array',
            of: [{type: 'block'}]
        })
    ],
}

const plugins = [
  internationalizedArray(internationalizedArrayConfig),
]

// Inside the schema
		defineField({
			name: "formattedTextField",
			title: "Weight example",
			type: "internationalizedArrayFormattedText",
		}),
I do not get any issues with string fields of type
internationalizedArrayString, so the problem seems related to the default portable text editor and that it may be incompatible with the internationalized array plugin. Do you know of any fixes or workarounds?
AI Update

The "Cannot resolve a Slate point from DOM point" error you're experiencing with portable text fields inside sanity-plugin-internationalized-array is a known compatibility issue that was fixed in later versions of the plugin.

The Solution

Update your sanity-plugin-internationalized-array to the latest version. The issue was resolved in version 1.10.1 and later.

In your package.json, change:

"sanity-plugin-internationalized-array": "^1.6.2"

To:

"sanity-plugin-internationalized-array": "^1.10.1"

Then run npm install or your package manager equivalent.

Why This Happens

The error occurs because older versions of the plugin (like 1.6.2) had compatibility issues with Sanity's Portable Text editor, which uses Slate under the hood. The Slate editor couldn't properly resolve DOM points when wrapped inside the internationalized array structure.

The caret notation (^) in your version string "^1.6.2" means npm will only install minor and patch updates within the 1.6.x range, which is why you weren't automatically getting version 1.10.1 even though it was available.

Verification

After updating, you should be able to edit your formatted text fields without encountering the Slate error. String fields continue to work because they use a simpler input component that doesn't involve the complex Slate editor.

If you're still experiencing issues after updating to the latest version, make sure you're also running a compatible version of Sanity Studio (v3.14.4 or later should work fine with the updated plugin).

👋 What version of the Studio and the plugin are you using?
Hi! I'm using version 1.6.2 of the plugin, and Sanity version 3.14.4.
Here is the full dependency list:

	"dependencies": {
		"@sanity/document-internationalization": "^2.0.0",
		"@sanity/eslint-config-studio": "^2.0.1",
		"@sanity/orderable-document-list": "^1.0.4",
		"@sanity/ui": "^1.5.0",
		"@sanity/vision": "^3.12.0",
		"eslint": "^8.6.0",
		"lodash": "^4.17.21",
		"prop-types": "^15.8.1",
		"react": "^18.2.0",
		"react-dom": "^18.2.0",
		"sanity": "^3.14.4",
		"sanity-plugin-internationalized-array": "^1.6.2",
		"sanity-plugin-workflow": "^1.0.1",
		"styled-components": "^5.2.0"
	},
Can you try updating to the latest version to see if it still happens?
That fixed it! I mistakenly thought I was using the latest version with "^1.6.2", but setting it to "1.10.1" fixed it. Thank you so much!
Glad it was such an easy fix!
user M
I’m having the same
user N
’s issue while trying to customize a richText field with 
renderInput
. This is not related to s`anity-plugin-internationalized-array` in my case, while I’m usin`g @sanity/language-filter` for that. Any suggestion?
"dependencies": {
    "@dnd-kit/core": "^6.0.6",
    "@dnd-kit/sortable": "^7.0.1",
    "@dnd-kit/utilities": "^3.2.1",
    "@portabletext/to-html": "^1.0.4",
    "@sanity/cli": "^2.32.0",
    "@sanity/eslint-config-studio": "^2.0.0",
    "@sanity/language-filter": "^3.2.1",
    "@sanity/production-preview": "^2.29.3",
    "@sanity/schema": "^3.15.1",
    "@sanity/ui": "^1.7.8",
    "@sanity/vision": "^3.15.1",
    "algoliasearch": "^4.14.2",
    "cli-progress": "^3.11.2",
    "deepl-node": "^1.7.2",
    "dom-parser": "^0.1.6",
    "eslint": "^8.6.0",
    "htm": "^3.1.1",
    "jsdom": "^20.0.3",
    "json-to-ndjson": "^0.0.1",
    "node-fetch": "^2.6.7",
    "prop-types": "^15.8.1",
    "react": "^18.2.0",
    "react-country-flag": "^3.0.2",
    "react-dom": "^18.2.0",
    "react-icons": "^4.4.0",
    "react-instantsearch-hooks-web": "^6.32.1",
    "react-is": "^18.2.0",
    "sanity": "^3.15.1",
    "sanity-plugin-hotspot-array": "^1.0.1",
    "sanity-plugin-html-to-portable-text": "^0.0.7",
    "sanity-plugin-iframe-pane": "^1.1.1",
    "sanity-plugin-media": "^2.2.2",
    "slugify": "^1.6.5",
    "styled-components": "^5.2.0",
    "vhtml": "^2.2.0"
  },
  "devDependencies": {
    "@sanity/types": "^2.31.1",
    "prettier": "^2.7.1"
  }

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?