Webpack build issues

[hiaux0]

I'm trying to use this package, but encountered issues with webpack while building.
Also, I'm no bundling expert, so I'd like to get help in troubleshooting

Steps to reproduce

Note, both ways yield different errors, but underlying problem should be the same, and relates to

You should not need to recompile .ts files there, but if you really want to, use the allowTsInNodeModules option.
See: microsoft/TypeScript#12358
Edit: hmm, not sure anymore about this one

Quickest way it to use

1. https://github.com/LIT-Protocol/CeramicIntegrationExample
2. yarn
3. yarn watch
4. Error log

Error log (expand)

ERROR in ./node_modules/lit-ceramic-sdk/integration.ts 3:12
Module parse failed: Unexpected token (3:12)
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
| // Don't forget to rebuild
| import { createIDX } from "./idx";
> import type { CeramicApi } from "@ceramicnetwork/common";
| import { _encryptWithLit, _decryptWithLit } from "./lit";
| import { _startLitClient } from "./client";
@ ./node_modules/lit-ceramic-sdk/index.ts 3:0-44 5:0-23
@ ./src/app.ts

Other

1. Have webpack based project
2. install lit-ceramic-sdk
3. build
4. Error log
   

Error log (expand)

ERROR in ./node_modules/did-jwt/lib/index.module.js 1665:17
Module parse failed: Unexpected token (1665:17)
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
|               // TODO: should be able to use non base58 keys too
|               return key.type === 'X25519KeyAgreementKey2019' && Boolean(key.publicKeyBase58);
>             })) ?? [];
|             if (!pks.length && !controllerEncrypters.length) throw new Error(`no_suitable_keys: Could not find x25519 key for ${did}`);
|             return pks.map(pk => x25519Encrypter(base58ToBytes(pk.publicKeyBase58), pk.id)).concat(...controllerEncrypters);
@ ./node_modules/dids/lib/did.js 14:18-36
@ ./node_modules/dids/lib/index.js
@ ./node_modules/lit-ceramic-sdk/ceramic.ts
@ ./node_modules/lit-ceramic-sdk/integration.ts
@ ./node_modules/lit-ceramic-sdk/index.ts

[glitch003]

Can you make sure your webpack is set up to compile TypeScript? Instructions are here: https://webpack.js.org/guides/typescript/

This shouldn't be happening in the CeramicIntegrationExample repo, though. I will investigate that now and follow up here.

[hiaux0]

webpack typescript

webpack: https://github.com/PrimeDAO/prime-deals-dapp/blob/3f9e8e8736d84664b738d7d0d885dc69b87386b1/webpack.config.js#L251
tsconfig: https://github.com/PrimeDAO/prime-deals-dapp/blob/development/tsconfig.json

I looked into this issue webpack/webpack#10227, that proposed to change
target to es2019, which we have

[glitch003]

Hey, I just updated this package to 1.1.7. It provides the typescript precompiled, so it should "just work" and all the typescript errors should go away. Can you give it a try? I also updated https://github.com/LIT-Protocol/CeramicIntegrationExample to use it with Parcel and it works great.

[hiaux0]

Has not fixed our issue unfortunately.
But I think, now it's not "your fault" anymore, which likely wasn't one in the first place.
I was suspecting something with the packaging of this repo.

Now it still points to another package did-jwt:

ERROR in ./node_modules/did-jwt/lib/index.module.js 1665:17
Module parse failed: Unexpected token (1665:17)
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
|               // TODO: should be able to use non base58 keys too
|               return key.type === 'X25519KeyAgreementKey2019' && Boolean(key.publicKeyBase58);
>             })) ?? [];
|             if (!pks.length && !controllerEncrypters.length) throw new Error(`no_suitable_keys: Could not find x25519 key for ${did}`);
|             return pks.map(pk => x25519Encrypter(base58ToBytes(pk.publicKeyBase58), pk.id)).concat(...controllerEncrypters);
 @ ./node_modules/dids/lib/did.js 14:18-36
 @ ./node_modules/dids/lib/index.js
 @ ./node_modules/lit-ceramic-sdk/dist/ceramic.js
 @ ./node_modules/lit-ceramic-sdk/dist/integration.js
 @ ./node_modules/lit-ceramic-sdk/dist/index.js
 @ ./src/playground/ceramicServicePlayground/ceramicServicePlayground.ts
 @ ./src/playground/playgroundWelcome/playgroundWelcome.html
 @ ./src/playground/playgroundWelcome/playgroundWelcome.ts
 @ ./src/app.ts
 @ ./src/main.ts
 @ ./node_modules/aurelia-webpack-plugin/runtime/empty-entry.js
 @ multi aurelia-webpack-plugin/runtime/empty-entry aurelia-webpack-plugin/runtime/pal-loader-entry aurelia-bootstrapper 

Still greatly appreciate the quick response and update!

[glitch003]

Bummer that it's still not working though! if you can't figure it out, and you're able to switch to Parcel instead of Webpack, that seems to work really smoothly.