fix: include mdast-util-find-and-replace into our CJS bundle

.github/workflows/ci.yml

@@ -93,3 +93,6 @@ jobs:
           yarn lint
           yarn coverage
           yarn validate-translations
+
+      - name: 🧪 Validate CommonJS bundle with ${{ matrix.node }}
+        run: yarn validate-cjs

.github/workflows/release.yml

@@ -21,6 +21,8 @@ jobs:
           node-version: 'lts/*'
       - name: Install dependencies
         run: yarn install --frozen-lockfile
+      - name: Validate CommonJS bundle
+        run: yarn validate-cjs
       - name: Release
         env:
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

package.json

@@ -202,6 +202,7 @@
     "test": "jest",
     "types": "tsc --strict",
     "validate-translations": "node scripts/validate-translations.js",
+    "validate-cjs": "node scripts/validate-cjs-bundle.cjs",
     "semantic-release": "semantic-release",
     "browse-examples": "ladle serve",
     "e2e": "playwright test",

rollup.config.js

@@ -33,6 +33,7 @@ const externalDependencies = [
   '@braintree/sanitize-url',
   '@fortawesome/free-regular-svg-icons',
   '@fortawesome/react-fontawesome',
+  '@juggle/resize-observer',
   '@stream-io/transliterate',
   'custom-event',
   /dayjs/,
@@ -45,13 +46,14 @@ const externalDependencies = [
   'lodash.isequal',
   'lodash.throttle',
   'lodash.uniqby',
-  'mdast-util-find-and-replace',
   'mml-react',
+  'nanoid',
   'pretty-bytes',
   'prop-types',
   'react-fast-compare',
   /react-file-utils/,
   'react-images',
+  'react-image-gallery',
   'react-is',
   /react-markdown/,
   'react-player',
@@ -61,14 +63,17 @@ const externalDependencies = [
   /uuid/,
 ];
 
-const basePlugins = [
+const basePlugins = ({ useBrowserResolve = false }) => [
   replace({
     preventAssignment: true,
     'process.env.NODE_ENV': JSON.stringify('production'),
   }),
   // Remove peer-dependencies from final bundle
   external(),
   image(),
+  resolve({
+    browser: useBrowserResolve,
+  }),
   typescript(),
   babel({
     babelHelpers: 'runtime',
@@ -107,7 +112,7 @@ const normalBundle = {
       sourcemap: true,
     },
   ],
-  plugins: [...basePlugins],
+  plugins: [...basePlugins({ useBrowserResolve: false })],
 };
 
 const fullBrowserBundle = ({ min } = { min: false }) => ({
@@ -126,16 +131,13 @@ const fullBrowserBundle = ({ min } = { min: false }) => ({
     },
   ],
   plugins: [
-    ...basePlugins,
+    ...basePlugins({ useBrowserResolve: true }),
     {
       load: (id) => (id.match(/.s?css$/) ? '' : null),
       name: 'ignore-css-and-scss',
       resolveId: (importee) => (importee.match(/.s?css$/) ? importee : null),
     },
     builtins(),
-    resolve({
-      browser: true,
-    }),
     globals({
       buffer: false,
       dirname: false,

scripts/validate-cjs-bundle.cjs

@@ -0,0 +1,3 @@
+// As the community transitions to ESM, we can easily break our CJS bundle.
+// This smoke test can help to detect this early.
+require('../dist/index.cjs.js');