Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Different transpiled codes is produced for browser and server #328

Closed
lojzatran opened this issue Sep 18, 2022 · 2 comments
Closed

Different transpiled codes is produced for browser and server #328

lojzatran opened this issue Sep 18, 2022 · 2 comments
Assignees

Comments

@lojzatran
Copy link
Contributor

I'm trying to use the typescript sdk in nextjs middleware. The nextjs middleware is running Edge runtime, which is a browsed-based web API. My app is running on nodejs server, but for nextjs middleware it is a browser-based runtime.

When trying to create new sdk, the following transpiled code is being called in a file commercetools-sdk-client-v2.browser.cjs.js

const isBrowser = () => window.document && window.document.nodeType === 9;

From checking the repo, this file is transpiled from this code

As you could see, the transpiled code for browser has no checking for typeof window !== 'undefined'.

When checking the transpiled version for server, it does have the check (commercetools-sdk-client-v2.esm.js)

const isBrowser = () => typeof window !== 'undefined' && window.document && window.document.nodeType === 9;

Next.js middleware picks the browser-based file, but at the same time it is running on the server. This is expected behaviour of nextjs. As the result, it does not have window and the call window.document fails.

Why the transpiled code is different for server and client? Can you add the check for browser file as well?

@lojzatran lojzatran changed the title Different codes produced for browser and server Different transpiled codes produced for browser and server Sep 18, 2022
@lojzatran lojzatran changed the title Different transpiled codes produced for browser and server Different transpiled codes produce for browser and server Sep 18, 2022
@lojzatran lojzatran changed the title Different transpiled codes produce for browser and server Different transpiled codes is produced for browser and server Sep 18, 2022
@ajimae
Copy link
Contributor

ajimae commented Sep 19, 2022

Hi @lojzatran

I want to assume this check typeof window !== 'undefined' is irrelevant for the reason that the file .browser.cjs.js and .browser.esm.js are both expected to run in a browser environment thus making the check redundant.

However, I have opened up an issue here to know why this is the case for sure and if there is a way to prevent it.

Thanks

@ajimae
Copy link
Contributor

ajimae commented Jan 3, 2023

Hi @lojzatran

We got a response from the team behind Preconstruct and here is what they said.

Basically you can try to make the check before calling the nextjs middleware or tell the nextjs middleware to pick the .esm build or even better avoid the browser build and use the .esm or .cjs build all through.

Note, closing this issue, feel free to ope again if you have further questions.

Thanks

@ajimae ajimae closed this as completed Jan 3, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants