Be able to customize esbuild chunk names from esbuild to avoid adblock

[cldellow]

I've noticed that if I have a remix app with a route like /google-ads (for example, a page that explains what Google Ads is), code-splitting will result in it loading a URL like /build/routes/google-ads-VCRBPSAT.js

Some ad blockers will "helpfully" block this, eg AdBlock does.

This results in an error being rendered:

Error: Cannot initialize 'routeModules'. This normally occurs when you have server code in your client modules.
Check this link for more details:
https://remix.run/pages/gotchas#server-code-in-client-bundles
    at invariant2 (http://localhost:3000/build/_shared/chunk-Z2FKNKBF.js:1059:11)
    at RemixRoute (http://localhost:3000/build/_shared/chunk-Z2FKNKBF.js:2538:3)
    at renderWithHooks (http://localhost:3000/build/entry.client-FIKA5RJJ.js:11070:26)
    at mountIndeterminateComponent (http://localhost:3000/build/entry.client-FIKA5RJJ.js:13190:21)
    at beginWork (http://localhost:3000/build/entry.client-FIKA5RJJ.js:13977:22)
    at HTMLUnknownElement.callCallback2 (http://localhost:3000/build/entry.client-FIKA5RJJ.js:3680:22)
    at Object.invokeGuardedCallbackDev (http://localhost:3000/build/entry.client-FIKA5RJJ.js:3705:24)
    at invokeGuardedCallback (http://localhost:3000/build/entry.client-FIKA5RJJ.js:3739:39)
    at beginWork$1 (http://localhost:3000/build/entry.client-FIKA5RJJ.js:17086:15)
    at performUnitOfWork (http://localhost:3000/build/entry.client-FIKA5RJJ.js:16317:20)

Is it possible to control the URLs of code split bundles to not repeat the name of the route? I see how it's useful for debugging, but in this case I'd like to mangle the name to avoid adblock triggering.

[cldellow]

I think esbuild supports customizing these names via the chunk-names setting: https://esbuild.github.io/api/#chunk-names

But (I think) remix has a hardcoded template for the chunk name:

remix/packages/remix-dev/compiler.ts

Line 382 in 109da88

chunkNames: "_shared/[name]-[hash]",

So I think this would require a change in remix to support this use case.

[lili21]

Right now, you can use patch-package to do the work.

[kiliman]

Yes, you'd have to patch that line to remove the [name]- part

- chunkNames: "_shared/[name]-[hash]",
+ chunkNames: "_shared/[hash]",

All you filenames will just be hashes, so it's going to be rough figuring out which is which though. Anyway, I'd think it would be better to change the route name like '/explain-ads' or something.

[cldellow]

Oh right, patch-package works well! Thanks for the suggestion.

It turned out that I needed to edit entryNames, not chunkNames.

All you filenames will just be hashes, so it's going to be rough figuring out which is which though

It turns out that entryNames: "[dir]/xxx[name]-[hash]" is enough to thwart adblock, so we can get the best of both worlds.

Anyway, I'd think it would be better to change the route name like '/explain-ads' or something.

For me, I feel like a website framework ought to be able to support any URL. Two reasons come to mind:

• For SEO reasons, you might want to have URLs that have the slug /google-ads
• If the site has user-generated content where the slug is formed from, for example, a forum post title, it's valuable to be able to support any URL.

I definitely get that the user is the one who chose to use an ad blocker, but from the point of view of the user, the site is broken. Ad blockers are just a reality of life now, with 20-40% of people using them, depending on your site's specific demographic.

[kiliman]

Ok, but it appears that Ad blockers are not blocking the primary URL, just downloaded assets. Unfortunately there's no guarantee what files will be blocked now or in the future, so it's the responsibility of the Ad blocker, as well as the user that installed it, that the site is broken.

As for the dynamic slug example, you would typically use a param route like $slug.tsx anyway, so the file would be slug-hash.js

Anyway, glad you figured out a workaround.