Executing shopify hydrogen build --sourcemap, no corresponding .js.map file is generated.

[Jerrylijieq]

What is the location of your example repository?

https://github.com/Youniverse-FE/fezibo/actions/runs/6157700531/job/16708968253

Which package or tool is having this issue?

Hydrogen

What version of that package or tool are you using?

"@shopify/cli-hydrogen": "^5.0.2",

What version of Remix are you using?

No response

Steps to Reproduce

Hydrogen deployment goes online and executes shopify hydrogen build --sourcemap. No .js.map file is generated, but when executed in the development environment, a .js.map file is generated. I need sourcemap to monitor online errors, but I can't get it now.

Expected Behavior

Execute shopify hydrogen build --sourcemap, and the corresponding .js.map file will be generated.

Actual Behavior

Executing shopify hydrogen build --sourcemap, no corresponding .js.map file is generated.

[frandiox]

The command h2 build --sourcemap does generate sourcemap files in dist/worker and dist/client when running locally for your own testing. However, we remove them when deploying to Oxygen and I guess that's what you are experiencing in your GitHub action? (your link is not visible to external users)

Sourcemaps are a bit special in Remix. They contain both frontend and backend code because it mixes loaders/actions/components in the same files.

Therefore, having sourcemaps available in the browser would mean anyone could see your backend code, and that's why we don't provide them at the moment.

[Jerrylijieq]

Yes, I encountered this situation when operating GitHub. I need to obtain the sourcemap and upload it to the Alibaba Cloud front-end monitoring when operating GitHub. It is used to monitor online errors. I want to delete it myself after uploading it. Is there any way?

[frandiox]

I think that right now, the only way of doing this in the action is by adding an extra step/job in the GH workflow file after your site is deployed and build the project again.

As long as you don't declare the HYDROGEN_ASSET_BASE_URL environment variable when building, it will generate sourcemaps. So npm run build -- --sourcemap should do it when you run it in a different step/job.

We are going to change this behavior soon and always generate sourcemaps at the Hydrogen level, and simply ignore them in Oxygen.

[frandiox]

@Jerrylijieq This has been fixed in the last versions of @shopify/hydrogen-cli. It now generates sourcemaps by default.
If the build is for production, it will still generate sourcemaps but will remove references to it from assets, so you can at least upload sourcemaps to a third-party service.

[bitforcesrl]

Hi @frandiox the doc says tha the .map is generated by default. it works only for the server, client side js files haven't the source map
we've attached datadog as log drain and the map for the server will be used by that but for the front end code we are uncovered.
we can't debug the prod code.
i read above that the .map should be generated but not linked in the .js files, but .map are not present for JS clientside files
any help please?

https://shopify.dev/docs/api/shopify-cli/hydrogen/hydrogen-build

[frandiox]

@bitforcesrl Our build by default does not generate sourcemap for the browser when building for production. The reason is explained above:

Sourcemaps are a bit special in Remix. They contain both frontend and backend code because it mixes loaders/actions/components in the same files.
Therefore, having sourcemaps available in the browser would mean anyone could see your backend code, and that's why we don't provide them at the moment.

That said, if you avoid hardcoding secrets (using the env object instead) and you are OK with exposing your backend code to the browser, or if you are just going to upload them after build and then remove them before deploying... I think you can overwrite this option in your vite.config.js: https://vitejs.dev/config/build-options.html#build-sourcemap
Let me know if that doesn't work.

[bitforcesrl]

Source map is not generated for client assets

…

On 27 Aug 2024, at 12:39, Fran Dios ***@***.***> wrote: @bitforcesrl <https://github.com/bitforcesrl> Our build by default does not generate sourcemap for the browser when building for production. The reason is explained above <#1325 (comment)>: Sourcemaps are a bit special in Remix. They contain both frontend and backend code because it mixes loaders/actions/components in the same files. Therefore, having sourcemaps available in the browser would mean anyone could see your backend code, and that's why we don't provide them at the moment. That said, if you avoid hardcoding secrets (using the env object instead) and you are OK with exposing your backend code to the browser, or if you are just going to upload them after build and then remove them before deploying... I think you can overwrite this option in your vite.config.js: https://vitejs.dev/config/build-options.html#build-sourcemap Let me know if that doesn't work. — Reply to this email directly, view it on GitHub <#1325 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ALA3VTP2EUI7Y6AWH5D5K3LZTRJNHAVCNFSM6AAAAABNFVQGRKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDGMJSGE3DQNJRGE>. You are receiving this because you were mentioned.

[frandiox]

Fix here: #2477

[bitforcesrl]

vite flag is not read from the build

Hello, we want to push client sourcemap on prod env, because we 'll not add any private data in client JS. we'll use env var for BE secrets

vite config is not respected
build: {
// Allow a strict Content-Security-Policy
// withtout inlining assets as base64:
// assetsInlineLimit: 1000 * 1024,
sourcemap: true,
},

the flag: shopify hydrogen build --codegen --force-client-sourcemap
works on localhost but not when the CI deploy on Oxygen env.
we've tried to do a manual deploy from the CLI but even that is not adding source map on production
npx shopify hydrogen deploy --force --build-command "shopify hydrogen build --force-client-sourcemap"

What we should do to fix that?
thanks