Add `getModules` function to make transpiling easier with Next.js.

[msabramo]

Add getModules function to make transpiling for Next.js easier and less likely to break when new versions of React Spectrum are released.

const withTM = nextTranspileModules(getReactSpectrumModules());

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

This can help prevent issues like #2638 in the future.

Closes #2638 #1156 ?

✅ Pull Request Checklist:

• [x] Included link to corresponding React Spectrum GitHub Issue. #1156
• [ ] Added/updated unit tests and storybook for this change (for new code or code which already has tests).
• [x] Filled out test instructions.
• [x] Updated documentation (if it already exists for this component). ssr.mdx
• [X] (N/A) ~~Looked at the Accessibility Practices for this feature - Aria Practices~~

📝 Test Instructions:

• Create a new Next app and cd into it

npx create-next-app next-with-react-spectrum-test
cd next-with-react-spectrum-test

• Modify pages/index.js to have:

import {
  Button, Heading, Provider, SSRProvider, View,
  defaultTheme,
} from "@adobe/react-spectrum";

export default function Home() {
  return (
    <SSRProvider>
      <Provider theme={defaultTheme}>
        <View margin="size-150">
          <Heading level={1}>React Spectrum in Next.js</Heading>
          <Button>React Spectrum Button</Button>
        </View>
      </Provider>
    </SSRProvider>
  );
}

• Install necessary packages

npm install @adobe/react-spectrum

• Run the app

npm run dev

• Visit the app in the browser (e.g.: http://localhost:3000) and see the following error:

Failed to compile
./node_modules/@react-spectrum/actiongroup/dist/main.css
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: node_modules/@react-spectrum/actiongroup/dist/module.js

• Hit Ctrl-c to kill the dev server

Now do:

npm install --save-dev next-transpile-modules

Link to my package

$ pushd /path/to/clone/of/my/branch/of/this/monorepo
$ npm link
$ popd
$ npm link react-spectrum-monorepo

• Change next.config.js to:

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 withReactSpectrum = nextTranspileModules(getReactSpectrumModules());

module.exports = withReactSpectrum({ reactStrictMode: true });

• Relaunch the dev server:

$ npm run dev

• Note that app (at http://localhost:3000/) now works!

🧢 Your Project:

https://github.com/msabramo/next-with-react-spectrum-test