From 2c9d184e5ac06a5ddeea31eb2da206b152cf2a73 Mon Sep 17 00:00:00 2001
From: Marc Abramowitz <abramowi@adobe.com>
Date: Fri, 17 Dec 2021 08:37:53 -0800
Subject: [PATCH] Add `getModules` function

to make transpiling easier with Next.js.

```js
const withTM = nextTranspileModules(getReactSpectrumModules());

module.exports = withTM({
  // Your Next.js configuration
});
```

This can help prevent issues like
https://github.com/adobe/react-spectrum/pull/2638 in the future.
---
 lib/getModules.js                             | 50 +++++++++++++++++
 .../dev/docs/pages/react-spectrum/ssr.mdx     | 53 ++++---------------
 2 files changed, 59 insertions(+), 44 deletions(-)
 create mode 100644 lib/getModules.js

diff --git a/lib/getModules.js b/lib/getModules.js
new file mode 100644
index 00000000000..ab3dafd343b
--- /dev/null
+++ b/lib/getModules.js
@@ -0,0 +1,50 @@
+// This defines a function called `getModules` that can get an array of all
+// React Spectrum modules.
+//
+// One use case for this function is it can be used to wrap the Next.js
+// configuration in `next.config.js` so that React Spectrum works in Next.js
+// without any errors.
+//
+// You can do something like this in your `next.config.js`:
+//
+// <next.config.js>
+//
+// const nextTranspileModules = require("next-transpile-modules");
+// const getReactSpectrumModules = require("react-spectrum-monorepo/lib/getModules");
+//
+// // This wraps the Next.js configuration to do some transpilations so that React
+// // Spectrum works in Next.js without any errors.
+// //
+// // Inspired by https://react-spectrum.adobe.com/react-spectrum/ssr.html#nextjs
+// //
+// const withTM = nextTranspileModules(getReactSpectrumModules());
+//
+// module.exports = withTM({
+//   // Your Next.js configuration
+// });
+//
+// </next.config.js>
+
+const fs = require("fs");
+
+const flatten = (arr) => arr.reduce((acc, val) => acc.concat(val));
+
+const getModules = () =>
+  flatten(
+    // Returns something like [
+    //   '@adobe/react-spectrum',
+    //   '@adobe/react-spectrum-ui',
+    //   '@adobe/react-spectrum-workflow',
+    //   '@react-spectrum/actiongroup',
+    //   '@react-spectrum/breadcrumbs',
+    //   '@react-spectrum/button',
+    //    ...
+    //   '@spectrum-icons/ui',
+    //   '@spectrum-icons/workflow'
+    // ]
+    ["@adobe", "@react-spectrum", "@spectrum-icons"].map((ns) =>
+      fs.readdirSync(`./node_modules/${ns}`).map((dir) => `${ns}/${dir}`)
+    )
+  );
+
+module.exports = getModules;
diff --git a/packages/dev/docs/pages/react-spectrum/ssr.mdx b/packages/dev/docs/pages/react-spectrum/ssr.mdx
index fd16347859e..1a6fe14f0d2 100644
--- a/packages/dev/docs/pages/react-spectrum/ssr.mdx
+++ b/packages/dev/docs/pages/react-spectrum/ssr.mdx
@@ -58,52 +58,17 @@ First, you’ll need to install an additional Next.js plugin:
 yarn add next-transpile-modules
 ```
 
-With this installed, add the following to your `next.config.js` file. This will ensure that React Spectrum’s CSS is loaded properly by Next.js. Note that packages may need to be removed or added to the config below if using an older or newer version of React Spectrum.
+With this installed, add the following to your `next.config.js` file. This will ensure that React Spectrum’s CSS is loaded properly by Next.js.
 
 ```tsx
-const withTM = require("next-transpile-modules")([
-  "@adobe/react-spectrum",
-  "@react-spectrum/actiongroup",
-  "@react-spectrum/breadcrumbs",
-  "@react-spectrum/button",
-  "@react-spectrum/buttongroup",
-  "@react-spectrum/checkbox",
-  "@react-spectrum/combobox",
-  "@react-spectrum/dialog",
-  "@react-spectrum/divider",
-  "@react-spectrum/form",
-  "@react-spectrum/icon",
-  "@react-spectrum/illustratedmessage",
-  "@react-spectrum/image",
-  "@react-spectrum/label",
-  "@react-spectrum/layout",
-  "@react-spectrum/link",
-  "@react-spectrum/listbox",
-  "@react-spectrum/menu",
-  "@react-spectrum/meter",
-  "@react-spectrum/numberfield",
-  "@react-spectrum/overlays",
-  "@react-spectrum/picker",
-  "@react-spectrum/progress",
-  "@react-spectrum/provider",
-  "@react-spectrum/radio",
-  "@react-spectrum/slider",
-  "@react-spectrum/searchfield",
-  "@react-spectrum/statuslight",
-  "@react-spectrum/switch",
-  "@react-spectrum/table",
-  "@react-spectrum/tabs",
-  "@react-spectrum/text",
-  "@react-spectrum/textfield",
-  "@react-spectrum/theme-dark",
-  "@react-spectrum/theme-default",
-  "@react-spectrum/theme-light",
-  "@react-spectrum/tooltip",
-  "@react-spectrum/view",
-  "@react-spectrum/well",
-  "@spectrum-icons/ui",
-  "@spectrum-icons/workflow"
-]);
+const nextTranspileModules = require("next-transpile-modules");
+const getReactSpectrumModules = require("react-spectrum-monorepo/lib/getModules");
+
+// This wraps the Next.js configuration to do some transpilations so that React
+// Spectrum works in Next.js without any errors.
+//
+// Inspired by https://react-spectrum.adobe.com/react-spectrum/ssr.html#nextjs
+const withTM = nextTranspileModules(getReactSpectrumModules());
 
 module.exports = withTM({
   // Your Next.js configuration