Property 'inline' does not exist on type 'ClassAttributes<HTMLElement> & HTMLAttributes<HTMLElement> & ExtraProps'. #1263
-
react: 18 this is similar to https://github.com/orgs/remarkjs/discussions/714, but not work for me . import { FC, memo } from 'react'
import ReactMarkdown, { Options } from 'react-markdown'
export const MemoizedReactMarkdown: FC<Options> = memo(
ReactMarkdown,
(prevProps, nextProps) =>
prevProps.children === nextProps.children &&
prevProps.className === nextProps.className
) error at inline / children.length /children[0] <div className="ml-4 flex-1 space-y-2 overflow-hidden px-1">
<MemoizedReactMarkdown
className="prose break-words dark:prose-invert prose-p:leading-relaxed prose-pre:p-0"
remarkPlugins={[remarkGfm, remarkMath]}
components={{
p({ children }) {
return <p className="mb-2 last:mb-0">{children}</p>
},
code({ node, inline, className, children, ...props }) {
if (children.length) {
if (children[0] == '▍') {
return (
<span className="mt-1 animate-pulse cursor-default">▍</span>
)
}
children[0] = (children[0] as string).replace('`▍`', '▍')
}
const match = /language-(\w+)/.exec(className || '')
if (inline) {
return (
<code className={className} {...props}>
{children}
</code>
)
}
return (
<CodeBlock
key={Math.random()}
language={(match && match[1]) || ''}
value={String(children).replace(/\n$/, '')}
{...props}
/>
)
}
}}
>
{message.content}
</MemoizedReactMarkdown>
<ChatMessageActions message={message} />
</div> [{
"resource": "/D:/work/chatgpt/yantaosong/chat-with-job-agent-clerk/components/chat-message.tsx",
"owner": "typescript",
"code": "2339",
"severity": 8,
"message": "Property 'inline' does not exist on type 'ClassAttributes<HTMLElement> & HTMLAttributes<HTMLElement> & ExtraProps'.",
"source": "ts",
"startLineNumber": 61,
"startColumn": 26,
"endLineNumber": 61,
"endColumn": 32
},{
"resource": "/D:/work/chatgpt/yantaosong/chat-with-job-agent-clerk/components/chat-message.tsx",
"owner": "typescript",
"code": "18049",
"severity": 8,
"message": "'children' is possibly 'null' or 'undefined'.",
"source": "ts",
"startLineNumber": 62,
"startColumn": 19,
"endLineNumber": 62,
"endColumn": 27
},{
"resource": "/D:/work/chatgpt/yantaosong/chat-with-job-agent-clerk/components/chat-message.tsx",
"owner": "typescript",
"code": "2339",
"severity": 8,
"message": "Property 'length' does not exist on type 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | PromiseLikeOfReactNode'.\n Property 'length' does not exist on type 'number'.",
"source": "ts",
"startLineNumber": 62,
"startColumn": 28,
"endLineNumber": 62,
"endColumn": 34
},{
"resource": "/D:/work/chatgpt/yantaosong/chat-with-job-agent-clerk/components/chat-message.tsx",
"owner": "typescript",
"code": "18049",
"severity": 8,
"message": "'children' is possibly 'null' or 'undefined'.",
"source": "ts",
"startLineNumber": 63,
"startColumn": 21,
"endLineNumber": 63,
"endColumn": 29
},{
"resource": "/D:/work/chatgpt/yantaosong/chat-with-job-agent-clerk/components/chat-message.tsx",
"owner": "typescript",
"code": "7053",
"severity": 8,
"message": "Element implicitly has an 'any' type because expression of type '0' can't be used to index type 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | PromiseLikeOfReactNode'.\n Property '0' does not exist on type 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | PromiseLikeOfReactNode'.",
"source": "ts",
"startLineNumber": 63,
"startColumn": 21,
"endLineNumber": 63,
"endColumn": 32
},{
"resource": "/D:/work/chatgpt/yantaosong/chat-with-job-agent-clerk/components/chat-message.tsx",
"owner": "typescript",
"code": "18049",
"severity": 8,
"message": "'children' is possibly 'null' or 'undefined'.",
"source": "ts",
"startLineNumber": 69,
"startColumn": 17,
"endLineNumber": 69,
"endColumn": 25
},{
"resource": "/D:/work/chatgpt/yantaosong/chat-with-job-agent-clerk/components/chat-message.tsx",
"owner": "typescript",
"code": "7053",
"severity": 8,
"message": "Element implicitly has an 'any' type because expression of type '0' can't be used to index type 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | PromiseLikeOfReactNode'.\n Property '0' does not exist on type 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | PromiseLikeOfReactNode'.",
"source": "ts",
"startLineNumber": 69,
"startColumn": 17,
"endLineNumber": 69,
"endColumn": 28
},{
"resource": "/D:/work/chatgpt/yantaosong/chat-with-job-agent-clerk/components/chat-message.tsx",
"owner": "typescript",
"code": "18049",
"severity": 8,
"message": "'children' is possibly 'null' or 'undefined'.",
"source": "ts",
"startLineNumber": 69,
"startColumn": 32,
"endLineNumber": 69,
"endColumn": 40
},{
"resource": "/D:/work/chatgpt/yantaosong/chat-with-job-agent-clerk/components/chat-message.tsx",
"owner": "typescript",
"code": "7053",
"severity": 8,
"message": "Element implicitly has an 'any' type because expression of type '0' can't be used to index type 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | PromiseLikeOfReactNode'.\n Property '0' does not exist on type 'string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | PromiseLikeOfReactNode'.",
"source": "ts",
"startLineNumber": 69,
"startColumn": 32,
"endLineNumber": 69,
"endColumn": 43
}]
|
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 5 replies
-
Welcome @sytpb! 👋 Could you use code blocks with the language specified and code run through a formatter?
I can't read your example as is. Also consider using a sandbox like:
So that others can replicate what you are seeing. In addition please see https://github.com/remarkjs/.github/blob/main/support.md for recommendations on how to frame the question so others can more easily help you. |
Beta Was this translation helpful? Give feedback.
Please see the changelog
inline
was removed as a property in version 9: https://github.com/remarkjs/react-markdown/blob/main/changelog.md#remove-extra-props-passed-to-certain-componentsIt also helps to search before posting, this has been asked before: