Problems using AWSUI with nextjs

[mabreuortega]

Hi folks, I'm trying to setup nextjs to use awsui but I'm unable to get the 2 playing nice together. WIll be nice if you have some sample code or you can help me with the setup.

[mabreuortega]

Describe the bug Issue when using AWSUI with nextjs framework To Reproduce Steps to reproduce the behavior:

1. Create new application from template npx create-next-app@latest --ts
2. Install global css support npm i -PE next-global-css
3. Install npm install @awsui/global-styles
4. Import the css in ./pages/_app.ts import "@awsui/global-styles/index.css"
5. Edit next.config.js file

   const { withGlobalCss } = require('next-global-css')
   const withConfig = withGlobalCss()
   module.exports = withConfig({
       reactStrictMode: true,
   });

6. Run npm run dev
7. Error:

   
   /Volumes/workplace/ma-sdk-ui-app/ui/sample-app/node_modules/@awsui/components-react/app-layout/index.js:1
   import { __assign, __rest } from "tslib";
   ^^^^^^
   SyntaxError: Cannot use import statement outside a module
   at Object.compileFunction (node:vm:352:18)
   at wrapSafe (node:internal/modules/cjs/loader:1032:15)
   at Module._compile (node:internal/modules/cjs/loader:1067:27)
   at Object.Module._extensions..js (node:internal/modules/cjs/loader:1155:10)
   at Module.load (node:internal/modules/cjs/loader:981:32)
   at Function.Module._load (node:internal/modules/cjs/loader:822:12)
   at Module.require (node:internal/modules/cjs/loader:1005:19)
   at Object.apply (webpack-internal:///./node_modules/next-global-css/lib/patch-global-require.js:10:20)
   at Object.apply (webpack-internal:///./node_modules/next-global-css/lib/patch-global-require.js:10:20)
   at require (node:internal/modules/cjs/helpers:102:18)```
   **Expected behavior**
   App should run
   **Environment (please complete the following information):**
   - OS: macOS
   - Browser: firefox
   - Version: 91.6.0esr (64-bit)

[timogasda]

Hello!

When using NextJS, you will need to transpile our components before they can be consumed. This is done with the next-transpile-modules package. See their docs for more information: https://github.com/martpie/next-transpile-modules#readme.

To resolve the issue, your NextJS config might look something like this:

const withTM = require("next-transpile-modules")(["@awsui/components-react"]);

const nextConfig = {
  reactStrictMode: true,
};

module.exports = withTM(nextConfig);

[mabreuortega]

that works, thanks!

[TrevorBurnham]

Update for folks coming across this issue now: In NextJS 13.1+, the next-transpile-modules functionality is built in. All you have to do is add a line to your config:

// next.config.js
module.exports = {
  transpilePackages: ["@awsui/components-react"],
};