Page breaks when I set url about react-tiny-link

[winhtaikaung]

Hi @Dissarion Sorry for late reply , I tried to replicate your issue as follow

import React from "react";
import ReactDOM from "react-dom";
import ReactTinyLink from "react-tiny-link";
import "./styles.css";

function App() {
  const arr=["https://www.amazon.com/Steve-Madden-Mens-Jagwar-10-5/dp/B016X44MKA/ref=lp_18637582011_1_1?srs=18637582011&ie=UTF8&qid=1550721409&sr=8-1","https://www.amazon.com/Steve-Madden-Mens-Jagwar-10-5/dp/B016X44MKA/ref=lp_18637582011_1_1?srs=18637582011&ie=UTF8&qid=1550721409&sr=8-1","https://www.amazon.com/Steve-Madden-Mens-Jagwar-10-5/dp/B016X44MKA/ref=lp_18637582011_1_1?srs=18637582011&ie=UTF8&qid=1550721409&sr=8-1","https://www.amazon.com/Steve-Madden-Mens-Jagwar-10-5/dp/B016X44MKA/ref=lp_18637582011_1_1?srs=18637582011&ie=UTF8&qid=1550721409&sr=8-1","https://www.amazon.com/Steve-Madden-Mens-Jagwar-10-5/dp/B016X44MKA/ref=lp_18637582011_1_1?srs=18637582011&ie=UTF8&qid=1550721409&sr=8-1","https://www.amazon.com/Steve-Madden-Mens-Jagwar-10-5/dp/B016X44MKA/ref=lp_18637582011_1_1?srs=18637582011&ie=UTF8&qid=1550721409&sr=8-1","https://www.amazon.com/Steve-Madden-Mens-Jagwar-10-5/dp/B016X44MKA/ref=lp_18637582011_1_1?srs=18637582011&ie=UTF8&qid=1550721409&sr=8-1","https://www.amazon.com/Steve-Madden-Mens-Jagwar-10-5/dp/B016X44MKA/ref=lp_18637582011_1_1?srs=18637582011&ie=UTF8&qid=1550721409&sr=8-1"]
  return (
    <div className="App">
      <h1>React Tiny Link Example</h1>
      <h3>No Graphics</h3>
     {arr.map((item,k)=> <ReactTinyLink
        cardSize="small"
        key={k}
        showGraphic={false}
        maxLine={2}
        minLine={1}
        url={item}
     />)}
      
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

and it didn't break. So possible issues might probably that we are not passing the correct string to component or the string format of URL is not correct.

[Dissarion]

Previously, everything worked, but eventually stopped. Maybe, but I'm not sure, due to the fact that our project has added web sockets.

[winhtaikaung]

Can you try to change the proxyURL to your own proxyUrl?
you may want to clone

https://github.com/Rob--W/cors-anywhere

and host it on your own and pass the hosted proxyURL and try it again ?

[balakedev]

Hi there, the similar problem here:

`renderLinkPreview = text => {
var matches = text.match(/(((https?://)|(www.))[^\s]+)/g);

if (matches) {
  var thisLink = matches[0];
  console.log("STRINGED: ", thisLink);
  return (
    <ReactTinyLink
      cardSize="small"
      showGraphic={true}
      maxLine={2}
      minLine={1}
      url={`${thisLink}`}
    />
  );
} else return false;

};
`
ERROR:
TypeError: Failed to construct 'URL': Invalid URL
when the url being checked is www.worldofwarcraft.com