Description

In #35446, CSS files were added to the Bento components distributed via npm.

This worked great for my setup using webpack v4, where I was able to simply import the CSS file like this:

import '@ampproject/amp-base-carousel/dist/styles.css';

The reason for this seems to be that webpack v5 supports the exports field in package.json, which v4 did not. And styles.css is not present there. So webpack complains.

To fix this, the following export would need to be added to exports:

{
	  "./styles.css": "./dist/styles.css"
}

Then the following import works:

import '@ampproject/amp-base-carousel/styles.css';

Reproduction Steps

Try to import styles.css from @ampproject/amp-base-carousel in a webpack v5 environment.

The easiest way is through something like @wordpress/scripts v18, which is what I was using.

Then, import the CSS file in the source script and run npx wp-scripts build <entry> to try to build the script.

Relevant Logs

Module not found: Error: Package path ./dist/styles.css is not exported from package /path/to/node_modules/@ampproject/amp-base-carousel (see exports field in /path/to/node_modules/@ampproject/amp-base-carousel/package.json)

Browser(s) Affected

No response

OS(s) Affected

No response

Device(s) Affected

No response

AMP Version Affected

2108280007000