SingleMediaEditor doesn't work with JSON object field type

[drager]

Hey, I'm trying to use the SingleMediaEditor in an custom contentful extension with a field type that is JSON object but it throws the following error:

Uncaught TypeError: value.sys is undefined
    SingleReferenceEditor SingleReferenceEditor.tsx:84
    render FieldConnector.ts:138
    React 16
    parcelRequire<["index.tsx"]</< index.tsx:29
    j cf-extension-api.js:1
    promise callback*parcelRequire<["../node_modules/contentful-ui-extensions-sdk/dist/cf-extension-api.js"]</</j< cf-extension-api.js:1
    parcelRequire<["index.tsx"]< index.tsx:28
    newRequire src.f69400ca.js:47
    parcelRequire src.f69400ca.js:81
    <anonymous> src.f69400ca.js:120
SingleReferenceEditor.tsx:84:12
The above error occurred in the <FieldConnector> component:
    in FieldConnector (created by ReferenceEditor)
    in Constate (created by ReferenceEditor)
    in ReferenceEditor (created by SingleReferenceEditor)
    in SingleReferenceEditor (created by SingleMediaEditor)
    in SingleMediaEditor
    in div (created by Form)
    in form (created by Form)
    in Form
    in Unknown

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries. react-dom.development.js:19527:12

That is here: https://github.com/contentful/field-editors/blob/3dc7130a751de690903c572edfcdfdf3587b57bf/packages/reference/src/common/SingleReferenceEditor.tsx#L84

Here's the sample app code:

import * as React from 'react';
import { render } from 'react-dom';
import { init, FieldExtensionSDK } from 'contentful-ui-extensions-sdk';
import { GlobalStyles } from '@contentful/f36-components';
import { Form } from '@contentful/forma-36-react-components';
import '@contentful/forma-36-react-components/dist/styles.css';
import { SingleMediaEditor } from '@contentful/field-editor-reference';

export const App = ({ sdk }: { sdk: FieldExtensionSDK }) => {
  console.log('sdk', sdk);

  return (
    <Form>
      <SingleMediaEditor
        viewType="card"
        sdk={sdk}
        parameters={{
          instance: {
            showCreateEntityAction: true,
            showLinkEntityAction: true,
          },
        }}
      />
    </Form>
  );
};

init(sdk => {
  render(
    <>
      <GlobalStyles />
      <App sdk={sdk as FieldExtensionSDK} />
    </>,
    document.getElementById('root')
  );
});

{
  "devDependencies": {
    "@babel/core": "7.12.3",
    "@babel/plugin-transform-runtime": "7.12.1",
    "@babel/preset-env": "7.12.1",
    "@babel/preset-react": "7.12.1",
    "@contentful/contentful-extension-scripts": "0.21.0",
    "@contentful/eslint-config-extension": "0.4.3",
    "@types/jest": "26.0.15",
    "@types/react": "16.9.56",
    "@types/react-dom": "16.9.9",
    "@types/webpack-env": "1.15.3",
    "contentful-cli": "1.4.48",
    "cssnano": "4.1.10",
    "eslint": "7.12.1",
    "typescript": "4.0.5"
  },
  "scripts": {
    "start": "rm -rf build && contentful-extension-scripts start",
    "build": "rm -rf build && contentful-extension-scripts build",
    "lint": "eslint ./ --ext .js,.jsx,.ts,.tsx && tsc -p ./ --noEmit",
    "test": "contentful-extension-scripts test --env=jsdom --watch",
    "test:coverage": "contentful-extension-scripts test --env=jsdom --coverage",
    "deploy": "npm run build && contentful extension update --force",
    "configure": "contentful space use && contentful space environment use",
    "login": "contentful login",
    "logout": "contentful logout",
    "help": "contentful-extension-scripts help"
  },
  "resolutions": {
    "parcel-bundler": "1.12.3"
  },
  "dependencies": {
    "@contentful/browserslist-config": "^2.0.0",
    "@contentful/field-editor-date": "^1.0.1",
    "@contentful/field-editor-reference": "^2.21.2",
    "@contentful/forma-36-fcss": "^0.3.4",
    "@contentful/forma-36-react-components": "3.100.2",
    "@contentful/forma-36-tokens": "^0.11.1",
    "contentful-ui-extensions-sdk": "4.3.1",
    "react": "16.14.0",
    "react-dom": "16.14.0"
  },
  "browserslist": [
    "last 5 Chrome version",
    "> 1%",
    "not ie <= 11"
  ]
}

[drager]

Changed it into an app instead but I get the same issue. Perhaps the problem is the content type that I'm using? Doesn't it support the JSON object field type?

[drager]

Seems to be working fine with Text and Rich text field types.

[torreshernandez]

Hey @drager, how did you solve the issue? I'm facing the same limitation.

[flavigneseedbox]

I have the same issue, still looking for a solution.

[drager]

I didn't need to fix it anymore. I went and used an other field type. But my pr ☝️ got it working for SingleMediaEditor.

[leighwhite96]

Hi @drager - any plans to update your PR? Also experiencing the same issue :)

[github-actions[bot]]

Marking issue as stale since there was no acitivty for 30 days

[aaron5670]

I have the same issue, also looking for a solution.

Current error

function Field() {
  const sdk = useSDK<FieldExtensionSDK>();

  return (
      <SingleMediaEditor
        viewType="link"
        sdk={sdk}
        isInitiallyDisabled={false}
        parameters={{
          instance: {
            showCreateEntityAction: false,
            showLinkEntityAction: true,
          },
        }}
      />
  );
}

export default Field;

[github-actions[bot]]

Marking issue as stale since there was no acitivty for 30 days

[CarlLavoieNcr]

Ran into the same issue. In my case the problem was that the field is configured as a multi media / multi reference but the editor is a singleMediaEditor. Updating the field or the editor fixed it.

[github-actions[bot]]

Marking issue as stale since there was no activity for 30 days