-
My goal: integrate the portableTextEditor playground to Retool as custom component.
-
Issue: Encountered error
error
Error while importing custom component
error
:
TypeError: Failed to resolve module specifier "react/compiler-runtime". Relative references must start with either "/", "./", or "../". at XS (https://retool-edge.com/libs/custom-component-collections.DS9AhuXc.umd.js:202:3546) at https://retool-edge.com/libs/custom-component-collections.DS9AhuXc.umd.js:202:2785
message
:
"Failed to resolve module specifier \"react/compiler-runtime\". Relative references must start with either \"/\", \"./\", or \"../\"."
stack
:
"TypeError: Failed to resolve module specifier \"react/compiler-runtime\". Relative references must start with either \"/\", \"./\", or \"../\".\n at XS (https://retool-edge.com/libs/custom-component-collections.DS9AhuXc.umd.js:202:3546)\n at https://retool-edge.com/libs/custom-component-collections.DS9AhuXc.umd.js:202:2785"
- Steps to reproduce:
- In the portableTextEditor playground git git, copy the necessary folders/files to your repo: (components, plugins, primitives, toolbar, editor.css, editor.tsx, schema.tsx)
this is my index.tsx file code
import { useEffect, useState, type FC } from 'react'
import { Retool } from '@tryretool/custom-component-support'
import {
EditorProvider,
PortableTextEditable,
} from '@portabletext/editor'
import { schemaDefinition } from './portable-text-editor/schema'
import { PortableTextToolbar } from './portable-text-editor/toolbar/portable-text-toolbar'
import { renderAnnotation, renderBlock, renderDecorator, renderListItem, renderPlaceholder, renderStyle, LinkPlugin } from './portable-text-editor/editor'
import { Container } from './portable-text-editor/primitives/container'
import { ImageDeserializerPlugin } from './portable-text-editor/plugins/plugin.image-deserializer'
import './portable-text-editor/editor.css'
export const PortableTextEditor: FC = () => {
return (
<div className="grid gap-2 items-start grid-cols-1 p-2 shadow-sm">
<EditorProvider
initialConfig={{
schemaDefinition
}}
>
<Container className="flex flex-col gap-4 overflow-clip">
<PortableTextToolbar /> //this line causes the error
<div className="flex gap-2 items-center">
<PortableTextEditable
className={`rounded-b-md outline-none data-[read-only=true]:opacity-50 px-2 h-75 -mx-2 -mb-2 overflow-auto flex-1`}
renderAnnotation={renderAnnotation}
renderBlock={renderBlock}
renderDecorator={renderDecorator}
renderListItem={renderListItem}
renderPlaceholder={renderPlaceholder}
renderStyle={renderStyle}
/>
</div>
</Container>
<LinkPlugin />
<ImageDeserializerPlugin />
</EditorProvider>
</div>
)
};
When commenting out the <PortableTextToolbar />, there are no error and it properly loads the component in retool but without the Toolbar.
The same code I used in a separate vite app which works perfectly.
