Angular 12 compatibilty

[femave]

Hello, as I don't see nobody reporting this and any thing related to angular 2+ I dont know if its only my problem or there is really a bug, but this error appear when I try to run in angular 12, and looks like some kind of babel bug compilation with async functions so I don't know if it can be compatible with angular 12

node 16.1.0
npm 8.1.1

[dchoi27]

Not sure if related: nftstorage/nft.storage#720

[jkondratowicz]

Similar error trying to use it in a React app built with Create React App.

Node version v16.5.0
NPM version 7.19.1
React version 17.0.2
react-scripts 4.0.3

Failed to compile.

./node_modules/web3.storage/src/lib.js 356:79
Module parse failed: Unexpected token (356:79)
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.
|         /* c8 ignore next 2 */
|         const errorMessage = await res.json();
>         throw new Error(`${res.status} ${res.statusText} ${'- ' + errorMessage?.message || ''}`);
|       }
|

[dashcraft]

For angular 13 (using latest ng new):
I was able to resolve the build issue with the following steps:

• set "allowSyntheticDefaultImports": true in your tsconfig.json
• verify your package.json file has the following versions...

{
  "dependencies": {
    "@angular/animations": "~13.0.0",
    "@angular/common": "~13.0.0",
    "@angular/compiler": "~13.0.0",
    "@angular/core": "~13.0.0",
    "@angular/forms": "~13.0.0",
    "@angular/platform-browser": "~13.0.0",
    "@angular/platform-browser-dynamic": "~13.0.0",
    "@angular/router": "~13.0.0",
    "rxjs": "~7.4.0",
    "tslib": "^2.3.0",
    "web3.storage": "^3.4.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.0.3",
    "@angular/cli": "~13.0.3",
    "@angular/compiler-cli": "~13.0.0",
    "@types/jasmine": "~3.10.0",
    "@types/node": "^12.11.1",
    "jasmine-core": "~3.10.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "typescript": "~4.4.3"
  }
}

Make sure that your internal webpack version is:
webpack "5.64.1"

This should be standard with angular 13, but in case it's not, I figured i'd make sure to comment:
@femave can you see if this helps unblock you?

I have a fix that will be inbound for the other issue (angular 12+ and react) here shortly. I need to do some more testing, it breaks using webpack 4 specifically.