Content Security Policy error

[Zephyr]

Hello! I encountered a previously closed issue, #33.

Upon inspection, I found that it's from a dependency of this package:

Searching up the code, I found that it's originally from regenerator-runtime which is a dependency of @babel/plugin-transform-regenerator which is used by @babel/preset-env.

I searched up on how to disable it and came across https://stackoverflow.com/a/45729942 which tells to use

{
   "presets": [
      ["env", {
         "exclude": ["transform-regenerator"]
      }]
   ]
}

to disable it. However, that left me with

(babel plugin) Error: Cannot find module 'babel-preset-env'
- Did you mean "@babel/env"?

and upon searching that up, I came across https://stackoverflow.com/a/56519488 which tells to use @babel/preset-env instead of env. And that fixed the issue.

Since this project doesn't directly use babel and instead uses tsdx, the issue was tsdx transpiling with transform-regenerator explicitly enabled, and since it allows overriding the babel config, that can be used to exclude said poly-fill.

In terms of compatibility, regenerator-runtime is rarely needed these days¹²³. So I'm hoping that won't be a problem.

I've implemented the changes in my fork https://github.com/WhistlingZephyr/useFilePicker which seems to not give said error anymore. I'll be sending a PR for it shortly. Thanks!

Footnotes

1. https://github.com/vercel/next.js/discussions/15381 ↩

2. https://caniuse.com/async-functions ↩

3. https://caniuse.com/mdn-javascript_functions_method_definitions_async_generator_methods ↩

[MrKampla]

Hey @WhistlingZephyr
Great stuff! We really appreciate the amount of work you put in to come up with such a comprehensive explanation and a solution. I wish every issue was described this way ;)

Your solution looks fine, I'll review and merge your PR shortly.

[MrKampla]

@WhistlingZephyr Your PR has been merged! Thank you again for your input. The new change has been shipped to NPM with a new version of use-file-picker@1.5.2