Cannot build on AWS Amplify since recent release

[veryayskiy]

When trying to build on AWS Amplify it shows the issue (see screenshot). If manually sets the previous version, e.g. "posthog-js": "1.96.1" it works.

[pauldambra]

Hey @veryayskiy my guess is this was introduced in 1.106.1 which does reference FormData https://github.com/PostHog/posthog-js/pull/1026/files#diff-1456bfdd728719234cc73d562de1e466fb3deaf6f421417627f91870b2b19c7dR73

Could you check if you can build with 1.106.0 and not with 1.106.1 so we can confirm it is that commit?

But it's not an external dependency, it's (a pretty ancient) part of the DOM https://caniuse.com/?search=formdata https://developer.mozilla.org/en-US/docs/Web/API/FormData

It's a few years since I looked at AWS Amplitude, can you share a little about how you're building the code?

[veryayskiy]

I checked 1.106.0 - it works great.

Checked with 1.106.1 - crashes with the same error as above.

So yeah, there is something in between those two versions that crashes it.

[pauldambra]

I assume that Amplify isn't building in a browser context, so FormData isn't available - although that's surprising to me...

Can you share more about the Amplify build? What I do know is out of date so assume I know nothing... a small reproducible example would be great...

[veryayskiy]

I'm not sure what can I share...we can have a call so I can show you (DM me on Twitter).

[pauldambra]

Hey @veryayskiy we avoid sync for as long as we can since we've found it's not a great use of everyone's time to figure out overlapping availability just to share config 😊

You can open a support ticket using https://us.posthog.com/#panel=support%3Asupport%3A%3Alow if you're worried about sharing private information here.

The important things for me are:

• are you using typescript
• if so, does your tsconfig include DOM - https://www.typescriptlang.org/tsconfig#lib
• "When trying to build on AWS Amplify" what does it mean to "build on AWS Amplify"
  • e.g. is amplify assuming the code might run in Lambda as well as in a browser

Certainly the problem here is that your build environment doesn't have a reference for FormData but that browser api is >10 years old. So I'm not sure where the fix is

[xinghengwang]

I am getting this issue also, I am not using AWS Amplify. No typscript. Just normal javscript

[xinghengwang]

It might be I have server side rendering. A lot of people using server side rendering, since we are importing the library, it should make the server side rendering compatible.

[veryayskiy]

Hey @veryayskiy we avoid sync for as long as we can since we've found it's not a great use of everyone's time to figure out overlapping availability just to share config 😊

You can open a support ticket using https://us.posthog.com/#panel=support%3Asupport%3A%3Alow if you're worried about sharing private information here.

The important things for me are:

• are you using typescript

• if so, does your tsconfig include DOM - https://www.typescriptlang.org/tsconfig#lib

• "When trying to build on AWS Amplify" what does it mean to "build on AWS Amplify"

  • e.g. is amplify assuming the code might run in Lambda as well as in a browser

Certainly the problem here is that your build environment doesn't have a reference for FormData but that browser api is >10 years old. So I'm not sure where the fix is

I do not use TS

[pauldambra]

Hey All,

Thanks for commenting. I can't reproduce this and really do need more info on how y'all are building your software. So appreciate the comments that it is happening for more than one project. But we need a reproducible example or build config or something to start to understand why this works in some environments and not in others

[Khaledgarbaya]

Happens to me using

• posthog-js 1.110.0
• nextjs 13.4.4

- error Error [ReferenceError]: FormData is not defined
    at O (/Users/kgarbaya/workspace/personal-website/node_modules/.pnpm/posthog-js@1.110.0/node_modules/posthog-js/dist/module.js:1:5547)
    at K (/Users/kgarbaya/workspace/personal-website/node_modules/.pnpm/posthog-js@1.110.0/node_modules/posthog-js/dist/module.js:1:7088)
    at e.Ci.di.init (/Users/kgarbaya/workspace/personal-website/node_modules/.pnpm/posthog-js@1.110.0/node_modules/posthog-js/dist/module.js:1:125820)
    at Object.<anonymous> (/Users/kgarbaya/workspace/personal-website/node_modules/.pnpm/posthog-js@1.110.0/node_modules/posthog-js/dist/module.js:1:126247)
    at Module._compile (node:internal/modules/cjs/loader:1196:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1250:10)
    at Module.load (node:internal/modules/cjs/loader:1074:32)
    at Function.Module._load (node:internal/modules/cjs/loader:909:12)
    at Module.require (node:internal/modules/cjs/loader:1098:19)
    at require (node:internal/modules/cjs/helpers:108:18) {
  digest: undefined
}

[pauldambra]

Hey @Khaledgarbaya

Can you share how you're building your software?

This isn't happening for every build including posthog-js and without more detail we can't dig into what is happening for folk where it is 😊

[Khaledgarbaya]

it's a next.js website using pages route.

1. pnpm add poshog-js
2. Add the code snippet from the docs for the pages route section

// pages/_app.js
import posthog from "posthog-js"
import { PostHogProvider } from 'posthog-js/react'

if (typeof window !== 'undefined') { // checks that we are client-side
  posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY, {
    api_host: process.env.NEXT_PUBLIC_POSTHOG_HOST || 'https://app.posthog.com',
    loaded: (posthog) => {
      if (process.env.NODE_ENV === 'development') posthog.debug() // debug mode in development
    },
  })
}

export default function App(
    { Component, pageProps: { session, ...pageProps } }
) {
    return (
        <>
            <PostHogProvider client={posthog}>
                <Component {...pageProps} />
            </PostHogProvider>
        </>
    )
}

3. Run pnpm run dev
4. visit localhost:3000

[pauldambra]

thanks... is it webpack or typescript or js or ....?

[Khaledgarbaya]

It's a nextjs Typescript project

[Khaledgarbaya]

The code is public, here is the diff https://github.com/Khaledgarbaya/personal-website/pull/1/files

[Khaledgarbaya]

Another Update it looks like it only happens on dev mode

[pauldambra]

interesting thanks... everything looks relatively modern in your dependencies/config

does it work if you e.g. target es6 instead of es5?

(I think that's a red herring but I couldn't run locally because I'm missing an API key :))

[deboboy]

Also getting an error trying to deploy on AWS Amplify; using out-of-box Posthog + Next.js 14...

2024-03-04T03:58:32.811Z [WARNING]: Failed to compile.
2024-03-04T03:58:32.819Z [WARNING]: ./app/providers.js
Module not found: Can't resolve 'posthog-js'
https://nextjs.org/docs/messages/module-not-found
./app/providers.js
Module not found: Can't resolve 'posthog-js/react'

AWS Amplify build settings:
frontend:
phases:
preBuild:
commands:
- npm ci
build:
commands:
- npm run build

[lukasugar]

I'm also having issues with FormData is not defined. I'm using version 1.109.0.
I've mitigated the error by using 1.106.0 version... But it would be great if there was a proper fix and new versions could be used.

[pauldambra]

hey @lukasugar @deboboy

I still don't know how to reproduce this - it's not affecting all customers.

I'd love to fix it too, can you share how you're using/building with posthog?

Without a repro I'm not sure what's causing this...

For e.g. today I had to polyfill ClipboardEvent in our tests because it's not included in js-dom. My guess is there's something like this happening where FormData is available in the browser (it is ancient after all) but not in some tooling you all are using

[lukasugar]

Hey @pauldambra, here's some info on how we're using it. I hope it helps:

• it was defined in packages.json initially like this: "posthog-js": "^1.105.9", and that worked for a few weeks but started breaking recently. This was installing recently the version 1.109.0. I've removed the "^" and specified 1.106.0 and it's working now.

This should be all/most of the code where we use post-hog:

[pauldambra]

@lukasugar what we need is info about the environment you're building in - I need a way to recreate the error so I can track it down. I know it isn't affecting all users but I don't know what combination of factors causes it to trigger

[evcorona]

I am also experiencing this issue. I am using AWS Amplify, TypeScript 5.3.3, and Next.js 13.5.6.

To resolve the issue and ensure a successful build, I had to set the Posthog-js version to 1.106.0.

[lukasugar]

@pauldambra I was using node 16 and npm 8.X. After updating npm to 10.5.0 and node to 21.x, it works! So the solution was updating node and npm versions.

[pauldambra]

That's fantastic info! thanks for taking the time @lukasugar 💖

[pauldambra]

https://nodejs.org/docs/latest-v16.x/api/globals.html#class-formdata

indeed not added until 16.5.0

will be frustrating to add bundle size to polyfill such an old browser API 🤣

[franciscorubin]

The code should be a no-op if it's running on the server...

Also, I upgraded to node 17 and still have the same error. I can't upgrade to 18+ due to a limitation with Amplify

[pauldambra]

The code should be a no-op if it's running on the server...

posthog-js isn't for running on a server, there's posthog-node for backend usage

[hamishirving]

Hey @pauldambra checking if you saw this pretty thorough investigation on a different but (looks like) related issue?

#1139 (comment)

I've just upgraded to latest posthog-js version and am getting errors while pre-rendering in my Redwood JS app deployed on Netlify (causes my deploy to timeout). Node 20.9.0, Yarn 3.5.0

[PostHog.js] was already loaded elsewhere. This may cause issues.