Property 'inline' does not exist on type 'ClassAttributes<HTMLElement> & HTMLAttributes<HTMLElement> & ExtraProps'.

[sytpb]

react: 18
nextjs: 14
typescript: 5

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
}]

[ChristianMurphy]

Welcome @sytpb! 👋
Sorry you ran into a spot of trouble.

Could you use code blocks with the language specified and code run through a formatter?
See:

• https://docs.github.com/en/get-started/writing-on-github/working-with-advanced-formatting/creating-and-highlighting-code-blocks#syntax-highlighting for highlighting info
• https://prettier.io/playground/ for formatting

I can't read your example as is.

Also consider using a sandbox like:

• https://codesandbox.io/s/github/remarkjs/.github/tree/main/sandbox-templates/react-markdown-with-vite
• or https://stackblitz.com/github/remarkjs/.github/tree/main/sandbox-templates/react-markdown-with-vite

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.

[ChristianMurphy]

@sytpb thanks for adding syntax highlight.
Now that I can actually read the code:

1. what version of react markdown are you using?
2. what other libraries are you injecting on the page?
3. what is your typescript configuration?

The above information would be best shared in a sandbox, see the links above.

[sytpb]

Appreciate for your reply , this is my package.json

{
  "name": "n14-clerk",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@clerk/nextjs": "^4.27.1",
    "@radix-ui/react-alert-dialog": "1.0.4",
    "@radix-ui/react-avatar": "1.0.4",
    "@radix-ui/react-dialog": "1.0.4",
    "@radix-ui/react-dropdown-menu": "^2.0.5",
    "@radix-ui/react-label": "^2.0.2",
    "@radix-ui/react-select": "^1.2.2",
    "@radix-ui/react-separator": "^1.0.3",
    "@radix-ui/react-slot": "^1.0.2",
    "@radix-ui/react-switch": "^1.0.3",
    "@radix-ui/react-tooltip": "^1.0.6",
    "ai": "^2.2.25",
    "class-variance-authority": "^0.7.0",
    "framer-motion": "^10.16.5",
    "next": "14.0.3",
    "openai": "^4.20.0",
    "react": "^18",
    "react-dom": "^18",
    "react-hot-toast": "^2.4.1",
    "react-intersection-observer": "^9.5.3",
    "react-markdown": "^9.0.1",
    "react-syntax-highlighter": "^15.5.0",
    "react-textarea-autosize": "^8.5.3",
    "remark-gfm": "^4.0.0",
    "remark-math": "^6.0.0",
    "tailwind-merge": "^2.0.0"
  },
  "devDependencies": {
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.0.1",
    "eslint": "^8",
    "eslint-config-next": "14.0.3",
    "postcss": "^8",
    "prettier": "^3.1.0",
    "prettier-plugin-tailwindcss": "^0.5.7",
    "tailwindcss": "^3.3.0",
    "typescript": "^5"
  }
}

[sytpb]

"react-markdown": "^9.0.1", "typescript": "^5"

[ChristianMurphy]

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-components

It also helps to search before posting, this has been asked before:

• https://github.com/orgs/remarkjs/discussions/1237
• Cannot run the code after upgrading the library: missing property code.inline and changed the type of p.ref react-markdown#776

[sytpb]

@ChristianMurphy thanks very much, haven't searched some about this, learning a lot,