Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Using Markdown tables causes warning about defaultProps #14

Closed
alyphen opened this issue Aug 5, 2023 · 2 comments
Closed

Using Markdown tables causes warning about defaultProps #14

alyphen opened this issue Aug 5, 2023 · 2 comments
Labels
bug Something isn't working

Comments

@alyphen
Copy link

alyphen commented Aug 5, 2023 •
edited

Describe the bug
Pass a Markdown table into a MuiMarkdown component, e.g.:

<MuiMarkdown>
        {`
        | a | b | c |
        |---|---|---|
        | d | e | f |
        `}
</MuiMarkdown>

The following error is printed:

Warning: Styled(ForwardRef(Table)): Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.
    at eval (webpack-internal:///(ssr)/./node_modules/@emotion/react/dist/emotion-element-6bdfffb2.esm.js:68:68)
    at div
    at eval (webpack-internal:///(ssr)/./node_modules/@emotion/react/dist/emotion-element-6bdfffb2.esm.js:68:68)
    at Box (webpack-internal:///(ssr)/./node_modules/@mui/system/createBox.js:31:41)
    at eval (webpack-internal:///(ssr)/./node_modules/@emotion/react/dist/emotion-element-6bdfffb2.esm.js:68:68)
    at table (webpack-internal:///(ssr)/./node_modules/mui-markdown/dist/index.esm.js:11:6286)
    at div
    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:11:7165)
    at div
    at Markdown (webpack-internal:///(ssr)/./src/components/Markdown/Markdown.tsx:13:21)
    at Lazy
    at div
    at eval (webpack-internal:///(ssr)/./node_modules/@emotion/react/dist/emotion-element-6bdfffb2.esm.js:68:68)
    at Paper (webpack-internal:///(ssr)/./node_modules/@mui/material/node/Paper/Paper.js:69:44)
    at Lazy
    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/Unstable_Grid/createGrid.js:63:41)
    at Lazy
    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/Unstable_Grid/createGrid.js:63:41)
    at Lazy
    at div
    at eval (webpack-internal:///(ssr)/./node_modules/@emotion/react/dist/emotion-element-6bdfffb2.esm.js:68:68)
    at Paper (webpack-internal:///(ssr)/./node_modules/@mui/material/node/Paper/Paper.js:69:44)
    at Lazy
    at InnerLayoutRouter (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:227:11)
    at RedirectErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:72:9)
    at RedirectBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:80:11)
    at NotFoundBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/not-found-boundary.js:62:11)
    at LoadingBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:323:11)
    at ErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/error-boundary.js:103:11)
    at InnerScrollAndFocusHandler (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:139:9)
    at ScrollAndFocusHandler (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:214:11)
    at RenderFromTemplateContext (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/render-from-template-context.js:15:44)
    at Lazy
    at OuterLayoutRouter (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:332:11)
    at Lazy
    at InnerLayoutRouter (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:227:11)
    at RedirectErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:72:9)
    at RedirectBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:80:11)
    at NotFoundBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/not-found-boundary.js:62:11)
    at LoadingBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:323:11)
    at ErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/error-boundary.js:103:11)
    at InnerScrollAndFocusHandler (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:139:9)
    at ScrollAndFocusHandler (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:214:11)
    at RenderFromTemplateContext (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/render-from-template-context.js:15:44)
    at Lazy
    at OuterLayoutRouter (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:332:11)
    at Lazy
    at InnerLayoutRouter (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:227:11)
    at RedirectErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:72:9)
    at RedirectBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:80:11)
    at NotFoundBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/not-found-boundary.js:62:11)
    at LoadingBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:323:11)
    at ErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/error-boundary.js:103:11)
    at InnerScrollAndFocusHandler (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:139:9)
    at ScrollAndFocusHandler (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:214:11)
    at RenderFromTemplateContext (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/render-from-template-context.js:15:44)
    at Lazy
    at OuterLayoutRouter (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:332:11)
    at Lazy
    at body
    at html
    at ThemeProvider (webpack-internal:///(ssr)/./node_modules/@mui/private-theming/node/ThemeProvider/ThemeProvider.js:39:5)
    at ThemeProvider (webpack-internal:///(ssr)/./node_modules/@mui/system/ThemeProvider/ThemeProvider.js:50:5)
    at ThemeProvider (webpack-internal:///(ssr)/./node_modules/@mui/material/node/styles/ThemeProvider.js:21:14)
    at Lazy
    at RedirectErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:72:9)
    at RedirectBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:80:11)
    at ReactDevOverlay (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:66:9)
    at HotReload (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:327:11)
    at Router (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/app-router.js:145:11)
    at ErrorBoundaryHandler (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/error-boundary.js:77:9)
    at ErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/error-boundary.js:103:11)
    at AppRouter (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/app-router.js:382:13)
    at Lazy
    at Lazy
    at ServerComponentWrapper (/home/ren/Documents/arvandor/arvandor.net/node_modules/next/dist/server/app-render/create-server-components-renderer.js:78:31)
    at ServerComponentWrapper (/home/ren/Documents/arvandor/arvandor.net/node_modules/next/dist/server/app-render/create-server-components-renderer.js:78:31)
    at InsertedHTML (/home/ren/Documents/arvandor/arvandor.net/node_modules/next/dist/server/app-render/app-render.js:893:33)
Warning: Styled(ForwardRef(TableCell)): Support for defaultProps will be removed from function components in a future major release. Use JavaScript default parameters instead.
    at eval (webpack-internal:///(ssr)/./node_modules/@emotion/react/dist/emotion-element-6bdfffb2.esm.js:68:68)
    at tr
    at eval (webpack-internal:///(ssr)/./node_modules/@emotion/react/dist/emotion-element-6bdfffb2.esm.js:68:68)
    at TableRow (webpack-internal:///(ssr)/./node_modules/@mui/material/node/TableRow/TableRow.js:70:44)
    at eval (webpack-internal:///(ssr)/./node_modules/@emotion/react/dist/emotion-element-6bdfffb2.esm.js:68:68)
    at thead
    at eval (webpack-internal:///(ssr)/./node_modules/@emotion/react/dist/emotion-element-6bdfffb2.esm.js:68:68)
    at TableHead (webpack-internal:///(ssr)/./node_modules/@mui/material/node/TableHead/TableHead.js:44:44)
    at eval (webpack-internal:///(ssr)/./node_modules/@emotion/react/dist/emotion-element-6bdfffb2.esm.js:68:68)
    at table
    at eval (webpack-internal:///(ssr)/./node_modules/@emotion/react/dist/emotion-element-6bdfffb2.esm.js:68:68)
    at Table (webpack-internal:///(ssr)/./node_modules/@mui/material/node/Table/Table.js:61:44)
    at eval (webpack-internal:///(ssr)/./node_modules/@emotion/react/dist/emotion-element-6bdfffb2.esm.js:68:68)
    at div
    at eval (webpack-internal:///(ssr)/./node_modules/@emotion/react/dist/emotion-element-6bdfffb2.esm.js:68:68)
    at Box (webpack-internal:///(ssr)/./node_modules/@mui/system/createBox.js:31:41)
    at eval (webpack-internal:///(ssr)/./node_modules/@emotion/react/dist/emotion-element-6bdfffb2.esm.js:68:68)
    at table (webpack-internal:///(ssr)/./node_modules/mui-markdown/dist/index.esm.js:11:6286)
    at div
    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:11:7165)
    at div
    at Markdown (webpack-internal:///(ssr)/./src/components/Markdown/Markdown.tsx:13:21)
    at Lazy
    at div
    at eval (webpack-internal:///(ssr)/./node_modules/@emotion/react/dist/emotion-element-6bdfffb2.esm.js:68:68)
    at Paper (webpack-internal:///(ssr)/./node_modules/@mui/material/node/Paper/Paper.js:69:44)
    at Lazy
    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/Unstable_Grid/createGrid.js:63:41)
    at Lazy
    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/Unstable_Grid/createGrid.js:63:41)
    at Lazy
    at div
    at eval (webpack-internal:///(ssr)/./node_modules/@emotion/react/dist/emotion-element-6bdfffb2.esm.js:68:68)
    at Paper (webpack-internal:///(ssr)/./node_modules/@mui/material/node/Paper/Paper.js:69:44)
    at Lazy
    at InnerLayoutRouter (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:227:11)
    at RedirectErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:72:9)
    at RedirectBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:80:11)
    at NotFoundBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/not-found-boundary.js:62:11)
    at LoadingBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:323:11)
    at ErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/error-boundary.js:103:11)
    at InnerScrollAndFocusHandler (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:139:9)
    at ScrollAndFocusHandler (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:214:11)
    at RenderFromTemplateContext (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/render-from-template-context.js:15:44)
    at Lazy
    at OuterLayoutRouter (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:332:11)
    at Lazy
    at InnerLayoutRouter (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:227:11)
    at RedirectErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:72:9)
    at RedirectBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:80:11)
    at NotFoundBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/not-found-boundary.js:62:11)
    at LoadingBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:323:11)
    at ErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/error-boundary.js:103:11)
    at InnerScrollAndFocusHandler (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:139:9)
    at ScrollAndFocusHandler (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:214:11)
    at RenderFromTemplateContext (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/render-from-template-context.js:15:44)
    at Lazy
    at OuterLayoutRouter (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:332:11)
    at Lazy
    at InnerLayoutRouter (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:227:11)
    at RedirectErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:72:9)
    at RedirectBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:80:11)
    at NotFoundBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/not-found-boundary.js:62:11)
    at LoadingBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:323:11)
    at ErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/error-boundary.js:103:11)
    at InnerScrollAndFocusHandler (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:139:9)
    at ScrollAndFocusHandler (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:214:11)
    at RenderFromTemplateContext (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/render-from-template-context.js:15:44)
    at Lazy
    at OuterLayoutRouter (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/layout-router.js:332:11)
    at Lazy
    at body
    at html
    at ThemeProvider (webpack-internal:///(ssr)/./node_modules/@mui/private-theming/node/ThemeProvider/ThemeProvider.js:39:5)
    at ThemeProvider (webpack-internal:///(ssr)/./node_modules/@mui/system/ThemeProvider/ThemeProvider.js:50:5)
    at ThemeProvider (webpack-internal:///(ssr)/./node_modules/@mui/material/node/styles/ThemeProvider.js:21:14)
    at Lazy
    at RedirectErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:72:9)
    at RedirectBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/redirect-boundary.js:80:11)
    at ReactDevOverlay (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/react-dev-overlay/internal/ReactDevOverlay.js:66:9)
    at HotReload (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/react-dev-overlay/hot-reloader-client.js:327:11)
    at Router (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/app-router.js:145:11)
    at ErrorBoundaryHandler (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/error-boundary.js:77:9)
    at ErrorBoundary (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/error-boundary.js:103:11)
    at AppRouter (webpack-internal:///(ssr)/./node_modules/next/dist/client/components/app-router.js:382:13)
    at Lazy
    at Lazy
    at ServerComponentWrapper (/home/ren/Documents/arvandor/arvandor.net/node_modules/next/dist/server/app-render/create-server-components-renderer.js:78:31)
    at ServerComponentWrapper (/home/ren/Documents/arvandor/arvandor.net/node_modules/next/dist/server/app-render/create-server-components-renderer.js:78:31)
    at InsertedHTML (/home/ren/Documents/arvandor/arvandor.net/node_modules/next/dist/server/app-render/app-render.js:893:33)

To Reproduce
Steps to reproduce the behavior:

  1. Create a MuiMarkdown component that is set to render a table
  2. Navigate to the page where the component is
  3. Error is printed

Expected behavior
The Table and TableCell components should both use JavaScript default params rather then defaultProps, hence avoiding the error.

Screenshots
N/A - Renders as expected, just prints a noisy deprecation warning

Desktop (please complete the following information):
OS: Linux Mint 21
Browser: Firefox 116
Version: 1.1.5

Additional context
NextJS 13.4.12
React 18.2.0
@mui/material 5.4.13
@emotion/styled 11.11.0

Node 18.12.1
npm 9.3.1
@HPouyanmehr
Copy link
Owner

Hey @alyphen, Thanks for the detailed explanation.

I did try to reproduce the warning you're getting but couldn't catch that in a similar environment (except for the Linux OS). However, I removed the defaultProps from the Table and TableCell components. You can now update to the latest release (version 1.1.6). If you have that warning even after updating the package, having an example Repo will help.

@alyphen
Copy link
Author

alyphen commented Aug 6, 2023

Perfect, using 1.1.6 fixes the issue, thanks so much :)

@alyphen alyphen closed this as completed Aug 6, 2023
@HPouyanmehr HPouyanmehr added the bug Something isn't working label Aug 9, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@alyphen @HPouyanmehr