Ionic/Angular: Issues with spv-wallet-js-client and Webpack custom configuration

I'm implementing spv-wallet-js-client in an Ionic/Angular test project and struggling with the following issues:

• Angular not validating customWebpackConfig during development.
• Core Module Resolution Errors: errors such as "Can't resolve 'http'" indicating missing polyfills.

--

Installed package versions:

1. @angular-builders/custom-webpack@18.0.0
2. @angular-devkit/build-angular@18.2.9
3. @angular/core@18.2.8
4. @angular/common@18.2.8
5. @angular/router@18.2.8
6. @ionic/angular@8.3.3
7. @ionic/angular-toolkit@11.0.1
8. @bsv/sdk@1.1.24
9. @bsv/spv-wallet-js-client@1.0.0-beta.21
10. buffer@6.0.3
11. crypto-browserify@3.12.0
12. https-browserify@1.0.0
13. stream-browserify@3.0.0
14. stream-http@3.2.0
15. typescript@5.4.5
16. @types/node@22.7.7

--

1. First, I faced errors:

Error: Module not found: Error: Can't resolve 'http' in '/Users//Desktop/spv-wallet-sandbox/spv-wallet-user-client/node_modules/https-browserify'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default. This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to: - add a fallback 'resolve.fallback: { "http": require.resolve("stream-http") }' - install 'stream-http' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "http": false }

1. Then, I:

• Installed @angular-builders/custom-webpack.
• Added customWebpackConfig pointing to webpack.config.js in both the build and serve configurations in my angular.json.
• Created a webpack.config.js file.
• Configured webpack to resolve polyfills for Node.js core modules (e.g., http, https, buffer, etc.).
• Installed necessary polyfills with npm for modules like http, https, buffer, etc.

Then I attempted to run ionic serve, which led to schema validation errors indicating that customWebpackConfig was not allowed.

Schema validation errors showed "must NOT have additional properties(customWebpackConfig)" when running in development mode.

I commented out customWebpackConfig to check if the project could build successfully without it, which resulted in core module resolution errors.

Polyfill Configuration: Based on the errors, I confirmed the need for polyfills due to the transition to Webpack 5, which no longer includes them by default.

1. Issue remains with error

[ng] Error: Schema validation failed with the following errors: [ng] Data path "" must NOT have additional properties(customWebpackConfig).

Anyone familiar with this issue and have suggestion on how to solve it? Thank you

Continue reading...