From 1b983c8c893d042d2303e19a4f0b816e758c6242 Mon Sep 17 00:00:00 2001 From: Charles Zhao Date: Mon, 14 Aug 2023 11:09:06 +0800 Subject: [PATCH] fix(console): react-markdown rendering error in parcel dev mode (#4319) --- packages/console/package.json | 3 +- .../console/src/components/Markdown/index.tsx | 9 ++++++ pnpm-lock.yaml | 28 +++++++++++++------ 3 files changed, 30 insertions(+), 10 deletions(-) diff --git a/packages/console/package.json b/packages/console/package.json index 9c63a4cf5..88694b212 100644 --- a/packages/console/package.json +++ b/packages/console/package.json @@ -93,6 +93,7 @@ "prettier": "^3.0.0", "process": "^0.11.10", "prop-types": "^15.8.1", + "property-information": "^6.2.0", "react": "^18.0.0", "react-animate-height": "^3.0.4", "react-color": "^2.19.3", @@ -104,7 +105,7 @@ "react-hook-form": "^7.43.9", "react-hot-toast": "^2.2.0", "react-i18next": "^12.3.1", - "react-markdown": "^8.0.0", + "react-markdown": "^8.0.7", "react-modal": "^3.15.1", "react-paginate": "^8.1.3", "react-router-dom": "^6.10.0", diff --git a/packages/console/src/components/Markdown/index.tsx b/packages/console/src/components/Markdown/index.tsx index 4a8340af3..a6e4aabeb 100644 --- a/packages/console/src/components/Markdown/index.tsx +++ b/packages/console/src/components/Markdown/index.tsx @@ -4,6 +4,15 @@ import classNames from 'classnames'; import { memo, useRef } from 'react'; import ReactMarkdown from 'react-markdown'; import remarkGfm from 'remark-gfm'; +/** + * Workaround for the markdown crash issue in the parcel dev build. It seems parcel does + * something clever in dev mode and messing up the `hastToReact` module. Manually adding + * the `property-information` import somehow keeps the reference and makes dev build work. + * @see https://github.com/remarkjs/react-markdown/issues/747 + * @see https://github.com/parcel-bundler/parcel/discussions/9113 + */ +// eslint-disable-next-line import/no-unassigned-import +import 'property-information'; import CodeEditor from '@/ds-components/CodeEditor'; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ecb4712b7..ad7f86781 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -3034,6 +3034,9 @@ importers: prop-types: specifier: ^15.8.1 version: 15.8.1 + property-information: + specifier: ^6.2.0 + version: 6.2.0 react: specifier: ^18.0.0 version: 18.2.0 @@ -3068,8 +3071,8 @@ importers: specifier: ^12.3.1 version: 12.3.1(i18next@22.4.15)(react-dom@18.2.0)(react@18.2.0) react-markdown: - specifier: ^8.0.0 - version: 8.0.0(@types/react@18.0.31)(react@18.2.0) + specifier: ^8.0.7 + version: 8.0.7(@types/react@18.0.31)(react@18.2.0) react-modal: specifier: ^3.15.1 version: 3.15.1(react-dom@18.2.0)(react@18.2.0) @@ -17500,8 +17503,8 @@ packages: xtend: 4.0.2 dev: true - /property-information@6.1.1: - resolution: {integrity: sha512-hrzC564QIl0r0vy4l6MvRLhafmUowhO/O3KgVSoXIbbA2Sz4j8HGpJc6T2cubRVwMwpdiG/vKGfhT4IixmKN9w==} + /property-information@6.2.0: + resolution: {integrity: sha512-kma4U7AFCTwpqq5twzC1YVIDXSqg6qQK6JN0smOw8fgRy1OkMi0CYSzFmsy6dnqSenamAtj0CyXMUJ1Mf6oROg==} dev: true /proto-props@2.0.0: @@ -17835,25 +17838,26 @@ packages: resolution: {integrity: sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==} dev: true - /react-markdown@8.0.0(@types/react@18.0.31)(react@18.2.0): - resolution: {integrity: sha512-qbrWpLny6Ef2xHqnYqtot948LXP+4FtC+MWIuaN1kvSnowM+r1qEeEHpSaU0TDBOisQuj+Qe6eFY15cNL3gLAw==} + /react-markdown@8.0.7(@types/react@18.0.31)(react@18.2.0): + resolution: {integrity: sha512-bvWbzG4MtOU62XqBx3Xx+zB2raaFFsq4mYiAzfjXJMEz2sixgeAfraA3tvzULF02ZdOMUOKTBFFaZJDDrq+BJQ==} peerDependencies: '@types/react': '>=16' react: '>=16 || ^18.0.0' dependencies: '@types/hast': 2.3.4 + '@types/prop-types': 15.7.4 '@types/react': 18.0.31 '@types/unist': 2.0.6 comma-separated-tokens: 2.0.2 hast-util-whitespace: 2.0.0 prop-types: 15.8.1 - property-information: 6.1.1 + property-information: 6.2.0 react: 18.2.0 - react-is: 17.0.2 + react-is: 18.2.0 remark-parse: 10.0.1 remark-rehype: 10.1.0 space-separated-tokens: 2.0.1 - style-to-object: 0.3.0 + style-to-object: 0.4.2 unified: 10.1.2 unist-util-visit: 4.1.0 vfile: 5.3.2 @@ -19213,6 +19217,12 @@ packages: inline-style-parser: 0.1.1 dev: true + /style-to-object@0.4.2: + resolution: {integrity: sha512-1JGpfPB3lo42ZX8cuPrheZbfQ6kqPPnPHlKMyeRYtfKD+0jG+QsXgXN57O/dvJlzlB2elI6dGmrPnl5VPQFPaA==} + dependencies: + inline-style-parser: 0.1.1 + dev: true + /stylelint-config-xo-scss@0.15.0(postcss@8.4.14)(stylelint@15.0.0): resolution: {integrity: sha512-X9WD8cDofWFWy3uaKdwwm+DjEvgI/+h7AtlaPagkhNAeOWH/GFQoeciBvNvyJ8tB1p00SoIzCn2IIOIKXCbxYA==} engines: {node: '>=12'}