Webpack <5 error with NG 15

[PatrickRitskes-IG]

Hey Everyone,

When I want to add the Mollie API to my Angular 15 app, and serve it, I get the following compile errors:

Compiled with problems:X

ERROR in ./node_modules/@mollie/api-client/dist/mollie.esm.js 1:0-26

Module not found: Error: Can't resolve 'https' in 'C:\webdev\giant-frontend\node_modules\@mollie\api-client\dist'

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: { "https": require.resolve("https-browserify") }'
• install 'https-browserify' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "https": false }

ERROR in ./node_modules/@mollie/api-client/dist/mollie.esm.js 3:0-40

Module not found: Error: Can't resolve 'querystring' in 'C:\webdev\giant-frontend\node_modules\@mollie\api-client\dist'

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: { "querystring": require.resolve("querystring-es3") }'
• install 'querystring-es3' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "querystring": false }

ERROR in ./node_modules/@mollie/api-client/dist/mollie.esm.js 4:0-31

Module not found: Error: Can't resolve 'util' in 'C:\webdev\giant-frontend\node_modules\@mollie\api-client\dist'

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: { "util": require.resolve("util/") }'
• install 'util' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "util": false }

ERROR in ./node_modules/@mollie/api-client/dist/mollie.esm.js 5:0-26

Module not found: Error: Can't resolve 'url' in 'C:\webdev\giant-frontend\node_modules\@mollie\api-client\dist'

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: { "url": require.resolve("url/") }'
• install 'url' If you don't want to include a polyfill, you can use an empty module like this: resolve.fallback: { "url": false }

Want can I do about it?

[Pimm]

Given that you are using Angular and your project is named giant-frontend, I'm making the assumption that you have included this library into your frontend project. Although possible, we strongly recommend you do not do this.

Calling the Mollie server from the client means the API key is communicated between the client and the Mollie server. Thereby it ends up in the hands of your users.

With your API key, anyone can make requests to Mollie on your behalf. There is no way for Mollie to distinguish valid payments coming from your app from malicious requests coming from someone who extracted your API key. They could issue refunds, or extract private information of your customers. That is a major security issue.

The secure option is to set up a Node.js server. This server will include this library, and will have access to the API key. From your Angular app, rather than calling mollieClient.payments.create directly, you'll make a request to your server and your server will in turn call mollieClient.payments.create.

Alternatively, you can set up a PHP, Ruby, or Python server instead of a Node.js one.

[PatrickRitskes-IG]

No I've included this by npm, i'm using: "@mollie/api-client": "3.7.0",

within my package.json right now

[Pimm]

Is this the package.json of your frontend? You should be including this library on your server.

[PatrickRitskes-IG]

Yes like I said this is in my package.json right now.

On my server???

I really don't get it!

We have a Mollie account/dashboard So I'm gonna make a connection with this account via the apiKey right?

And make calls to this API to create payments etc, right?

[Pimm]

This client is designed to be used server-side, just like the PHP, Ruby, and Python clients. There should be no direct correction between your client-side application and Mollie.

If you wish to initiate a payment from the client-side application, you should make some kind of request (HTTP or something else) to your server, which in turn connects to Mollie using one of the Mollie client to create the payment. Please see this description by Florian.