Webcrypto import errors in 0.29.1

[bgins]

Summary

Problem

webcrypto cannot be imported or is undefined with some bundlers/build tools with webnative 0.29.1.

Impact

Some applications will not be able to use webnative at 0.29.1, depending on the build system or bundler they use if any.

Solution

Unknown. The issue appears to be related to the change over to one-webcrypto and there may be something we can change there.

Detail

Describe the bug

Parcel 2, Webpack 5, and Create React App report errors in the console. (See the screenshots below.)

To Reproduce
Steps to reproduce the behavior:

1. Clone https://github.com/fission-suite/react-todomvc
2. Upgrade webnative to 0.29.1 on each branch
3. npm start for local dev and npm run build for a build in each
4. Vite should work, but the parcel, webpack, and main branches should fail (main is CRA)

Expected behavior

No errors in the console. The app works and can do TodoMVC things.

Screenshots

CRA local development

CRA build (fails at build time)

Parcel 2 local development

Parcel 2 build

Webpack 5 local development and build

[matheus23]

I'm able to fix issues with parcel and webpack with this commit: fission-codes/one-webcrypto@a95b889

CRA remains a problem. I'm not sure why it can't import webcrypto at all 🤪

[matheus23]

"Progress" on CRA:

Directly importing one-webcrypto doesn't work as well (so the issue is not related to a dependency chain like react-todomvc -> webnative -> one-webcrypto, but also happens with react-todomvc -> one-webcrypto).

Importing files within one-webcrypto seems to fix the issue. That is:

• import { webcrypto } from "one-webcrypto" fails with "Attempted import error: 'webcrypto' is not exported from 'one-webcrypto'."
• import { webcrypto } from "one-webcrypto/dynamic.cjs" fails with an error unrelated to this line
• import { webcrypto } from "one-webcrypto/node.cjs" fails with an error unrelated to this line
• import { webcrypto } from "one-webcrypto/node.mjs" fails with an error unrelated to this line
• import { webcrypto } from "one-webcrypto/browser.mjs" fails with an error unrelated to this line

So it seems like react-scripts just fail to resolve the correct file given one-webcrypto. I have no clue what could cause this. Esp, since if it did resolve anything it would work fine, and it surely isn't package exports related, since we're including both an exports field and a main field in one-webcrypto/package.json.

[matheus23]

Okay, more updates. I removed the import "webnative" imports temporarily (leaving all other code & disabling eslint).

Then I added various forms of one-webcrypto imports to see whether CRA can import them:

• ❌ import { webcrypto } from "one-webcrypto" fails with "Attempted import error: 'webcrypto' is not exported from 'one-webcrypto'."
• ❌ import { webcrypto } from "one-webcrypto/dynamic.cjs" fails with "Attempted import error: 'webcrypto' is not exported from 'one-webcrypto/dynamic.cjs'."
• ❌ import { webcrypto } from "one-webcrypto/node.cjs" fails with "Attempted import error: 'webcrypto' is not exported from 'one-webcrypto/node.cjs'."
• ✅ import { webcrypto } from "one-webcrypto/node.mjs"
• ✅ import { webcrypto } from "one-webcrypto/browser.mjs"
• ❌ import * as oneWC from "one-webcrypto" fails with "Attempted import error: 'webcrypto' is not exported from 'one-webcrypto' (imported as 'oneWC')." (?????)
• ✅ import oneWC from "one-webcrypto" works ????? although it shouldn't?

When I run this:

import oneWC from "one-webcrypto"

console.log(oneWC)

It just prints /static/media/dynamic.30e18fbe.cjs to the console. So oneWC is initialised to a string 🤨

[matheus23]

Since react-scripts uses webpack 4, I've tried to get the webpack branch with webpack downgraded to version 4 working.
However, webpack 4's version of acornjs (the javascript parser they use) doesn't understand export * as X from "..." syntax that's used in webnative.

react-scripts probably uses babeljs liberally to transpile the javascript down so that it can be understood by webpack 4. I haven't been able to get that working.

---

I really want to get 0.29.1 out there, and I still think one-webcrypto is an improvement over what we had before, because now we can use parts of keystore-idb and webnative in nodejs and it might open the door for sveltekit. It also makes it easier for new libraries (e.g. ucans) to adopt webcrypto in a way such that they're already quite "isomorphic" out of the box and in the future we can change one-webcrypto in one place and everyone benefits.
The big downside is not supporting CRA anymore. 😕

What do you think?

[bgins]

I think the benefits outweigh support for CRA. A future release of CRA might use webpack 5 or another bundler, and we could re-evaluate it then.

Create React App is by their own admission slow to release new versions. In the meantime, we can recommend Vite, Parcel, and Webpack 5, and we have good examples of how to migrate from CRA to these bundlers in the React TodoMVC repository.

[bgins]

I may have prematurely closed this issue, because we may need a new version of one-webcrypto! Feel free to close it if we are good to go.

[matheus23]

We have a new version of one-webcrypto: 1.0.3. I've already released it.
We need to merge PRs to upgrade the one-webcrypto version into keystore-idb and webnative, though.
Here's the one for keystore-idb: fission-codes/keystore-idb#61
I'm waiting to merge&release that one so that we can get that into webnative.

[bgins]

#321 fixes the webcrypto import errors.

Turns out the Webpack error was something else. Documented it in a new issue: #323

[matheus23]

Closing this, because #321 is merged now.