react-twitter-embed icon indicating copy to clipboard operation
react-twitter-embed copied to clipboard

Dynamic require() usage in "modern" build.

Open erictaylor opened this issue 2 years ago • 3 comments

The "modern" build of this library causes problems with some build systems (such as Vite) because of the usage of dynamic requires (ex: https://github.com/saurabhnemade/react-twitter-embed/blob/master/src/components/TwitterTweetEmbed.tsx#L41) since "require" is a Node thing.

When shipping to production you end up getting errors about "require" not being defined.

For my project I've manually patched this problem by creating a Yarn patch and refactored all usage of the require('scriptjs') in effects to use dynamic imports instead:

useEffect(() => {
  // ...
  const loadScript = async () => {
    const scriptModule = await import('scriptjs');
    const script = scriptModule.default;
    
    // ... specific script() call for given useEffect
  };
  
  loadScript();
  
  // ... the useEffect return statement
}, [/* the deps */];

I'm happy to provide a PR to make this change @saurabhnemade if desired.

erictaylor avatar Dec 14 '22 20:12 erictaylor