Skip to content

Dynamic require() usage in "modern" build. #128

@erictaylor

Description

@erictaylor

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions