Webpack error with "node:" syntax

[pablovargasosorio]

Before opening, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have read the guide for submitting bug reports.
• I have done my best to include a minimal, self-contained set of instructions for consistently reproducing the issue.

JavaScript Framework

Angular

Amplify APIs

Authentication

Amplify Version

v6

Amplify Categories

auth

Backend

None

Environment information

# Put output below this line
System:
    OS: macOS 14.6.1
    CPU: (8) arm64 Apple M1 Pro
    Memory: 1016.52 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 18.19.1 - ~/.nvm/versions/node/v18.19.1/bin/node
    npm: 10.2.4 - ~/.nvm/versions/node/v18.19.1/bin/npm
  Browsers:
    Chrome: 128.0.6613.138
    Edge: 128.0.2739.79
    Safari: 17.6
  npmPackages:
    @angular-devkit/build-angular: ^18.2.1 => 18.2.1
    @angular/animations: ^18.2.1 => 18.2.1
    @angular/cdk: ^18.2.1 => 18.2.1
    @angular/cli: ^18.2.1 => 18.2.1
    @angular/common: ^18.2.1 => 18.2.1
    @angular/compiler: ^18.2.1 => 18.2.1
    @angular/compiler-cli: ^18.2.1 => 18.2.1
    @angular/core: ^18.2.1 => 18.2.1
    @angular/forms: ^18.2.1 => 18.2.1
    @angular/localize: ^18.2.1 => 18.2.1
    @angular/platform-browser: ^18.2.1 => 18.2.1
    @angular/platform-browser-dynamic: ^18.2.1 => 18.2.1
    @angular/router: ^18.2.1 => 18.2.1
    @auth0/angular-jwt: ^5.2.0 => 5.2.0
    @cypress/angular:  0.0.0-development
    @cypress/mount-utils:  0.0.0-development
    @cypress/react:  0.0.0-development
    @cypress/react18:  0.0.0-development
    @cypress/schematic: ^2.5.2 => 2.5.2
    @cypress/svelte:  0.0.0-development
    @cypress/vue:  0.0.0-development
    @cypress/vue2:  0.0.0-development
    @fortawesome/angular-fontawesome: ^0.15.0 => 0.15.0
    @fortawesome/fontawesome-free: ^6.6.0 => 6.6.0
    @fortawesome/fontawesome-svg-core: ^6.6.0 => 6.6.0
    @fortawesome/free-brands-svg-icons: ^6.6.0 => 6.6.0
    @fortawesome/free-regular-svg-icons: ^6.6.0 => 6.6.0
    @fortawesome/free-solid-svg-icons: ^6.6.0 => 6.6.0
    @ng-bootstrap/ng-bootstrap: ^17.0.0 => 17.0.0
    @ngrx/effects: ^18.0.2 => 18.0.2
    @ngrx/entity: ^18.0.2 => 18.0.2
    @ngrx/router-store: ^18.0.2 => 18.0.2
    @ngrx/store: ^18.0.2 => 18.0.2
    @ngrx/store-devtools: ^18.0.2 => 18.0.2
    @types/bootstrap: ^5.2.9 => 5.2.10
    @types/canvas-confetti: ^1.4.3 => 1.6.4
    @types/jasmine: ~3.8.0 => 3.8.2
    @types/lodash: ^4.14.182 => 4.14.202
    @types/node: ^12.11.1 => 12.20.55 (22.5.0, 18.19.3)
    @types/segment-analytics: ^0.0.34 => 0.0.34
    @types/textarea-caret: ^3.0.3 => 3.0.3
    @typescript-eslint/eslint-plugin: ^5.40.1 => 5.62.0
    @typescript-eslint/parser: ^5.40.1 => 5.62.0
    aws-amplify: 6.5.1 => 6.5.1
    aws-amplify/adapter-core:  undefined ()
    aws-amplify/analytics:  undefined ()
    aws-amplify/analytics/kinesis:  undefined ()
    aws-amplify/analytics/kinesis-firehose:  undefined ()
    aws-amplify/analytics/personalize:  undefined ()
    aws-amplify/analytics/pinpoint:  undefined ()
    aws-amplify/api:  undefined ()
    aws-amplify/api/server:  undefined ()
    aws-amplify/auth:  undefined ()
    aws-amplify/auth/cognito:  undefined ()
    aws-amplify/auth/cognito/server:  undefined ()
    aws-amplify/auth/enable-oauth-listener:  undefined ()
    aws-amplify/auth/server:  undefined ()
    aws-amplify/data:  undefined ()
    aws-amplify/data/server:  undefined ()
    aws-amplify/datastore:  undefined ()
    aws-amplify/in-app-messaging:  undefined ()
    aws-amplify/in-app-messaging/pinpoint:  undefined ()
    aws-amplify/push-notifications:  undefined ()
    aws-amplify/push-notifications/pinpoint:  undefined ()
    aws-amplify/storage:  undefined ()
    aws-amplify/storage/s3:  undefined ()
    aws-amplify/storage/s3/server:  undefined ()
    aws-amplify/storage/server:  undefined ()
    aws-amplify/utils:  undefined ()
    bootstrap: ^5.3.3 => 5.3.3
    bootstrap-icons: ^1.11.3 => 1.11.3
    canvas-confetti: ^1.9.3 => 1.9.3
    chart.js: ^4.4.4 => 4.4.4
    chart.js-auto:  undefined ()
    chart.js-helpers:  undefined ()
    cypress: ^13.14.2 => 13.6.1
    cypress-localstorage-commands: ^2.2.1 => 2.2.5
    eslint: ^8.0.0 => 8.56.0
    eslint-config-prettier: ^8.5.0 => 8.10.0
    eslint-plugin-html: ^7.1.0 => 7.1.0
    eslint-plugin-rxjs-angular: ^2.0.1 => 2.0.1
    eslint-plugin-tsdoc: ^0.2.14 => 0.2.17
    gmail-tester: ^1.3.8 => 1.3.8
    highcharts: ^11.4.7 => 11.4.7
    highcharts-angular: ^4.0.1 => 4.0.1
    jasmine-core: ~3.8.0 => 3.8.0
    karma: ~6.3.0 => 6.3.20
    karma-chrome-launcher: ~3.1.0 => 3.1.1
    karma-coverage: ~2.0.3 => 2.0.3
    karma-coverage-coffee-example:  1.0.0
    karma-jasmine: ~4.0.0 => 4.0.2
    karma-jasmine-html-reporter: ~1.7.0 => 1.7.0
    karma-spec-reporter: ^0.0.36 => 0.0.36
    karma-verbose-reporter: 0.0.8 => 0.0.8
    lodash: ^4.17.21 => 4.17.21
    ng-circle-progress: ^1.7.1 => 1.7.1
    ng2-charts: ^6.0.1 => 6.0.1
    ngx-cookie-service: ^18.0.0 => 18.0.0
    ngx-markdown: ^18.0.0 => 18.0.0
    ngx-webstorage-service: ^5.0.0 => 5.0.0
    patternomaly: ^1.3.2 => 1.3.2
    prettier: 3.2.5 => 3.2.5
    replace-in-file: ^6.2.0 => 6.3.5
    rxjs: ^7.5.6 => 7.8.1 (6.6.7)
    rxjs/ajax:  undefined ()
    rxjs/fetch:  undefined ()
    rxjs/internal-compatibility:  undefined ()
    rxjs/operators:  undefined ()
    rxjs/testing:  undefined ()
    rxjs/webSocket:  undefined ()
    textarea-caret: ^3.1.0 => 3.1.0
    tslib: ^2.6.3 => 2.6.3 (1.14.1)
    typescript: ~5.4.5 => 5.4.5
    zone.js: ~0.14.10 => 0.14.10
  npmGlobalPackages:
    corepack: 0.22.0
    npm: 10.2.4

Describe the bug

After latest update to 6.6.1 the project does not compile:

Error: Webpack Compilation Error
Module build failed: UnhandledSchemeError: Reading from "node:crypto" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.

It happend to me while running Cypress, but it will fail in any project which uses libraries with "node:..." syntax.
Summarizing, this minor release may be causing environments like mine to break all the testing environment.

Expected behavior

The project can be built by Webpack.

Reproduction steps

1. Update from 6.6.0 to 6.6.1
2. Try to build the angular project by webpack

Log output

Oops...we found an error preparing this test file:

  > support/e2e.ts

The error was:

Error: Webpack Compilation Error
Module build failed: UnhandledSchemeError: Reading from "node:crypto" is not handled by plugins (Unhandled scheme).
Webpack supports "data:" and "file:" URIs by default.
You may need an additional plugin to handle "node:" URIs.
    at handle (/root/.cache/Cypress/13.14.2/Cypress/resources/app/node_modules/@packages/server/node_modules/@cypress/webpack-preprocessor/dist/index.js:212:23)
    at finalCallback (/root/.cache/Cypress/13.14.2/Cypress/resources/app/node_modules/webpack/lib/Compiler.js:441:32)
    at /root/.cache/Cypress/13.14.2/Cypress/resources/app/node_modules/webpack/lib/Compiler.js:505:17
    at /root/.cache/Cypress/13.14.2/Cypress/resources/app/node_modules/webpack/lib/HookWebpackError.js:68:3
    at Hook.eval [as callAsync] (eval at create (/root/.cache/Cypress/13.14.2/Cypress/resources/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/root/.cache/Cypress/13.14.2/Cypress/resources/app/node_modules/tapable/lib/Hook.js:18:14)
    at Cache.storeBuildDependencies (/root/.cache/Cypress/13.14.2/Cypress/resources/app/node_modules/webpack/lib/Cache.js:122:37)
    at /root/.cache/Cypress/13.14.2/Cypress/resources/app/node_modules/webpack/lib/Compiler.js:501:19
    at Hook.eval [as callAsync] (eval at create (/root/.cache/Cypress/13.14.2/Cypress/resources/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/root/.cache/Cypress/13.14.2/Cypress/resources/app/node_modules/tapable/lib/Hook.js:18:14)
    at /root/.cache/Cypress/13.14.2/Cypress/resources/app/node_modules/webpack/lib/Compiler.js:498:23
    at Compiler.emitRecords (/root/.cache/Cypress/13.14.2/Cypress/resources/app/node_modules/webpack/lib/Compiler.js:919:5)
    at /root/.cache/Cypress/13.14.2/Cypress/resources/app/node_modules/webpack/lib/Compiler.js:490:11
    at /root/.cache/Cypress/13.14.2/Cypress/resources/app/node_modules/webpack/lib/Compiler.js:885:14
    at Hook.eval [as callAsync] (eval at create (/root/.cache/Cypress/13.14.2/Cypress/resources/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/root/.cache/Cypress/13.14.2/Cypress/resources/app/node_modules/tapable/lib/Hook.js:18:14)
    at /root/.cache/Cypress/13.14.2/Cypress/resources/app/node_modules/webpack/lib/Compiler.js:882:27
    at /root/.cache/Cypress/13.14.2/Cypress/resources/app/node_modules/neo-async/async.js:2818:7
    at done (/root/.cache/Cypress/13.14.2/Cypress/resources/app/node_modules/neo-async/async.js:3522:9)
    at Hook.eval [as callAsync] (eval at create (/root/.cache/Cypress/13.14.2/Cypress/resources/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:6:1)
    at Hook.CALL_ASYNC_DELEGATE [as _callAsync] (/root/.cache/Cypress/13.14.2/Cypress/resources/app/node_modules/tapable/lib/Hook.js:18:14)
    at /root/.cache/Cypress/13.14.2/Cypress/resources/app/node_modules/webpack/lib/Compiler.js:736:33

This occurred while Cypress was compiling and bundling your test code. This is usually caused by:

- A missing file or dependency
- A syntax error in the file or one of its dependencies

Fix the error in your code and re-run your tests.

aws-exports.js

No response

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

No response

[cwomack]

Hello, @pablovargasosorio and thank you for opening this issue. We are looking into this on our side and will comment with any questions or updates as we have them.

For now, please use v6.6.0.

[cwomack]

@pablovargasosorio, we aren't able to reproduce the issue on our side with minimal angular apps. Can you provide the build configuration in your app? Also, are you using a Node version that is v20+?

Can you also try to update your webpack config to include the following (experimental fix) to see if this resolves the issue:

 {
   externals: {
       'node:crypto': 'commonjs crypto'
   }
}

[HuiSF]

Hi @pablovargasosorio thanks for reporting this issue. Could you report which version of Webpack does your Angular project use? You can find the version by executing npm list webpack at the root of your project. Thanks!

[HuiSF]

Hi @pablovargasosorio, @mixalbl4-127 while we are looking into this incompatibility issue between node core module and Webpack, we have reverted the change of adding Node.js 18 Webcrypto resolution. You can now upgrade to [email protected]. Sorry about the inconvenience.

[pablovargasosorio]

Thanks! @HuiSF I just tested with v6.6.2 and it works perfectly.
FYI my webpack version:
[email protected]

[pablovargasosorio]

@cwomack I think you can reproduce installing Cypress in your project, then import and use from a test any amplify function like Amplify.configure. When trying to run the cypress tests it will fail...

[HuiSF]

Thanks! @HuiSF I just tested with v6.6.2 and it works perfectly. FYI my webpack version: [email protected]

I think you can reproduce installing Cypress in your project, then import and use from a test any amplify function like Amplify.configure.

Thanks for following up @pablovargasosorio. We are actually using Cypress in Amplify integration test suites against React and Angular, and we haven't seen such an issue occurred so far, will keep digging.

Btw @pablovargasosorio @mixalbl4-127 do you all use the prebuilt Webpack configuration managed by React and Angular CLI, or do you have any custom configuration on top of that, if so could you share please?