Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Gatsby-Plugin-Twitter not injecting Twitter's API #17946

Closed
samanthabretous opened this issue Sep 27, 2019 · 6 comments

Comments

@samanthabretous
Copy link

@samanthabretous samanthabretous commented Sep 27, 2019

Description

When using gatsby-plugin-twitter right out of the box, the Twitter script does not inject. The plugin queries the DOM for a Twitter class when the route changes, but at this time the DOM hasn't rendered anything on the page. If I add a break point on the first line within gatsby-browser.js > onRouteUpdate, you can see the DOM is empty.
image

Steps to reproduce

Clone gatsby-starter-netlify-cms
Add gatsby-plugin-twitter to the project
Embed a tweet within a markdown file
Reload the page

Expected result

Twitter's API should load if there is a Twitter class on the page.

Actual result

Twitter's API is not loading. In the plugin's gatsby-browser.js file, when using a setTimeout around the querySelector, the API loads.

Environment

  System:
    OS: macOS 10.14.6
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Shell: 5.3 - /bin/zsh
  Binaries:
    Node: 11.6.0 - /usr/local/bin/node
    npm: 6.7.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 77.0.3865.90
    Firefox: 63.0.1
    Safari: 12.1.2
  npmPackages:
    gatsby: ^2.13.31 => 2.15.11 
    gatsby-image: ^2.0.23 => 2.2.17 
    gatsby-plugin-netlify: ^2.0.6 => 2.1.11 
    gatsby-plugin-netlify-cms: ^4.1.6 => 4.1.13 
    gatsby-plugin-purgecss: ^4.0.0 => 4.0.1 
    gatsby-plugin-react-helmet: ^3.0.4 => 3.1.6 
    gatsby-plugin-sass: ^2.0.7 => 2.1.13 
    gatsby-plugin-sharp: ^2.2.9 => 2.2.20 
    gatsby-plugin-twitter: ^2.1.9 => 2.1.9 
    gatsby-remark-copy-linked-files: ^2.0.7 => 2.1.17 
    gatsby-remark-images: ^3.1.6 => 3.1.20 
    gatsby-remark-relative-images: ^0.2.1 => 0.2.3 
    gatsby-source-filesystem: ^2.0.26 => 2.1.21 
    gatsby-transformer-remark: ^2.6.9 => 2.6.21 
    gatsby-transformer-sharp: ^2.1.9 => 2.2.13 
  npmGlobalPackages:
    gatsby-cli: 2.4.6
@jonniebigodes

This comment has been minimized.

Copy link
Contributor

@jonniebigodes jonniebigodes commented Sep 28, 2019

@samanthabretous i've picked up on your issue and it seems that you're correct, the styles and script are not loaded correctly.

Here are the steps i took to test this issue.

  • Created a new site based on the starter you mentioned, namely https://github.com/netlify-templates/gatsby-starter-netlify-cms.
  • Installed the gatsby-plugin-twitter.
  • Configured it in gatsby-config.js, like the documentation mentions, transforming my gatsby-config.js into the following, i'm going to leave only the plugins array for brevity.
plugins: [
    'gatsby-plugin-react-helmet',
    'gatsby-plugin-sass',
    `gatsby-plugin-twitter`,
    {
      // keep as first gatsby-source-filesystem plugin for gatsby image support
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `${__dirname}/static/img`,
        name: 'uploads',
      },
    },
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `${__dirname}/src/pages`,
        name: 'pages',
      },
    },
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `${__dirname}/src/img`,
        name: 'images',
      },
    },
    'gatsby-plugin-sharp',
    'gatsby-transformer-sharp',
    {
      resolve: 'gatsby-transformer-remark',
      options: {
        plugins: [
          {
            resolve: 'gatsby-remark-relative-images',
            options: {
              name: 'uploads',
            },
          },
          {
            resolve: 'gatsby-remark-images',
            options: {
              // It's important to specify the maxWidth (in pixels) of
              // the content container as this plugin uses this as the
              // base for generating different widths of each image.
              maxWidth: 2048,
            },
          },
          {
            resolve: 'gatsby-remark-copy-linked-files',
            options: {
              destinationDir: 'static',
            },
          },
        ],
      },
    },
    {
      resolve: 'gatsby-plugin-netlify-cms',
      options: {
        modulePath: `${__dirname}/src/cms/cms.js`,
      },
    },
    {
      resolve: 'gatsby-plugin-purgecss', // purges all unused/unreferenced css rules
      options: {
        develop: true, // Activates purging in npm run develop
        purgeOnly: ['/all.sass'], // applies purging only on the bulma css file
      },
    }, // must be after other CSS plugins
    'gatsby-plugin-netlify', // make sure to keep it last in the array
  ],
  • Created a new entry in the blog folder called 2019-09-29-testing-gatsby-with-tweets.md with the following content:
---
templateKey: blog-post
title: Testing out the twwets
date: 2019-09-28T15:04:10.000Z
featuredpost: true
description: Just a random test with the twitter plugin.
tags:
  - gatsby 
  - twitter
---
# HELLO

HELLO HELLO

## testing content

heyoooo!!!!!!

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Join us in 3️⃣ days for Gatsby Days - London!<br><br>Learn more and register:<a href="https://t.co/3yeN1CcgNH">https://t.co/3yeN1CcgNH</a></p>&mdash; Gatsby (@gatsbyjs) <a href="https://twitter.com/gatsbyjs/status/1177585421519327234?ref_src=twsrc%5Etfw">September 27, 2019</a></blockquote>

As per the documentation on the plugin i'm only leaving in the the blockquote element, not the script portion of the embedded tweet.

  • Issued yarn develop to generate a development build and opened up http://localhost:8000/blog/2019-09-29-testing-gatsby-with-tweets/ directly in chrome and i'm presented with the following:

samanthabretous_1

  • Tested in firefox the same result.

But based on your description and checking the plugin code and gatsby api, led me to the following,
If i start at http://localhost:8000/blog and click the link for the newly created markdown file i'm presented with the following:

samanthabretous_2

The styling and script take a bit to load, but as you can see they show.

If the page is refreshed, then the issue pops up, the styling and script disappear.

  • Expanded the testing, by creating another markdown file called 2019-09-29-another-tweet-test.md in the blog folder with the following content:
---
templateKey: blog-post
title: Testing out more of the tweets
date: 2019-09-28T15:14:10.000Z
featuredpost: true
description: Just another random test with the twitter plugin.
tags:
  - gatsby 
  - twitter
---
# HELLO

HELLO HELLO here's another test

## testing more content

more contents
  • Restarted the development server and opened up the newly created page i'm presented with the content as shown below:
    samanthabretous_4

  • Adding in the following to the new markdown file while the development server is running:

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">⚡New - GraphiQL IDE - Code Snippet Generation⚡<br><br>Create page templates and components even faster:<br><br>1️⃣ compose your GraphQL query<br><br>2️⃣ click “Code Exporter”<br><br>3️⃣ select type of snippet<br><br>4️⃣ click “copy” button<br><br>5️⃣ paste copied snippet into file<br><br>Done!🎉<br><br>➡ <a href="https://t.co/IrNDvWq2FO">https://t.co/IrNDvWq2FO</a> <a href="https://t.co/KRn91OhxYz">pic.twitter.com/KRn91OhxYz</a></p>&mdash; Gatsby (@gatsbyjs) <a href="https://twitter.com/gatsbyjs/status/1177656567153463296?ref_src=twsrc%5Etfw">September 27, 2019</a></blockquote>

It will result in the issue you're experiencing, but if i navigate to another page and come back then it shows it correctly.

It seems that the plugin in question might need some work done, if you're willing, fork the repo, read the contribution documentation, make a pull request and mention this issue.

Feel free to provide feedback so that we can close this issue, or continue to work on it until we find a suitable solution.

@samanthabretous

This comment has been minimized.

Copy link
Author

@samanthabretous samanthabretous commented Sep 30, 2019

Great! From my understanding gatsby-browser.js runs before the client is added to the DOM. Therefore, when the plugin fires onRouteUpdate during the first load, injecting the script fails. But if we navigate to other routes, the client is now in the DOM, so it works.

I think anyone who queries the DOM in onRouteUpdate will run into this issue. And I'm surprised onInitialClientRender doesn't solve for a full DOM render on load.

I could work on a PR for the plugin. The quickest solution would be to have the logic run in onPostfetchPathname for the initial load, or wrap the logic in a setTimeout. What do you think? Do any other solutions come to mind?

@jonniebigodes

This comment has been minimized.

Copy link
Contributor

@jonniebigodes jonniebigodes commented Sep 30, 2019

@samanthabretous all that's inside gatsby-browser.js is a means to costumize and extend the settings that affect the browser. My understanding is that when the api onRouteUpdate is triggered it relates to the application context, if you come from from the outside into the page it will not pick up on it. But like i've tested if you go back and forward then it detects and injects the script. Taking in the description you've supplied the onInitialClientRender is not a good choice, because it will inject the script in but it, but we can't be sure that the page loaded is actually the one with the tweet. It could be some other one completely unrelated, i might be wrong about it but it.

Setting a timeout would probably not be a good idea. The onPostPrefetchPathname probably would be a better option, but it's something that has to be better looked into.

And if you're willing to do it, go for it, i think that the team and the rest of the community would benefit from this, if you don't mind read the contribution, fork the repo, make the changes and submit a pull request mentioning this issue.

@goblindegook

This comment has been minimized.

Copy link
Contributor

@goblindegook goblindegook commented Oct 3, 2019

This seems to be a more or less recent issue with onRouteUpdate when in development mode. I can't pinpoint when it was introduced, but I can confirm that the behaviour stopped being consistent between development mode (where only the basic HTML is now present) and production builds (where the fully rendered document is available).

@jonniebigodes

This comment has been minimized.

Copy link
Contributor

@jonniebigodes jonniebigodes commented Oct 3, 2019

@goblindegook that was what led me to this. Something during the commit history triggers this behaviour. But i think that probably some work must be done on the plugin so that it addresses this issue. Looks like @samanthabretous is willing to work on this. so we'll have to wait and see what she comes up with

@samanthabretous

This comment has been minimized.

Copy link
Author

@samanthabretous samanthabretous commented Oct 9, 2019

Closing this issue, since I can no longer replicate the bug. The client gets injected sometime before onRouteUpdate get triggers. And the package works as expected.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
3 participants
You can’t perform that action at this time.