Usage of react-twitter-embed on production builds and it's dynamic require usage

[erictaylor]

Just wanted to give a heads up to anyone else who comes across this, but currently react-twitter-embed uses dynamic "requires" in it's "modern" library code which is obviously not compatible in browser. So depending on your build system, the build system may not catch the dynamic require usage and properly convert it (like Vite) which can lead to an error being thrown for "require" not being available.

I personally used a custom Yarn patch to refactor all those to use dynamic import()s instead which addresses the issue.

RE: https://github.com/saurabhnemade/react-twitter-embed/issues/128

Just wanted to surface since react-twitter-embed looks pretty quiet on updates.

[danicc097]

for vite (using 3.2.5 in my case), update your config to:

   ...
  build: {
        ...
        commonjsOptions: {
          transformMixedEsModules: true,
        },
  }

and that should do it

[surjithctly]

I have got same issue with Sanity CMS when using with TwitterEmbed. Got the below error only on production. Worked fine locally.

Error: require is not defined
ReferenceError: require is not defined
    at https://*.sanity.studio/static/sanity-16754bb7.js:9327:27898
    ...

It worked now after trying @danicc097 suggestion (thanks man 🙏) But since I'm using Sanity, I had to do some extra config in the sanity.cli.ts which looks like below. Adding this code here, so it will be helpful for future people who came across this issue.

// sanity.cli.ts
import { defineCliConfig } from "sanity/cli";

export default defineCliConfig({
  api: {
    projectId: "PROJECT_ID",
    dataset: "production",
  },
  vite: (prev) => ({
    ...prev,
    build: {
      ...prev.build,
      commonjsOptions: {
        transformMixedEsModules: true,
      },
    },
  }),
});