TypeError: (0 , unist_util_visit__WEBPACK_IMPORTED_MODULE_1__.visit) is not a function
adam-magyar-instructure opened this issue · 3 comments
Initial checklist
- I read the support docs
- I read the contributing guide
- I agree to follow the code of conduct
- I searched issues and couldn’t find anything (or linked relevant results below)
Affected packages and versions
9.0.1
Link to runnable example
No response
Steps to reproduce
`import React from 'react';
import { Heading, Img, Link, Text } from '@own-ui-lib';
import Markdown from 'react-markdown';
export function OwnUIMarkdown({ markdown }: { markdown: string }) {
return (
<Markdown
components={{
h1: ({ node, className, children, ...props }) => {children},
h2: ({ node, className, children, ...props }) => {children},
h3: ({ node, className, children, ...props }) => {children},
h4: ({ node, className, children, ...props }) => {children},
h5: ({ node, className, children, ...props }) => {children},
strong: ({ node, className, children, ...props }) => {children},
em: ({ node, className, children, ...props }) => {children},
a: ({ node, className, children, ...props }) => (
{children}
),
img: ({ node, className, children, ...props }) => <Img src={props.src ?? ''} alt={props.alt} />,
text: ({ node, className, children, ...props }) => {children},
p: ({ node, className, children, ...props }) => (
{children}
),
}}>
{markdown}
);
}
`
When using the component below I got the following error in the console and it breaks our application:
Expected behavior
It should not break the application and should render the markdown.
Actual behavior
It breaks the application.
Runtime
Node v17
Package manager
npm 8
OS
macOS
Build and bundle tools
Webpack
Welcome @adam-magyar-instructure! 👋
Sorry you ran into a spot of trouble.
This isn't a react-markdown bug, but a webpack one. (Example of react-markdown working fine https://stackblitz.com/github/remarkjs/.github/tree/main/sandbox-templates/react-markdown-with-vite)
Some likely root causes:
- Using outdated webpack, it had bugs in previous major versions which have since been resolved
- Using an incorrect webpack configuration (check the module resolution)
A helpful guide on common issues using ESM with outdated package managers https://gist.github.com/sindresorhus/a39789f98801d908bbc7ff3ecc99d99c
Hi! This was closed. Team: If this was fixed, please add phase/solved. Otherwise, please add one of the no/* labels.
Another potential cause:
- You’re possibly using npm
overrides/ yarnresolutions. You should never use this unless you’re absolutely sure what you’re doing.