Types error with webpack 5

[JFGHT]

We are using the lib clientside as devDependency in order to be able to work with the types. We have today upgraded to webpack 5 and this is the error we are getting (with url, util, querystring and https):

ERROR in ./node_modules/@mollie/api-client/dist/mollie.esm.js 4:0-31
Module not found: Error: Can't resolve 'util' in '/home/X/apps/Y/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 }
 @ ./src/store/modules/payments.ts 40:17-46
 @ ./src/store/modules/index.ts 16:39-60
 @ ./src/store/index.ts 16:38-64
 @ ./src/vue.ts 76:36-54
 @ ./src/main.ts 11:34-50

I tried fixing this problem by using both methods:

• Empty modules: crashes in frontend (obviously, since you are not using actual code for those modules).
• Installing the deps and resolving them -> crashes with https-browserify.

Maybe it's time to decouple the types from the actual lib, or?

Edit: our temporary solution was just to copy paste the types we are currently using.

[Pimm]

Webpack notes that the error originates in mollie.esm.js. This file does not contain the TypeScript type definitions; but the actual runtime code. If you are only using the library in the context of the TS compiler, Webpack shouldn't be touching this file at all.

Could you share the code in payments.ts which contains the imports causing you trouble?

[JFGHT]

Webpack notes that the error originates in mollie.esm.js. This file does not contain the TypeScript type definitions; but the actual runtime code. If you are only using the library in the context of the TS compiler, Webpack shouldn't be touching this file at all.

Could you share the code in payments.ts which contains the imports causing you trouble?

Just this line:

import { PaymentStatus } from '@mollie/api-client';

[Pimm]

Could you try the following?

import type { PaymentStatus } from '@mollie/api-client';

[JFGHT]

I didn't know this trick, which I will definitely use from now on, but in this case it does not work because PaymentStatus is an enum, so it's not Typescript, but it will help with the rest of the types.

Edit: this is the way I'm importing the types and works;

import type { PaymentData } from '@mollie/api-client/dist/types/src/data/payments/data';

[Pimm]

Thanks for checking in again.

Enums in TypeScript are simultaneously (compile time) types and (runtime) values. If you need the value ‒ because you want to use PaymentStatus.paid, for instance ‒ then import type won't work (because import type imports the type; not the value).

If you are going to import PaymentStatus as a value, you are importing runtime code. This causes the Webpack issue you're having. Strictly speaking, @mollie/api-client is now a dependency, not a devDependency.

For enums specifically, I would personally choose the solution you initially proposed: copy the code.

• If you want to use the types of this library (such as Payment) in your client, use import type.
• If you want to use enum values (such as PaymentStatus.paid) in your client, copy the enum to your codebase.

To anyone who stumbles upon this issue, note that this is an exceptional situation. Typically, you will want to check the status of a payment ‒ and therefore compare payment.status to PaymentStatus.paid ‒ on your server.