Instruction how to make it work with next.js

[bolora]

Description

For https://cloudscape.design/get-started/integration/using-cloudscape-components/

There should be instructions for nextJS installation to address this issue:

./node_modules/@cloudscape-design/components/alert/styles.scoped.css
Global CSS cannot be imported from within node_modules.
Read more: https://nextjs.org/docs/messages/css-npm
Location: node_modules/@cloudscape-design/components/alert/styles.css.js

Along with installing cloudscape library you need to do the following if using NextJS:

• npm install next-transpile-modules
• Update next.config.js file
  • Import next-transpile-modules: const withTranspileModules = require('next-transpile-modules');
  • Add this into the withPlugins declaration at the bottom: [withTranspileModules(['@cloudscape-design/components'])],

Alternatively you can address this: https://nextjs.org/docs/messages/css-npm

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate requests

[zhubby]

👍

[david-martyn-ford]

Usage with NX.

// eslint-disable-next-line @typescript-eslint/no-var-requires
const withNx = require('@nrwl/next/plugins/with-nx');
const withTranspileModules = require('next-transpile-modules');
const withPlugins = require('next-compose-plugins');

/**
 * @type {import('@nrwl/next/plugins/with-nx').WithNxOptions}
 **/
const nextConfig = {
  nx: {
    // Set this to true if you would like to to use SVGR
    // See: https://github.com/gregberge/svgr
    svgr: false,
  },
};

module.exports = withPlugins([
  withNx(nextConfig),
  withTranspileModules(['@cloudscape-design/components']),
]);

[CMcDev]

Came here to give the same feedback

[FlorianDr]

Thank you everyone for the suggestions. We will add a reference to this issue to the Integration page to contain integration advice in one place.

[cwbuecheler]

The withPlugins solution is working for me but unfortunately the CloudScape Design CSS is still causing a lot of errors in the NextJS output, focused around useLayoutEffect being incompatible with server rendering:

Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://reactjs.org/link/uselayouteffect-ssr for common fixes.

I also get several errors when first launching the dev server that look like this:

Invalid next.config.js options detected: The root value has an unexpected property, webpackDevMiddleware, which is not in the list of allowed properties

This may be a fundamental disconnect between how Next.js wants to work, and how CloudScape Design currently works ... and that's fine! If they're not yet compatible, I can wait. But if it's just something I'm doing wrong, I'd be happy to hear it. This is a brand new Next install with very little configuration work done. My entire next.config.js file looks like this:

const withTranspileModules = require('next-transpile-modules');
const withPlugins = require('next-compose-plugins');

const nextConfig = {
	reactStrictMode: true,
	swcMinify: true,
};

module.exports = withPlugins([withTranspileModules(['@cloudscape-design/components'])], nextConfig);

[just-boris]

The useLayoutEffect warning comes from React and it is basically harmless. We can try all together to convince the React team to remove it. More details is in this comment: facebook/react#14927 (comment)

For the second warning about unexpected webpackDevMiddleware, it looks like there is a version mismatch between next-transpile-modules and next itself

[just-boris]

FWIW, I also reported the issue to next.js: vercel/next.js#39516

The requirement for next-transpile-modules is artificial on their end and possibly can be removed

[cwbuecheler]

Thanks much for the info. I don't mind ignoring the warnings for now as long as they're not really an issue. Hopefully Next can sort it out.

[just-boris]

Instructions were added to our getting started article (at the very bottom of the page): https://cloudscape.design/get-started/integration/using-cloudscape-components/#bundling-assets

[peteryxu]

Built-in module transpilation: (https://nextjs.org/blog/next-13-1#built-in-module-transpilation-stable)

You can now mark dependencies from local packages (like monorepos) or from external dependencies (node_modules) to be transpiled and bundled. This built-in support replaces the popular next-transpile-modules package.

[connorlanigan]

We have now updated the Cloudscape website with instructions on how to use the new Next.js feature to transpile dependencies like Cloudscape. You can find them in the article Using Cloudscape components.