4lejandrito
commented
12 months ago hi! can you maybe share a small reproduction repo?
Open yannxaver opened 12 months ago
4lejandrito
commented
12 months ago hi! can you maybe share a small reproduction repo?
yannxaver
commented
12 months ago I have tried reproducing it in a blank project, and I cannot.
yannxaver
commented
12 months ago Even if I comment out the function which causes the error, type compilation increases from ~3 to ~30 seconds. Since this prohibits me from using the withPlausibleProxy helper, is there another way that I can specify a custom path to load the script from? I am self hosting plausible at https://foo.bar.com.
If I set
<PlausibleProvider
domain='bar.com'
selfHosted
customDomain='https://foo.bar.com'
/>it will try to load the script from https://foo.bar.com/js/plausible.js. This will get blocked because the script name contains the word plausible.
I want to be able to set an absolute path, for example:
<PlausibleProvider
domain='bar.com'
selfHosted
customDomain='https://bar.com/friendly-script'
/>And then manually proxy https://bar.com/friendly-script to https://foo.bar.com/js/plausible.js using next.config.js rewrites.
How would I do that if I cannot use withPlausibleProxy? The library always appends /js/plausible.js to any customDomain I set, which gets blocked then.
4lejandrito
commented
12 months ago As a workaround until I find a better way, I recommend you disable statically typed links.
yannxaver
commented
12 months ago As a workaround until I find a better way, I recommend you disable statically typed links.
Now I know why I couldn't reproduce it yesterday! I forgot to set typedRoutes: true. 😅 Once I set it to true, I can reproduce it easily.
Would there be another way to serve the script from a custom path without using withPlausibleProxy?
4lejandrito
commented
12 months ago Not for now, at least with next-plausible. You would have to proxy it yourself with a different mechanism.
You can overwrite the src path of the script via the scriptProps prop of PlausibleProvider and point it to wherever you want as long as the right script is proxied from there.
EDIT: you can skip withPlausibleProvider and just set up your own rewrite, and then apply the props change I mentioned above. This will work as long as all your PlausibleProvider props are static and not dependent on runtime.
4lejandrito
commented
12 months ago The reason why it takes so long to process the types is because withPlausibleProxy is setting a single rewrite for each of the possible combinations of modifiers. NextJS then automatically adds each of these rewrites to a TypeScript union type in the .next/types file, which ends up being huge and causing this performance issue.
The reason why next-plausible does this is because it cannot know in advance which modifiers you will be using, as they are set as props in the React component PlausibleProvider at render time.
The easiest way to fix this would be to use a clever regex as rewrite instead of so many individual ones. However nextjs regex support for rewrites is limited and does not cover this use case.
The next best option I see is to move away completely from withPlausibleProxy in the config file and instead provide the same logic but as a conditional middleware. Something like this (just an idea, not implemented):
import { NextResponse } from 'next/server'
import type { NextRequest } from 'next/server'
import {isNextPlausibleRequest, proxyNextPlausibleRequest} from 'next-plausible'
export function middleware(request: NextRequest) {
if (isNextPlausibleRequest(request) {
return proxyNextPlausibleRequest(request)
}
}Although I like the simplicity of withPlausibleProxy being just a config wrapper, it comes at the cost of having to use so many rewrites. On the other hand middleware is really the tool to use for these cases, only that it didn't exist when I first created next-plausible.
yannxaver
commented
12 months ago Not for now, at least with
next-plausible. You would have to proxy it yourself with a different mechanism.You can overwrite the
srcpath of the script via thescriptPropsprop ofPlausibleProviderand point it to wherever you want as long as the right script is proxied from there.EDIT: you can skip
withPlausibleProviderand just set up your own rewrite, and then apply the props change I mentioned above. This will work as long as all yourPlausibleProviderprops are static and not dependent on runtime.
Thank you, this works! Probably obvious for you, but I will write it for others: you also need to set data-api because otherwise the page view post requests will be sent to the domain that the app is running on. Alternatively, you can also use a nextjs rewrite here.
I have attached a video to show the problem. Once I wrap my next.js config in
withPlausibleProxythe union type withRoutebecomes too complex. Type checking also becomes extremely slow, hence you have to skip around 30 seconds in the video until the error shows up.Error:
https://github.com/4lejandrito/next-plausible/assets/17554280/9b076286-af49-4ae7-a157-ac4a92f452c0