[🐞] resolveUrl hook doesn't work

[tcetin]

Describe the bug

I am trying to implement the partytown for the Facebook pixel. And there is a CORS issue. I created a reverse proxy to solve the problem. I am trying to map the proxy to the original connect.facebook.net hostname by using the resolveUrl hook. It still gives the CORS issue.

I use NextJS 13.

Reproduction

I work on localhost.

Steps to reproduce

Implement the Partytown configuration component in the _document.ts.

<Partytown
                        debug={true}
                        logScriptExecution
                        forward={["dataLayer.push", "fbq", "uetq"]}
                        resolveUrl={function (url) {
                            const proxyMap = {
                                "connect.facebook.net": `https://reverse-proxy-url`
                            }
                            url.hostname = proxyMap[url.hostname] || url.hostname
                            return url
                        }}
                    />

See the cors issue still that the resolveUrl hook doesnt work correctly.

Browser Info

Chrome

Additional Information

No response

[mhevery]

I think resolveUrl hook is called for all URLs. can you add console.log to it to see what it is getting called with?

[tcetin]

It was not working when I use "worker" strategy in NextJS. But it works without using "worker" strategy in NextJS. It can be also NextJS issue.

[samparmenter]

I believe I am having the same issue. It doesn't seem like the resolveUrl function is being called at all.

Putting a console.log inside the resolveUrl function isn't resulting in anything being written to the console and the function doesn't change the behaviour of Partytown no matter what the function contains. Scripts without an issue with CORs still get fetched successfully and those with CORs issues still have issues.

            <Partytown
              debug={true}
              forward={['dataLayer.push', 'fbq']}
              resolveUrl={(url, location) => {
                return 'balls';
              }
              }
            />
            <script
              type="text/partytown"
              src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GA_TRACKING_ID}`}
            ></script>
            <script
              type="text/partytown"
              dangerouslySetInnerHTML={{
                __html: `window.dataLayer = window.dataLayer || [];
                  function gtag(){dataLayer.push(arguments);}
                  gtag('js', new Date());
                  gtag('config', '${process.env.NEXT_PUBLIC_GA_TRACKING_ID}');`,
              }}
            />

[developerKumar]

I am also facing the same issue.

When I pass resolveUrl function as a prop, then it converts the function to a string, as seen in the above image.

I think the issue is at https://github.com/BuilderIO/partytown/blob/main/src/integration/snippet.ts#L7

[gioboa]

@developerKumar I see. May I ask you to drop a PR for that?

[franpeza]

I am also facing the same issue.

When I pass resolveUrl function as a prop, then it converts the function to a string, as seen in the above image.

I think the issue is at https://github.com/BuilderIO/partytown/blob/main/src/integration/snippet.ts#L7

If I'm not mistaken the function is serialized and converted to string in order to be sent to the worker and accesible from there. This way the worker can invoke it.

[developerKumar]

@developerKumar I see. May I ask you to drop a PR for that?

Sure @gioboa , Still debugging it.

[totodot]

Hi any update?