Can't resolve 'http2' and Cannot read property 'split' of undefined

[trwong]

Hi, I'm running into some issues using this package. I'm running yarn add open-graph-package and in the code I have:

import OpenGraph from 'open-graph-scraper'

const url = "https://www.test.com"
const options = { url: url }

OpenGraph(options, (error, results, response) => {
  console.log("error:", error)
  console.log("results:", results)
  console.log("response:", response)
})

and I get the following error:

./node_modules/http2-wrapper/source/index.js
Module not found: Can't resolve 'http2' in '/Users/taylorwong/Documents/GitHub/client-dashboard/node_modules/http2-wrapper/source'

I installed http2 with yarn add http2 but then run into the following error:

TypeError: Cannot read property 'split' of undefined
node_modules/@szmarczak/http-timer/dist/source/index.js:4

Let me know if I can provide any additional information to help with this. Thank you!

[jshemas]

Hello,

Using your code from above I was able to get this result (without using yarn add http2, using node v12.16.3):

results: {
  charset: 'iso-8859-1',
  requestUrl: 'https://www.test.com',
  success: true
}

Are you sure this error is coming from ogs? Can you post the full stack trace? What version of node are you on? What is your OS?

Is this a React app? I wonder if you are having the same issue as grpc/grpc-node#610 or googleapis/nodejs-dialogflow#314

[NoCtrlZ1110]

The same issue!
It works perfectly on my Nodejs backend.
But on my React client (init by using create-react-app) it say
Module not found: Can't resolve 'http2'
After installed http2 (with warning "WARN deprecated http2@3.3.7: Use the built-in module in node 9.0.0 or newer, instead"),
the client says error
TypeError: Cannot read property 'split' of undefined

(anonymous function) C:/..../node_modules/@szmarczak/http-timer/dist/source/index.js:4

1 | "use strict";
2 | Object.defineProperty(exports, "__esModule", { value: true });
3 | const defer_to_connect_1 = require("defer-to-connect");
4 | const nodejsMajorVersion = Number(process.versions.node.split('.')[0]); <----
5 | const timer = (request) => {
6 | const timings = {
7 | start: Date.now(),

Sorry my bad English.
Hope this issue would be resolved soon!
Thanks 🥰

[jshemas]

@trwong @NoCtrlZ1110 Can one of you make a code repo with this problem? I'm not familiar with react and having a code repo with this problem would help me solve it.

[runemy]

Trying to use this in a Vue App i get this error:

` ERROR Failed to compile with 4 errors 7:18:00 PM

These dependencies were not found:

• dns in ./node_modules/cacheable-lookup/source/index.js
• http2 in ./node_modules/http2-wrapper/source/index.js, ./node_modules/http2-wrapper/source/client-request.js and 1 other`

[jshemas]

@runemy Can you make a code repo with this problem? I'm not familiar with vue and having a code repo with this problem would help me solve it.

[jshemas]

Actually this might be the problem sindresorhus/got#1400

Got is meant for Node.js. While it can work in the browser with the right polyfills, you're on your own support-wise. Try asking on Stack Overflow instead.

openGraphScraper uses Got for making HTTP requests. I'm not really sure how to fix this with having to rewrite a lot of stuff. I could make a fork of openGraphScraper without a request library.

[runemy]

Hi @jshemas Yes, here is a code repo with this problem: https://github.com/runemy/vue-opengraph

[jshemas]

This is awesome! Thanks for making this repo. I think i'm going to make a new module called openGraphScraperLite that will use ky for it's requests. Hopefully that will fix this problem. (This might take me a few days/weeks)

ky docs: https://github.com/sindresorhus/ky

[haor3]

hello, is there any solutions for this issue?

[jshemas]

Still working on this issue. I got ky to sorta work inside openGraphScraper but there is still a few edge cases I'm working on.

[jshemas]

Okay. I made a new lib here -> https://github.com/jshemas/openGraphScraperLite and forked the example vue project here -> https://github.com/jshemas/vue-opengraph

I keep getting a bunch of CORS errors, but I think I'm getting really close to getting this to work.

[runemy]

Hi,

Sounds good with this progress :) Good work.
I do also get these CORS errors.

[jshemas]

So, I'm starting to think this isn't really possible to do these types of requests in the browser. This article has a good explanation.

To understand how XMLHttpRequest would be dangerous if cross-origin requests were allowed, imagine if you visited a site at evil.com that used XMLHttpRequest to make requests to gmail.com. If you were logged into Gmail in your browser, evil.com would be able to read all of your email. This example shows why it is the site that receives the request that must indicate when cross-origin XMLHttpRequest is allowed. If the requesting site could bypass the browser's restriction, malicious websites could access any site you were logged into.

[jshemas]

Closing this for now. I think the best fix for this problem is to use a backend server to make the requests and then pass in the html into ogs.