ReferenceError: require is not defined - on Ubuntu 18.04 64bit VPS server

[BlackH3art]

Hello,

I got a ReferenceError on my build React application which I already host on VPS server.

Whole website is working correctly, except my blog post page. When I try to open certain post which includes <TwitterTweetEmbed /> component, this is the moment when site is crashing and throwing this error (other posts without <TwitterTweetEmbed /> are working):

And when I click on the first line it points me to:

In the index.js file:

And everything on my development environment is working correctly, which makes me think it's something about this package and node version, or Ubuntu environment. Is it a problem with the package? Some missing dependency? Nodejs version? Can you help me somehow with that?

I posted it on stackoverflow as well. https://stackoverflow.com/questions/71778763/referenceerror-require-is-not-defined-on-ubuntu-18-04-64bit-vps-server

Ubuntu server is:

• Ubuntu 18.04 64bit

Nodejs version:

• v16.14.2

NPM version:

• v8.6.0

My development version is:

• nodejs: v16.13.0
• npm: v8.1.0

---

edit

I deployed this site on netlify as well, and it's throwing same error. You can go to: https://coruscating-empanada-b64a99.netlify.app/ and see this error. When you head to the /blog you will see three posts. 1.st is containing the <TwitterTweetEmbed /> - throwing error 2.nd is not containing embed and is working 3.rd is containing embed and is not working as well.

Since I deployed it on netlife, it's probable that it's not related to the operating system.

[BlackH3art]

I fixed this issue for myself, but if there's any other smarter solution I will appreciate. I just created my own <TwitterTweet /> component based on your code, but I changed the var script = require('scriptjs'); statement to import script from 'scriptjs'; so in the end it's compiled to something like var script = _interopDefault(require('scriptjs'));

This is whole component, if somebody wants you can rewrite it back to ES6.

import React, { useRef, useState, useEffect } from 'react';
import script from 'scriptjs';

const TwitterTweet = (props) => {

  const ref = useRef(null);
  const [loading, setLoading] = useState(true);
  let methodName$5 = 'createTweet';
  let twitterWidgetJs = 'https://platform.twitter.com/widgets.js';

  useEffect(function () {
    var isComponentMounted = true;

    script(twitterWidgetJs, 'twitter-embed', function () {
      if (!window.twttr) {
        console.error('Failure to load window.twttr, aborting load');
        return;
      }

      if (isComponentMounted) {
        if (!window.twttr.widgets[methodName$5]) {
          console.error(`Method ${methodName$5} is not present anymore in twttr.widget api`);
          return;
        }

        window.twttr.widgets[methodName$5](props.tweetId, ref === null || ref === void 0 ? void 0 : ref.current, props.options).then(function (element) {
          setLoading(false);

          if (props.onLoad) {
            props.onLoad(element);
          }
        });
      }
    });
    return function () {
      isComponentMounted = false;
    };
  }, []);
  return React.createElement(React.Fragment, null, loading && React.createElement(React.Fragment, null, props.placeholder), React.createElement("div", {
    ref: ref
  }));
};

export default TwitterTweet;

[asoulliereHT]

encountered the exact same thing