From 7c6477d2ec5cb5540e84ba4c07c9810cee03e2f0 Mon Sep 17 00:00:00 2001
From: Jason <jason@scurker.com>
Date: Mon, 25 Sep 2023 12:43:44 -0500
Subject: [PATCH] fix(react): prevent esm modules from appearing in cjs dist

---
 packages/react/rollup.config.js              |  7 ++++++-
 packages/react/src/components/Code/index.tsx | 15 +++++++--------
 2 files changed, 13 insertions(+), 9 deletions(-)

diff --git a/packages/react/rollup.config.js b/packages/react/rollup.config.js
index edf0c6d9d..f40fbf5a0 100644
--- a/packages/react/rollup.config.js
+++ b/packages/react/rollup.config.js
@@ -8,7 +8,12 @@ export default {
   input: 'src/index.ts',
   external: [
     ...Object.keys(pkg.dependencies),
-    ...Object.keys(pkg.peerDependencies)
+    ...Object.keys(pkg.peerDependencies),
+    // Note: We directly import only the specific language syntax needed
+    // directly in the Code component. This ensures it is still treated as
+    // an external dependency since it won't match the dependencies or
+    // peerDependencies when pulled from package.json.
+    /^react-syntax-highlighter/
   ],
   output: {
     dir: 'lib',
diff --git a/packages/react/src/components/Code/index.tsx b/packages/react/src/components/Code/index.tsx
index a9521e79e..b9501dfc0 100644
--- a/packages/react/src/components/Code/index.tsx
+++ b/packages/react/src/components/Code/index.tsx
@@ -1,12 +1,12 @@
 import React, { useRef, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { SyntaxHighlighterProps } from 'react-syntax-highlighter';
-import SyntaxHighlighter from 'react-syntax-highlighter/dist/esm/light';
+import SyntaxHighlighter from 'react-syntax-highlighter/dist/cjs/light';
 import classNames from 'classnames';
-import js from 'react-syntax-highlighter/dist/esm/languages/hljs/javascript';
-import css from 'react-syntax-highlighter/dist/esm/languages/hljs/css';
-import xml from 'react-syntax-highlighter/dist/esm/languages/hljs/xml';
-import yaml from 'react-syntax-highlighter/dist/esm/languages/hljs/yaml';
+import js from 'react-syntax-highlighter/dist/cjs/languages/hljs/javascript';
+import css from 'react-syntax-highlighter/dist/cjs/languages/hljs/css';
+import xml from 'react-syntax-highlighter/dist/cjs/languages/hljs/xml';
+import yaml from 'react-syntax-highlighter/dist/cjs/languages/hljs/yaml';
 
 SyntaxHighlighter.registerLanguage('javascript', js);
 SyntaxHighlighter.registerLanguage('css', css);
@@ -14,9 +14,8 @@ SyntaxHighlighter.registerLanguage('html', xml);
 SyntaxHighlighter.registerLanguage('yaml', yaml);
 
 // HACK: This is a workaround for a bug in react-syntax-highlighter's types.
-const Highlighter = SyntaxHighlighter as React.ComponentType<
-  SyntaxHighlighterProps
->;
+const Highlighter =
+  SyntaxHighlighter as React.ComponentType<SyntaxHighlighterProps>;
 
 type Props = {
   children: string;