In Nuxt2, $fetch in plugin does not work

[toreis-up]

Environment

node v18.16.0
yarn v1.22.19

├── @nuxt/[email protected]
├── @nuxt/[email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

Reproduction

https://github.com/toreis-up/ofetch-webpack-4

Describe the bug

I want to use $fetch.create in plugin, but I get error as per Logs and cannot resolve it.
Not compatible with Nuxt2 / Webpack@4?

Additional context

No response

Logs

[friendly-errors 10:49:57 PM]  ERROR  Failed to compile with 5 errors


[friendly-errors 10:49:57 PM]  ERROR  in ./node_modules/ofetch/dist/index.mjs

[friendly-errors 10:49:57 PM] Can't import the named export 'c' from non EcmaScript module (only default export is available)
[friendly-errors 10:49:57 PM]

[friendly-errors 10:49:57 PM]  ERROR  in ./node_modules/ofetch/dist/index.mjs

[friendly-errors 10:49:57 PM] Can't reexport the named export 'F' from non EcmaScript module (only default export is available)
[friendly-errors 10:49:57 PM]

[friendly-errors 10:49:57 PM]  ERROR  in ./node_modules/ofetch/dist/index.mjs

[friendly-errors 10:49:57 PM] Can't reexport the named export 'a' from non EcmaScript module (only default export is available)
[friendly-errors 10:49:57 PM]

[friendly-errors 10:49:57 PM]  ERROR  in ./node_modules/ofetch/dist/index.mjs

[friendly-errors 10:49:57 PM] Can't reexport the named export 'c' from non EcmaScript module (only default export is available)
[friendly-errors 10:49:57 PM]

[friendly-errors 10:49:57 PM]  ERROR  in ./node_modules/ofetch/dist/shared/ofetch.00501375.mjs

[friendly-errors 10:49:57 PM] Module parse failed: Unexpected token (8:13)   
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     super(message, opts);
|     this.name = "FetchError";
>     if (opts?.cause && !this.cause) {
|       this.cause = opts.cause;
|     }
[friendly-errors 10:49:57 PM]
 @ ./node_modules/ofetch/dist/index.mjs 1:0-64 2:0-86 2:0-86 2:0-86 24:15-26 27:0-72
 @ ./src/plugins/ofetch.ts
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi ./node_modules/eventsource-polyfill/dist/browserify-eventsource.js (webpack)-hot-middleware/client.js?reload=true&timeout=30000&ansiColors=&overlayStyles=&path=%2F__webpack_hmr%2Fclient&name=client ./.nuxt/client.js

[toreis-up]

apollographql/apollo-link-state#302 (comment)

This is a hint that solving, but problem below is continued yet

in ./node_modules/ofetch/dist/shared/ofetch.00501375.mjs 7:13
Module parse failed: Unexpected token (7:13)
File was processed with these loaders:
 * ./node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
|     super(message, opts);
|     this.name = "FetchError";
>     if (opts?.cause && !this.cause) {
|       this.cause = opts.cause;
|     }

[pi0]

This issue might be already solved in Nuxt 2 bridge. It seems missing syntax support in your tooling and opting to more transpilations in ofetch is tricky.