Module is not transpiled into ES5?

[oslfmt]

I got this error during build time using CRA:

./node_modules/did-jwt/lib/index.js 192:53
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 JS toolchains, babel, and webpack, since that seemed to be the problem. I've always relied of CRA's default toolchain so I've never really messed with these things. From my understanding from my research, there is a default rule in that CRA includes in it's webpack config file, that excludes transpiling the node_modules directory, as this would significantly slow down the build time. Usually this is fine, since the dependencies have already been transpiled from ES6 to ES5.

However, I am guessing that this module, did-jwt, has not been transpiled from ES6 to ES5, and thus causes this error. Can anyone confirm if this is correct? And does anyone know any solutions to this problem?

[mirceanis]

That is correct. The module build target is ES2018 (so, even newer than es6).
Most browsers and recent versions of node already support this.
If necessary, I suppose the build target could be lowered, but es5 is fairly old and will likely increase the transpiled size.

I don't know what CRA is, so it would be helpful to know which is the maximum version that your system supports.
To check locally you would do something like this:

git clone git@github.com:decentralized-identity/did-jwt.git
cd did-jwt
nano tsconfig.json # edit tsconfig.json#L4 and set the desired `target`
yarn install
yarn build
yarn link
# now the local did-jwt is ready to be used instead of the one from npmjs

cd path/to/your/project
yarn link did-jwt
yarn install
# now your project is using the locally built version of did-jwt
yarn build/test/etc... # run your tests to see which version works

Please try this and report back

[oslfmt]

CRA stands for create-react-app. It is a automated boilerplate for react apps that comes with a preconfigured tool chain. I just did the commands you gave above, but did not edit the target, it is still ES2018, but I restarted my app and it works now. I don't know what the last command does, so I didn't run that. However, now I have both npm and yarn in my project, is this a problem?

Also, just curious, why does this work and what's going on behind the scenes here?

[mirceanis]

The first yarn link call prepares the local copy of did-jwt for usage. You only need to do this once. But, if you are changing something in the did-jwt source, you will need to re-build before your changes will be visible in your project.
The second yarn link did-jwt effectively replaces the downloaded did-jwt folder from your node_modules/ with a link to the local copy of did-jwt.
Also, these changes are only specific to your local machine. Everywhere else, yarn will use the version declared in package.json and resolve dependencies from npmjs.

It's usually not ok to hold both yarn.lock and package-lock.json files in your app, and deciding on one means removing the lock file of the other. It's also a good idea to re-install all dependencies by clearing node_modules/ and running yarn install or npm install again.

My instructions from earlier should also work with npm instead of yarn:

git clone git@github.com:decentralized-identity/did-jwt.git
cd did-jwt
nano tsconfig.json # edit tsconfig.json#L4 and set the desired `target`
npm install
npm run build
npm link
# now the local did-jwt is ready to be used instead of the one from npmjs

cd path/to/your/project
npm link did-jwt
npm install
# now your project is using the locally built version of did-jwt
npm run build/test/etc... # run your tests to see which version works

We prefer yarn because it is usually faster and causes fewer issues with node-gyp.

That being said, I'm surprised that the local install works while the official install doesn't. This makes me think it may have been just a temporary issue. Can you try to do a clean install using just yarn?

cd /path/to/your/project
yarn unlink did-jwt
rm -rf node_modules
yarn install

[oslfmt]

This seemed to work for me. Any idea why I was getting the error previously? Also, I removed package-lock.json. What do you mean by thsi line: "Also, these changes are only specific to your local machine. Everywhere else, yarn will use the version declared in package.json and resolve dependencies from npmjs."? Thanks!

[mirceanis]

I'm not sure why the errors appeared previously. The stack of tools required to build an app is pretty high, and experience tells us that sometimes things step out of alignment. In these cases, it's best to clear the table and start fresh (remove node_modules, cleare caches, restart the machine, grab a coffe, etc). It's not a fault of this project or yours.

I meant that linking is only specific to your computer.
If you share your source code with someone else, their computer won't use the same links as you and they will be using the normal dependency is declared in package.json and download it from npmjs instead of building it locally.
yarn link and npm link are meant to be used locally, for debugging.

I'm closing this now, please reopen if there's work still needed here.

[oslfmt]

The error has returned! I tried redoing the commands I did before as shown above a couple times, but this time it is persisting. I am not using this package directly, but rather it is a dependency of another package I'm using