Cannot use CSS `@import` statement from `node_modules` dependencies

[reesscot]

🐛 bug report

Preflight Checklist

• [x] I have read the Contributing Guidelines for this project.
• [x] I agree to follow the Code of Conduct that this project adheres to.
• [x] I have searched the issue tracker for an issue that matches the one I want to file, without success.

Description of the problem

I cannot use CSS @import statement from node_modules dependencies, I get a TypeError "Path must be a string. Received Null"

Seem related to: https://github.com/codesandbox/codesandbox-client/issues/6211

How has this issue affected you? What are you trying to accomplish?

To Reproduce

See: https://codesandbox.io/s/css-import-error-cwpxnl

1. Use the Angular template
2. Add dependency on @aws-amplify/ui-angular
3. Add an @import statement in styles.css as follows:

@import "~@aws-amplify/ui-angular/theme.css";

1. See error message: TypeError "Path must be a string. Received Null"

Note that you can see the theme.css file is indeed present in the package: https://www.npmjs.com/package/@aws-amplify/ui-angular?activeTab=explore

Link to sandbox: https://codesandbox.io/s/css-import-error-cwpxnl

Your Environment

Software	Name/Version
Сodesandbox	444b28619
Browser	Chrome 109.0.5414.119
Operating System	MacOSX 12.6.3

[smshuja]

Hello, is there an update on this?

[saidberk27]

I guess it's about exporting the theme.css file. I solved it by:

1. Open directory node_modules/@aws-amplify/ui-angular
2. Open file package.json
3. find "exports" section.
4. put "./theme.css": "./theme.css" section there.
5. Now my file looks like:

"fesm2015": "fesm2015/aws-amplify-ui-angular.mjs", "typings": "index.d.ts", "exports": { "./package.json": { "default": "./package.json" }, ".": { "types": "./index.d.ts", "esm2020": "./esm2020/aws-amplify-ui-angular.mjs", "es2020": "./fesm2020/aws-amplify-ui-angular.mjs", "es2015": "./fesm2015/aws-amplify-ui-angular.mjs", "node": "./fesm2015/aws-amplify-ui-angular.mjs", "default": "./fesm2020/aws-amplify-ui-angular.mjs" }, "./theme.css": "./theme.css" // I added here. }, "sideEffects": false }

Critical PS: Change import @import '@aws-amplify/ui-angular/theme.css'; (remove the ~ at the beggining)