Comments (17)
Hi, everyone I finally solved this issue without any modification to the code. I added the below tag to the head of my app. I removed the "defer" loading, and the "Embed" issue is gone, without the need to make any modifications. Let me know if this works for you.
<script src="//www.instagram.com/embed.js"></script>
from react-instagram-embed.
I just adapted @CooperSystems solution for our setup (no flow) and added the other parameters as props. Maybe it will help somebody...
InstagramLoader.jsx
'use strict'
import React, { Component } from "react";
import InstagramEmbed from 'react-instagram-embed'
export default class InstagramLoader extends Component {
constructor(props) {
super(props)
this.state = {
isLoaded: false
}
this._onLoad = this._onLoad.bind(this)
this._loadInstagram = this._loadInstagram.bind(this)
}
_loadInstagram() {
if (!window.instgrm) {
const s = document.createElement('script')
s.async = s.defer = true
s.src = `https://platform.instagram.com/en_US/embeds.js`
s.id = 'react-instagram-embed-script'
s.onload = this._onLoad
const body = document.body || null
if (body) {
body.appendChild(s)
}
}
}
_onLoad() {
console.log('Loaded instagram')
this.setState({
isLoaded: true
})
}
componentDidMount() {
this._loadInstagram()
}
render() {
const {
url = '',
hideCaption = false,
maxWidth = '',
containerTagName = 'div',
protocol = '',
onLoading = () => {},
onSuccess= () => {},
onAfterRender=() => {},
onFailure=() => {},
} = this.props
const { isLoaded } = this.state
const css = {
outer: {},
blank: {
padding: 12
}
}
return (
<div style={css.outer}>
{url.length > 0 && isLoaded ? (
<InstagramEmbed key={url}
url={url}
hideCaption={hideCaption}
maxWidth={maxWidth}
containerTagName={containerTagName}
protocol={protocol}
onLoading={onLoading}
onSuccess={onSuccess}
onAfterRender={onAfterRender}
onFailure={onFailure}
/>
) : (
<div style={css.blank}>Instagram URL not provided</div>
)}
</div>
)
}
}
Then just import it and use it like you would InstagramEmbed.
from react-instagram-embed.
@FelixButzbach This is the weirdest thing. Instead of importing you code as you suggest (I totally missed that part). Instead I added your code into the component and continued to use the original library.
Finally I stripped it down to just runnning @CooperSystems loadInstagram() function with a tiny delay of 100ths of a second along with the original library, and works a treat, no "Embed" warning for 1 or many posts.
This perhaps indicates that the orignal bug is comming from the instragram JS needing to be added last on the page, after it's dependancies are ready.
import React from 'react'
import { Link} from 'react-router-dom'
import styled from 'styled-components'
import { history } from 'react-router'
import InstagramEmbed from 'react-instagram-embed'
const Content = styled.div`
display: grid;
grid-gap: 1px;
grid-template-columns: repeat(auto-fill, 320px);
border: 1px solid;
max-height: 750px;
overflow-y: auto;
align-content: space-between;
justify-content: space-around;
`;
class Gallery extends React.Component {
constructor(props) {
super(props)
this.loadInstagram = this.loadInstagram.bind(this)
}
loadInstagram() {
if (!window.instgrm) {
const s = document.createElement('script')
s.async = s.defer = true
s.src = `https:\//platform.instagram.com/en_US/embeds.js`
s.id = 'react-instagram-embed-script'
s.onload = this._onLoad
const body = document.body || null
if (body) {
body.appendChild(s)
}
}
}
componentDidMount() {
setTimeout(() => {
this.loadInstagram()
},100)
}
render() {
const tags = ["BhDJVNpFVIc","BhDI_6CF9Ks","BhDIoeeF7dJ" , (52+ posts in total)];
return (
<Content>
{ tags.map((item, index) => {
return ( <InstagramEmbed
key={ index }
url={`https://instagr.am/p/${item}`}
maxWidth={320}
hideCaption={false}
containerTagName='div'
protocol=''
onLoading={() => {console.log()}}
onSuccess={() => {console.log()}}
onAfterRender={() => {console.log()}}
onFailure={() => {console.log()}}
/>
)
})
}
</Content>
)
}
}
export default Gallery
from react-instagram-embed.
Yep here's what I ended up doing, extracting the load function out of the library into my own wrapper. It's a workaround though and a pull request would be far better
// @flow
import React from 'react'
import InstagramEmbed from 'react-instagram-embed'
type Props = {
url?: string
}
type State = {
isLoaded: boolean
}
export default class InstagramLoader extends React.Component<Props, State> {
static defaultProps = {}
onLoad: Function
loadInstagram: Function
constructor() {
super()
this.onLoad = this.onLoad.bind(this)
this.loadInstagram = this.loadInstagram.bind(this)
}
state = {
isLoaded: false
}
componentWillMount() {
this.loadInstagram()
}
loadInstagram() {
if (!window.instgrm) {
const s = document.createElement('script')
s.async = s.defer = true
s.src = `https://platform.instagram.com/en_US/embeds.js`
s.id = 'react-instagram-embed-script'
s.onload = this.onLoad
const body: HTMLElement | null = document.body
if (body) {
body.appendChild(s)
}
}
}
onLoad() {
console.log('Loaded instagram')
this.setState({
isLoaded: true
})
}
render() {
const { url = '' } = this.props
const { isLoaded } = this.state
const css = {
outer: {},
blank: {
padding: 12
}
}
return (
<div style={css.outer}>
{url.length > 0 && isLoaded ? (
<InstagramEmbed url={url} hideCaption />
) : (
<div style={css.blank}>Instagram URL not provided</div>
)}
</div>
)
}
}
from react-instagram-embed.
@FelixButzbach 's code works great for one embeded item, but the issue returns when trying to render more than one item. Below is my code - on first render it works as expected. But on page reload the Embed error returns. Any ideas?
{ ["Bg7Jh6YnECP","Bg7CB5fl3rg","Bg7BOBRlOm7"].map((item) => {
return (
<InstagramEmbed
key={`https://instagr.am/p/${item}`}
url={`https://instagr.am/p/${item}`}
maxWidth={320}
hideCaption={false}
containerTagName='div'
protocol=''
onLoading={() => {console.log('loading')}}
onSuccess={() => {console.log('loaded')}}
onAfterRender={() => {console.log('rendered')}}
onFailure={() => {console.log('failed')}}
/>
)
})
}
from react-instagram-embed.
Hey @CooperSystems do you have a full example of your work around, i've run into the same issue with React 16... ty!
from react-instagram-embed.
Same @CooperSystems could you post how you got it working?
Or @PaulieScanlon did you get it working?
from react-instagram-embed.
Having probably the same issue on react 16 that the component is not being found and getting back
TypeError: Cannot read property 'Embeds' of undefined
from react-instagram-embed.
Having the same problem. Are there any plans on including this somehow into this lib?
Thanks to @CooperSystems for investigating and finding the workaround!
from react-instagram-embed.
Same issue in production
from react-instagram-embed.
@supertopoz I just tested my code with more than one (two) embedded instagram posts and didn't have any problems. Maybe it is related to the map (the multiple _onload functions are called at the same time, or something like this)? And just to be sure, you created a module named InstagramLoader, imported it and used this instead of the original InstagramEmbed, right? (I am asking because in your example code it looks like you are using the original InstagramEmbeded Component)
from react-instagram-embed.
@supertopoz weird indeed. Glad that you figured a way. I always try to avoid relaying on timeouts, what if your code runs on a slower device or with slow internet connection? I just implemented a google maps map and had a problem with the google maps sdk not beeing loaded on time. So I created a selfcalling function that runs every 500 ms and only executes the maps code once it finds the global google object. I then stop the function from calling itself again and execute the corresponding maps code. You could set a flag in the state and only show the Instagram Components once the flag is true. There might be a better (reactier) way of doing this, though...
from react-instagram-embed.
@supertopoz Your solution works for me :)
from react-instagram-embed.
Hey ! I've got this issue appartently only with SSR on. (You can try on nextjs or razzle)
After the first load, no problem at all.
from react-instagram-embed.
Well, looking at the code, it seems to be not compatible with SSR. Right ?
from react-instagram-embed.
has anyone yet solved this issue on reactjs?
I tried to add in the header <script src="//www.instagram.com/embed.js"></script> and window.instgrm.Embeds.process(); in componentDidMount still not working
from react-instagram-embed.
We are using the plugin successfully in production with SSR. Here is a link that shows the plugin in action: https://www.antena1.com.br/noticias/mariah-carey-publica-video-cantando-com
I am using the code that I posted earlier (#21 (comment)).
from react-instagram-embed.
Related Issues (20)
- can't install this package HOT 4
- warning with peer dependencies HOT 3
- Why the major version bump to v2? Where is the breaking change?
- React Component only ouputs the client access token
- The Components did not displayed HOT 7
- `onSuccess` is being called with an error instead of `onFailure`
- 2.0.1 doesn't build with webpack 5 HOT 1
- Instagram-embed not showing due to height being 0px
- Not work for me HOT 1
- Dependency Dashboard
- Recent change of oembed to the graph api HOT 1
- Oembed view App Review HOT 4
- Not Working
- can't resolve 'querystring' in node_modules\react-instagram-embed\es' HOT 4
- cors issue instagram graphql
- componentDidUpdate - this.request is null
- ERROR in ./node_modules/react-instagram-embed/es/index.js 52:0-40 HOT 2
- 'InstagramEmbed' cannot be used as a JSX component HOT 1
- Support for React 18 HOT 2
- Action Required: Fix Renovate Configuration
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-instagram-embed.