[Typescript-fetch] url.URLSearchParams is not a constructor

[Place1]

Description

The typescript-fetch client using swagger 2.3.0 uses import * as url from 'url' which is a native node_module.

I'm using webpack to to bundle my application and it's using node-libs-browser to substitute native node modules for browser compatible ones, including the url module.

The url module is being pulled in through webpack:
webpack --> escope --> node-libs-browser --> url

Are we suppose to import a pollyfill to use this generator? I'd hope not :(

Swagger-codegen version

2.3.0. I'm not sure if this is a regression as there was intentional breaking changes in this version. I also believe this version introduced the dependency on the 'url' module.

Swagger declaration file content or url

Command line used for generation

Steps to reproduce

Related issues/PRs

Suggest a fix/enhancement

My solution would be to not use native node modules given the typescript/fetch generator is supposed to work in the browser as well.

[wing328]

cc @TiFu @taxpon @sebastianhaas @kenisteward @Vrolijkx

[kenisteward]

Please check the compatibility table here https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams/URLSearchParams#Browser_compatibility

Make sure the browser you are using supports it. urlsearch params is a browser spec.

[Place1]

Browser compatibility isn't really the issue here (I'm using latest chrome while developing). The issue is that webpack, by default, injects a different version of the 'url' module which is missing the urlsearchparam object constructor.

So I guess my point is that we should refactor the generator to avoid using the 'URL' module.

[kenisteward]

The typescript fetch lib should be a browser only client which is why I'm confused you are getting the error.

Are you getting this error at compile time or runtime?

Also can't you tell webpack not to inject that module or are you using it for other things in your app?

[Place1]

It's a run time error. I could tell webpack to ignore the url module, but that's not really ideal for a few reasons, it may adversely effect other dependencies in my application that (intentionally or unintentionally) bring in node's url module, but also for new developers trying to use the typescript fetch generator with their webpack based apps (most people) will run into this same issue which hurts the usability of the generator. It's a fair bit of effort to polyfill, configure webpack, solve problems with other dependencies (potentially) just for the generator to use a method or two from the 'url' module. Wouldn't it be best for the generator to go about it another way? I'm happy to put in the effort and make a pull request if others are open to the idea :D

[kenisteward]

I'd like to see what you have planned. The problem doesn't seem to be the generated code but how the code is being used. Like you said, the problem is that a module that doesn't contain those classes is being substituted for the browser API that should be using it. Imho that library should pass through to the browser API if it doesn't have them or define those classes itself if it is supposed to replace the browser based one. I don't think this has come up before even for others using webpack because they aren't using that extra module but I can't be sure. Anywho what would your solution be?

…

On Mon, Sep 4, 2017, 9:44 PM PLACE ***@***.***> wrote: It's a run time error. I could tell webpack to ignore the url module, but that's not really ideal for a few reasons, it may adversely effect other dependencies in my application that (intentionally or unintentionally) bring in node's url module, but also for new developers trying to use the typescript fetch generator with their webpack based apps (most people) will run into this same issue which hurts the usability of the generator. It's a fair bit of effort to polyfill, configure webpack, solve problems with other dependencies (potentially) just for the generator to use a method or two from the 'url' module. Wouldn't it be best for the generator to go about it another way? I'm happy to put in the effort and make a pull request if others are open to the idea :D — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#6403 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AMPLtWMBFhLeNuRfUctr5zxRp5_2Ys9qks5sfKeEgaJpZM4PGwOo> .

[Place1]

The problem doesn't seem to be the generated code but how the code is being used.

Yeah pretty much.

don't think this has come up before even for others using webpack because they aren't using that extra module but I can't be sure.

My guess is that because most people are using the stable version (2.2.3) of swagger they haven't yet encountered this as it was introduced somewhere after 2.2.3 (i think in 2.3.0)

Anywho what would your solution be?

as a quick way to remove the dependency on URLSearchParams we could use querystring.stringify() instead. The good thing about querystring is that it's just a light wrapper around encodeURIComponent which means no polyfills are ever required and it's unlikely that webpack or other build tools will get in the way.
#4852 is adding support for FormData so perhaps we could see the best way to make this change after that PR is accepted?

[kenisteward]

This sounds like a good plan .

…

On Tue, Sep 5, 2017, 12:55 AM PLACE ***@***.***> wrote: The problem doesn't seem to be the generated code but how the code is being used. Yeah pretty much. don't think this has come up before even for others using webpack because they aren't using that extra module but I can't be sure. My guess is that because most people are using the stable version (2.2.3) of swagger they haven't yet encountered this as it was introduced somewhere after 2.2.3 (i think in 2.3.0) Anywho what would your solution be? as a quick way to remove the dependency on URLSearchParams we could use querystring.stringify() instead. The good thing about querystring is that it's just a light wrapper around encodeURIComponent which means no polyfills are ever required and it's unlikely that webpack or other build tools will get in the way. #4852 <#4852> is adding support for FormData so perhaps we could see the best way to make this change after that PR is accepted? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#6403 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AMPLtSqtUzW8GO480RFcV1A47BK4njXgks5sfNQjgaJpZM4PGwOo> .

[romor]

I am facing the same problem.
How can I temporary solve it by telling webpack to ignore the url module?

[Place1]

I just had a look at #4852 and it looks like it is using querystring.stringify. It looks like this issue will be solved by that pull. I haven’t checked it out to confirm though.

@romor my solution was to just not upgrade yet :/ sorry if that’s not helpful.

[wing328]

How can I temporary solve it by telling webpack to ignore the url module?

What about customizing the templates with the -t option?

[salim7]

Hi, we also have this issue. Will #4852 solve this? Otherwise, how can I help to get this issue fixed?

[ikorolev93]

Workaround: before using anything from the generated code, do:

import * as url from "url";
url.URLSearchParams = URLSearchParams;

[hiroppy]

I have the same problem...

[maschnetwork]

Same here

[scyclops]

I worked around this by adding the following to the generated code below the line import * as url from "url";

import {stringify as qs_stringify} from "querystring";

class URLSearchParams {
    constructor() {
        this.data = {};
    }

    set(k, v) {
        this.data[k] = v;
    }

    toString() {
        return qs_stringify(this.data);
    }
}

url.URLSearchParams = URLSearchParams;

[chawax]

I solved the problem by adding url-search-params-polyfill as dependency and patching the url lib in node_modules with patch-package

exports.URLSearchParams = URLSearchParams;

[mcamenzind]

Workaround: before using anything from the generated code, do:

import * as url from "url";
url.URLSearchParams = URLSearchParams;

This is THE solution. You monkey-patch the url package before calling the swagger generated client lib.

[wallid]

I'm currently having this issues. What is the current progress on this issue?

[ald4-rgb]

i find the solved the problem is than angular some time expor these library ajaja or vs
i think is better solved is erase because couse much troubles
//import { URLSearchParams } from 'url';

[ortegapedro88]

is working for me using

const params = new URL(document.baseURI).searchParams;
const code = params.get("code");

[stearm]

any update on this? I would not use workarounds 😢

[dimuska139]

Any news?

[dimuska139]

@HugoMario Hello. Please tell me when to expect the Docker image swaggerapi/swagger-codegen-cli release with this fix?

[RAJI-Zakaria]

no need for import from 'url' ==> it's imported by default.
you can check
https://developer.mozilla.org/en-US/docs/Web/API/URLSearchParams

        const params = new URLSearchParams();
.......
        if(searchParams.get('orderBy')) params.append('orderBy', searchParams.get('orderBy')!)

it works fine for me