The project cannot run locally - ReferenceError: crypto is not defined

[rrmistry]

Tried to follow the recommendations here for my fork to open AFFiNE in codespace.

I did this locally by opening repo in a VS Code Dev Container.

After opening, VS Code builds the dev container image and runs the docker-compose setup .devcontainer/docker-compose.yml as 3 containers. On startup VS Code also runs ./.devcontainer/setup-user.sh and ./.devcontainer/build.sh in the app container.

Once ready I opened a terminal within VS Code and ran yarn dev then selected @affine/dev and expected a running web app locally.

But instead I get this error:

NonErrorEmittedError: (Emitted value instead of an instance of Error) ReferenceError: crypto is not defined

Full console output

root ➜ /workspaces/AFFiNE (canary) $ yarn run dev
✔ Which package do you want to dev? @affine/web
[bundle] Packing package @affine/web...
<i> [webpack-dev-server] [HPM] Proxy created: /api  -> http://localhost:3010
<i> [webpack-dev-server] [HPM] Proxy created: /socket.io  -> http://localhost:3010
<i> [webpack-dev-server] [HPM] Proxy created: /graphql  -> http://localhost:3010
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8080/, http://[::1]:8080/
<i> [webpack-dev-server] On Your Network (IPv4): http://172.18.0.2:8080/
<i> [webpack-dev-server] Content not from webpack is served from '/workspaces/AFFiNE/packages/frontend/core/public' directory
<i> [webpack-dev-server] 404s will fallback to '/index.html'
<i> [webpack-dev-middleware] wait until bundle finished: /
assets by info 26.4 MiB [immutable] 533 assets
assets by chunk 8.79 MiB (id hint: default) 47 assets
assets by path static/ 23.9 MiB 35 assets
assets by path fonts/*.woff 2.34 MiB 29 assets
assets by path imgs/ 1.76 MiB 11 assets
assets by path onboarding/*.mp4 1.32 MiB
  asset onboarding/ai-onboarding.general.4.mp4 763 KiB [emitted] [from: ../../core/public/onboarding/ai-onboarding.general.4.mp4] [copied]
  + 4 assets
assets by path *.html 6.73 KiB
  asset index.html 3.37 KiB [emitted]
  asset selfhost.html 3.36 KiB [emitted]
assets by path *.json 2.69 KiB
  asset manifest.json 1.45 KiB [emitted] [from: ../../core/public/manifest.json] [copied]
  asset assets-manifest.json 1.24 KiB [emitted]
+ 340 assets
Entrypoint app 43.3 MiB (46.6 MiB) = 11 assets 512 auxiliary assets
orphan modules 4.12 MiB [orphan] 1948 modules
runtime modules 47.4 KiB 64 modules
javascript modules 42.8 MiB 6184 modules
asset modules 24.9 MiB (asset) 29 KiB (javascript) 534 modules
json modules 3.49 MiB
  modules by path ../../i18n/src/ 1.8 MiB 22 modules
  modules by path ../../core/src/ 750 KiB 20 modules
  modules by path ../../../../node_modules/ 530 KiB 16 modules
  modules by path ../../templates/ 432 KiB 16 modules
  modules by path ../../component/src/ 19.1 KiB
    ../../component/src/ui/lottie/collections-icon.json 7.82 KiB [built] [code generated]
    + 2 modules

ERROR in ../../../../blocksuite/affine/blocks/block-note/src/components/edgeless-note-background.css.ts
Module build failed (from ../../../../node_modules/@vanilla-extract/webpack-plugin/loader/dist/vanilla-extract-webpack-plugin-loader.cjs.js):
NonErrorEmittedError: (Emitted value instead of an instance of Error) ReferenceError: crypto is not defined
    at processResult (/workspaces/AFFiNE/node_modules/webpack/lib/NormalModule.js:888:12)
    at /workspaces/AFFiNE/node_modules/webpack/lib/NormalModule.js:1037:5
    at /workspaces/AFFiNE/node_modules/loader-runner/lib/LoaderRunner.js:400:11
    at /workspaces/AFFiNE/node_modules/loader-runner/lib/LoaderRunner.js:195:20
    at context.callback (/workspaces/AFFiNE/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at /workspaces/AFFiNE/node_modules/@vanilla-extract/webpack-plugin/loader/dist/vanilla-extract-webpack-plugin-loader.cjs.dev.js:102:5
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
    at runNextTicks (node:internal/process/task_queues:64:3)
    at process.processImmediate (node:internal/timers:447:9)
    at process.callbackTrampoline (node:internal/async_hooks:128:17)
 @ ../../../../blocksuite/affine/blocks/block-note/src/components/edgeless-note-background.ts 387:0-57 484:14-31
 @ ../../../../blocksuite/affine/blocks/block-note/src/effects.ts 1:0-79 13:54-76
 @ ../../../../blocksuite/affine/all/src/effects.ts 14:0-84 74:4-20
 @ ../../core/src/blocksuite/block-suite-editor/index.ts 3:0-66 5:0-9
 @ ../../core/src/utils/first-app-data.ts 2:0-42
 @ ../../core/src/desktop/pages/upgrade-to-team/index.tsx 10:0-75 463:35-57
 @ ../../core/src/desktop/router.tsx 97:26-59
 @ ./src/app.tsx 4:0-53 86:36-42
 @ ./src/index.tsx 6:0-28 17:34-37

ERROR in ../../../../blocksuite/affine/blocks/block-note/src/note-edgeless-block.css.ts
Module build failed (from ../../../../node_modules/@vanilla-extract/webpack-plugin/loader/dist/vanilla-extract-webpack-plugin-loader.cjs.js):
NonErrorEmittedError: (Emitted value instead of an instance of Error) ReferenceError: crypto is not defined
    at processResult (/workspaces/AFFiNE/node_modules/webpack/lib/NormalModule.js:888:12)
    at /workspaces/AFFiNE/node_modules/webpack/lib/NormalModule.js:1037:5
    at /workspaces/AFFiNE/node_modules/loader-runner/lib/LoaderRunner.js:400:11
    at /workspaces/AFFiNE/node_modules/loader-runner/lib/LoaderRunner.js:195:20
    at context.callback (/workspaces/AFFiNE/node_modules/loader-runner/lib/LoaderRunner.js:124:13)
    at /workspaces/AFFiNE/node_modules/@vanilla-extract/webpack-plugin/loader/dist/vanilla-extract-webpack-plugin-loader.cjs.dev.js:102:5
    at processTicksAndRejections (node:internal/process/task_queues:95:5)
    at runNextTicks (node:internal/process/task_queues:64:3)
    at process.processImmediate (node:internal/timers:447:9)
    at process.callbackTrampoline (node:internal/async_hooks:128:17)
 @ ../../../../blocksuite/affine/blocks/block-note/src/note-edgeless-block.ts 389:0-70 390:0-52 392:102-122 445:45-70 460:16-39 580:38-63 586:16-44 603:18-38 628:13-34
 @ ../../../../blocksuite/affine/blocks/block-note/src/effects.ts 8:0-89 11:26-46 11:48-74
 @ ../../../../blocksuite/affine/all/src/effects.ts 14:0-84 74:4-20
 @ ../../core/src/blocksuite/block-suite-editor/index.ts 3:0-66 5:0-9
 @ ../../core/src/utils/first-app-data.ts 2:0-42
 @ ../../core/src/desktop/pages/upgrade-to-team/index.tsx 10:0-75 463:35-57
 @ ../../core/src/desktop/router.tsx 97:26-59
 @ ./src/app.tsx 4:0-53 86:36-42
 @ ./src/index.tsx 6:0-28 17:34-37

affine (webpack 5.98.0) compiled with 2 errors in 111926 ms

The last few lines of the `.devcontainer/build.sh` script output

    Building [=======================> ] 336/346: pdf-extract, affine_server_native(build), napi, y-octo                                                                                                          
   Compiling affine_common v0.1.0 (/workspaces/AFFiNE/packages/common/native)
    Building [=======================> ] 337/346: pdf-extract, affine_common, napi, y-octo                                                                                                                        
   Compiling mimalloc v0.1.43
    Building [=======================> ] 338/346: pdf-extract, affine_common, napi, mimalloc                                                                                                                      
   Compiling napi-derive v3.0.0-alpha.26
    Building [=======================> ] 339/346: napi-derive, pdf-extract, affine_common, napi                                                                                                                       Building [=======================> ] 340/346: v_htmlescape, pdf-extract, affine_common, napi                                                                                                                  
   Compiling file-format v0.26.0
    Building [=======================> ] 341/346: pdf-extract, affine_common, file-format, napi                                                                                                                       Building [=======================> ] 342/346: pdf-extract, affine_common, file-format                                                                                                                             Building [=======================> ] 343/346: pdf-extract, affine_common                                                                                                                                          Building [=======================> ] 344/346: pdf-extract                                                                                                                                                         Building [=======================> ] 345/346: affine_server_native                                                                                                                                            
    Finished `release` profile [optimized] target(s) in 6m 45s
[@affine/server] yarn prisma db push
Prisma schema loaded from schema.prisma
Datasource "db": PostgreSQL database "affine", schema "public" at "db:5432"

🚀  Your database is now in sync with your Prisma schema. Done in 3.69s

✔ Generated Prisma Client (v5.22.0) to ./node_modules/@prisma/client in 1.33s

┌─────────────────────────────────────────────────────────┐
│  Update available 5.22.0 -> 6.5.0                       │
│                                                         │
│  This is a major update - please follow the guide at    │
│  https://pris.ly/d/major-version-upgrade                │
│                                                         │
│  Run the following to update                            │
│    yarn add --dev prisma@latest                         │
│    yarn add @prisma/client@latest                       │
└─────────────────────────────────────────────────────────┘
Running the postCreateCommand from devcontainer.json...

[2507975 ms] Start: Run in container: /bin/sh -c bash ./.devcontainer/setup-user.sh
remote: Total 0 (delta 0), reused 0 (delta 0), pack-reused 0 (from 0)
fatal: a branch named 'canary' already exists

What am I missing?

---

Same discussion title, different error: #6223

[mawnir]

have you fixed the problem?

[rrmistry]

No, unfortunately.

Didn't get more time to troubleshoot further.