Build failed for @aws-amplify/ui

[lpicchi]

Before creating a new issue, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have tried disabling all browser extensions or using a different browser
• I have tried deleting the node_modules folder and reinstalling my dependencies
• I have read the guide for submitting bug reports.

On which framework/platform are you having an issue?

Other

Which UI component?

Other

How is your app built?

none

What browsers are you seeing the problem on?

No response

Which region are you seeing the problem in?

No response

Please describe your bug.

I'm trying to contribute to the project and found that @aws-amplify/ui is broken. Script packages\ui\scripts\generateCSS.ts is trying to create files in non existent dir.

PS C:\Projects\github\amplify-ui> yarn workspace @aws-amplify/ui build
yarn workspace v1.22.22
yarn run v1.22.22
$ rimraf dist
$ yarn build:css && yarn build:dist
$ node -r esbuild-register ./scripts/generateCSS.ts
node:fs:2346
    return binding.writeFileUtf8(
                   ^

Error: ENOENT: no such file or directory, open 'C:\Projects\github\amplify-ui\packages\ui\dist\styles\src\theme\css\component\_fieldControl.css'
    at Object.writeFileSync (node:fs:2346:20)
    at <anonymous> (C:\Projects\github\amplify-ui\packages\ui\scripts\generateCSS.ts:34:10)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  errno: -4058,
  code: 'ENOENT',
  syscall: 'open',
  path: 'C:\\Projects\\github\\amplify-ui\\packages\\ui\\dist\\styles\\src\\theme\\css\\component\\_fieldControl.css'
}

Node.js v20.13.1
error Command failed with exit code 1.

What's the expected behaviour?

To build correctly

Help us reproduce the bug!

Clone repo and run:

yarn install
yarn workspace @aws-amplify/ui build

Additional information and screenshots

Solution:

Add before this line

import path from 'path';

const dir = path.dirname(`dist/${outputPath}.css`);
fs.mkdirSync(dir, { recursive: true });