Registering custom hook extension fails when using plaiceholder package

[polynook]

Preflight Checklist

• I have completed all Troubleshooting Steps.
• I'm on the latest version of Directus.
• There's no other issue that already describes my problem.

Describe the Bug

I'm trying to use plaiceholder inside a custom hook but having problems.

The custom hook extension as the following index.ts file:

I build the extension, place it inside Directus app and run npx directus start. I get the following error:

The same code works fine when executed in Next.js app getServerSideProps function.

As the error suggested, I tried configuring @rollup/plugin-commonjs by going by the instructions I found in the docs here https://docs.directus.io/extensions/creating-extensions/#configuring-the-cli :

With this config, the previous error is gone but I get a different one:

To Reproduce

1. npm init directus-extension -> hook -> typescript -> name: custom-hook
2. npm init directus-project example-project -> sqlite/postgres
3. Change @directus/extensions-sdk and directus package versions from 9.5.0 to 9.4.3 because of Building and running extensions is broken #11275
4. cd custom-hook npm install plaiceholder
5. import getPlaiceholder function inside src/index.ts and console.log it inside any of the hooks (as shown in the first image in Describe the Bug section).
6. Build extension with npm run build
7. Copy index.js from dist folder into Directus app at example-project/extensions/hooks/custom-hook/
8. npx directus start

Errors Shown

What version of Directus are you using?

9.4.3

What version of Node.js are you using?

v16.13.1

What database are you using?

Postgres 14.1

What browser are you using?

Chrome

What operating system are you using?

Windows 10

How are you deploying Directus?

running locally

[rijkvanzanten]

Linear: ENG-273

[rijkvanzanten]

I believe this is resolved with the switch to ESM and plaiceholder v3. Happy to reopen if not.