1

I installed a package called "dids", which I believe contains another package "did-jwt" that is causing this error:

Module parse failed: Unexpected token (192:53)
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.
|     return t.find(e => {
|       const r = p(I(e));
>       return r === i || r === c || e.ethereumAddress?.toLowerCase() === u || e.blockchainAccountId?.split("@eip155")?.[0].toLowerCase() === u;
|     });
|   }).filter(e => null != e);

I started looking into webpack, babel, and what goes on behind CRA, since I saw the error was with loaders, babel, and webpack. I'd never looked into the toolchain before since I've only been using React for a bit. I have a better understanding of the problem, but am still confused why its happening, and how to solve it? I looked into running npm run eject but only wish to use that as a last resort.

My current understanding is that webpack compiles and bundles the JS code, and Babel transpiles the code to transform more modern JS into older JS so its understandable by older browsers. (feel free to correct me on this, my understanding still rusty). Webpack uses loaders while bundling and calls upon loaders to do certain thing, like babel to transpile. But in this case, why can babel not compile this piece of code?

I also saw this post: "You may need an additional loader to handle the result of these loaders."

Which explains that babel doesn't run on dependencies in the project, only the source code. But it seems that babel lis running on the did-jwt dependency?

pastacompany
  • 155
  • 1
  • 1
  • 5
  • It may be choking on `?!` which means the module distro isn’t already transpiled. You may be able to process just that module, or see if it’s a known issue with a fix/workaround. – Dave Newton May 15 '21 at 21:21
  • Yeah I'm pretty sure it's a problem with ```?.``` (optional chaining operator) but why is it an error? Since the purpose of babel is to transform code to be backwards compatible, shouldn't it be able to understand this new syntax? Or am I misunderstanding this, and there is instead some rule that says all code should be transpiled? – pastacompany May 15 '21 at 21:26
  • Looks like a bug in CRA@4.0.2. Downgrading fixes similar issues for many: https://github.com/facebook/create-react-app/issues/10518#issuecomment-775476713 – Domi May 30 '21 at 10:32

1 Answers1

2

Dor your very special case (did-jwt) you might be able to use an older release of did-jwt (just made it work on my machine with v5.1.0 for example). When did-jwt is a transitive dependency and you're using yarn, you could put this in your package.json:

  "resolutions": {
    "did-jwt": "5.1.0"
  },
Stefan
  • 3,382
  • 4
  • 23
  • 27