Error: Warning: React.createElement: type is invalid #19
Comments
|
Hey @seandawn, This warning most of the time is related to improper imports/exports. In your case, it can related to the way you are importing the MD content. How did you set up your project to load markdown files? (As it is not supported by default, you can use Please provide more information to make it easier to reproduce the issue. |
|
Hi there, I've configured typescript to recognise md files as a string, and webpack to import it as source, which means it should just load the file contents, it's the new way instead of using raw-loader. webpack: (config) => { I'll try your way and report back. |
|
Okay, not sure what's happening now. I've set up MDX file handling as documented here - https://nextjs.org/docs/pages/building-your-application/configuring/mdx I've created an MDX file and I can import a MUI button component and it renders in my MDX component fine, but as soon as I wrap the MD text in I get this error: This is my MDX file: |
|
Thanks for your comments @seandawn, I need to find some free time to check and reproduce this issue. Also, can you tell whether you're using nextjs 13 or 14? |
|
I am using nextjs 13.5.6 I have a page set up like this: As MuiMarkdown uses useStyles I created a separate client component called ContentGuidelines like so: I then have this mdx file, I've removed the MD text as its sensitive: Putting the MD text into the {``} braces has removed the TypeError: t.replace is not a function error, but now it is displaying this again: Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object. ⨯ Internal error: Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. It does render the markdown correctly, but ideally I don't want my error log filling up with these warnings and errors, if you need anything else let me know. |
I got the same error with Next.js 14. ---EDIT --EDIT 2 // NOT WORKING DO NOT COPY
"use client";
import MarkdownRoot from "markdown-to-jsx";
import { getOverrides } from "mui-markdown";
interface Props {
children: string;
}
const _Markdown: React.FC<Props> = ({ children, ...props }) => {
return (
<MarkdownRoot
options={{
overrides: getOverrides(),
}}
>
{children}
</MarkdownRoot>
);
};This code doesn't work :(. So the problem is from --EDIT 3
--EDIT 4 WorkaroundSSR @/components/Markdown/Markdown.tsx "use client";
import { MuiMarkdownProps } from "mui-markdown";
import dynamic from "next/dynamic";
import React, { useEffect, useState } from "react";
const MuiMarkdown = dynamic(() => import("mui-markdown").then((x) => x.MuiMarkdown), { ssr: false });
type Props = Omit<MuiMarkdownProps, "children"> & { source: string } & React.PropsWithChildren;
const _Markdown: React.FC<Props> = ({ source, children, ...props }) => {
const muiMarkdown = <MuiMarkdown {...(props as any)}>{source}</MuiMarkdown>;
const [component, setComponent] = useState(children);
useEffect(() => {
setComponent(muiMarkdown);
}, []);
return component;
};
export const Markdown = _Markdown;page.tsx import { Markdown } from "@/components/Markdown/Markdown";
import MarkdownRoot from "markdown-to-jsx";
<Markdown source={"_markdown string here"}>
<MarkdownRoot>{"_markdown string here"}</MarkdownRoot>
</Markdown> |
|
I was hitting this with Next.js 13/14 as well. The cause was the MUI components not being imported correctly. When I dumped the object being passed to create element ( |
I have this component:
The component renders, and whatever markdown I pass it displays correctly, however this appears in the error log:
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.
at eval (webpack-internal:///(ssr)/./node_modules/@emotion/react/dist/emotion-element-6bdfffb2.esm.js:68:68)
at span (webpack-internal:///(ssr)/./node_modules/mui-markdown/dist/index.esm.js:21:5878)
at WEBPACK_DEFAULT_EXPORT (webpack-internal:///(ssr)/./node_modules/markdown-to-jsx/dist/index.module.js:7:13758)
at I (webpack-internal:///(ssr)/./node_modules/mui-markdown/dist/index.esm.js:21:7013)
at div
at eval (webpack-internal:///(ssr)/./node_modules/@emotion/react/dist/emotion-element-6bdfffb2.esm.js:68:68)
at Grid (webpack-internal:///(ssr)/./node_modules/@mui/system/Stack/createStack.js:147:24)
at ContentGuidelinesPage
at StaticGenerationSearchParamsBailoutProvider (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/static-generation-searchparams-bailout-provider.js:15:11)
Versions:
"@emotion/react": "^11.11.1",
"@emotion/styled": "^11.11.0",
"@mui/material": "^5.14.16",
"mui-markdown": "^1.1.11",
The text was updated successfully, but these errors were encountered: