Occasionally not loading code until I reload page

[nixton9]

First of all, thanks for this plugin. It's super handy and looks really good!
I'm facing a problem where, only sometimes, the card appears but it just does not load the code inside. If I reload the page, the code loads and everything gets right.
I'm 99% sure that until now this only happened to me on HTML cards.

As you can see in this image - https://ibb.co/MV5jNWw - the first card that had HTML did not load the code while the other with CSS loaded it.
Is this a known issue?

[peterpeterparker]

Happy to hear you like the plugin!

It never happened to me before (I've the plugin implemented in https://daviddalbusco.com).

That said, we can try to find a solution ;)

Spontaneously I have the feeling that these Web Component underneath, for those without cards, doesn't seems to be loaded.

If you debug did you notice the shadow root in the DOM tree?

<deckdeckgo-highlight-code>
     #shadow-root

If not, it is definitely a sign that the component is not loaded. If it is the case, in which component did you add the import?

import { defineCustomElements as deckDeckGoHighlightElement } from '@deckdeckgo/highlight-code/dist/loader';
deckDeckGoHighlightElement();

Finally, do you see any error in the debugger's console?

[nixton9]

Hey!

So, yes i'm seeing the shadow root on the DOM tree and I can even see my code inside it.
As shown here - https://ibb.co/GMH74h0

I'm importing this on my layout component, and I'm executing the 'deckDeckGoHighlightElement()' inside a useEffect. Also tried doing this is another component and in a different way but I had the same problem.

Occasionally I'm seeing this error - https://ibb.co/5r7XVd8

Thanks for the quick reply!

[peterpeterparker]

Thank you for the feedback. Indeed it does looks like the component is correctly loaded.

Can you provide some code respectively not screenshot? Doing so I would be able to debug.

And with code I mean the piece of code, the slots, which are not rendered and what type of language=xxxx did you set.

Thanks in advance for the details.

[nixton9]

Sure!
This is one of the examples:

 ```html
 
    <p>
        The 
        <acronym title="World Wide Web Consortium">W3C</acronym> 
        is a community that works to develop standards for the World Wide Web.
    </p>

If you want to, I've deployed this and this is one of the pages where this happens. But as I said, it's totally random - it may happen or not. https://agitated-booth-57253c.netlify.app/tips/post-124

[peterpeterparker]

Thx for all the details! Yes weird totally random, tried a couple of times and only faced the problem once...weird

I'll have a look again later on tonight (UTC+2 here).

[peterpeterparker]

Seems that time to time the following mistake is throw by unpkg when the component tries to fetch the html language:

The resource from “https://unpkg.com/prismjs@1.20.0/components/prism-html.js” was blocked due to MIME type (“text/plain”) mismatch (X-Content-Type-Options: nosniff).

Which makes sense because there isn't such language to download.

In the component I wrap a try/catch around the fetch to ignore the error if it happens, not sure why then time to time it isn't displayed

[peterpeterparker]

Ok I think I can reproduce the error not randomly

1. Load the article https://agitated-booth-57253c.netlify.app/tips/post-132
2. Click on "Home"
3. Then click on "About"
4. Then on "tips"
5. Then open the article again

My guess is that doing so the component aren't reloaded and somehow because of the fetch error it doesn't display anything...

[peterpeterparker]

Gotcha! Wait for it :)

[peterpeterparker]

@nixton9 update @deckdeckgo/highlight-code in your project (v1.0.4) and it should solve the issue.

let me know if it works out or not, if not of course I'll be happy to reopen the issue.

thx for your time and for using the plugin!

[nixton9]

Just tried it out and seems all perfect, haven't seen the problem anymore!
Huge thanks man, I appreciate it!

[peterpeterparker]

Awesome, thx for the feedback and your help!

[matthewmullin01]

I'm using v2.0.0 and am having the same issue.

If I had to guess it has something to do with how the service worker is caching JS data.

• If I load directly onto the page with the code block it wont work.
• Refreshing the cache and hard reloading will work
• Navigating from another page to the page with code will work.

Solution

Instead of having the init code -

import { defineCustomElements as deckDeckGoHighlightElement } from '@deckdeckgo/highlight-code/dist/loader';
deckDeckGoHighlightElement();

in my index.js at the top, I have instead moved it into my Layout.js and put the deckDeckGoHighlightElement(); line in my constructor of the Layout Class.

// Layout.js
...
import { defineCustomElements as deckDeckGoHighlightElement } from '@deckdeckgo/highlight-code/dist/loader';
class Layout extends React.Component {
  constructor(props) {
    super(props);
    this.state = { width: 0, height: 0 };
    this.updateWindowDimensions = this.updateWindowDimensions.bind(this);
    deckDeckGoHighlightElement();
  }
...

[peterpeterparker]

@matthewmullin01 your repo is open source, can I give it a try? If yes, can you also explains me how to reproduce the issue?

For sure if we can manage to reproduce it, happy to reopen this one or to open a new bug.

Thanks in advance for your help.

[miguelgondu]

Hi @peterpeterparker, I'm facing the same issue in my blog at the moment. Sometimes it loads, and sometimes I have to refresh a couple of times before the code loads. When it doesn't, I get the following error in the navigator's console:

and some of the code snippets look like this:

Here's a link to the blogpost in question, and to its source .mdx.

I implemented @matthewmullin01 's solution in my layout and it still doesn't work. You can find the layout here, my blog is open-source. I'm using v3.0.1 for gatsby-remark-highlight-code and v3.3.1 for @deckdeckgo/highlight-code.

Thanks!

[peterpeterparker]

@miguelgondu I was not able to reproduce the issue, what browser + version are you using when you are facing the issue?
do you face the issue when developing locally or while using the production build?
which language is used in the code blocks that generates the error?
have you try to reproduce the error with last version of the @deckdeckgo/highlight-code web component (v3.4.2 currently)?

[miguelgondu]

I'm using Chrome 95.0.4638.69 (Official Build) (x86_64). I face this issue both when developing locally and in the production build (which is the blogpost I sent). The language is tsx.

I will update to the newest @deckdeckgo/highlight-code one and keep you posted. Thanks for the help!

[miguelgondu]

Still facing the same issue. Some of the content doesn't load up automatically. I'm facing the same problem in Safari, but not in Firefox it seems.

[peterpeterparker]

@miguelgondu thx for the details. I was able to reproduce it, it seems to be an issue related to loading the languages within the web component.

Follow following issue I just opened 👉 deckgo/deckdeckgo#1387

[miguelgondu]

Thanks!, it means a lot. Great work with the plugin. It's super good.

[peterpeterparker]

@miguelgondu just published a fix to npm, can you give a try to @deckdeckgo/highlight-code@3.4.3 and let me know if it solves the issue?

of course if not, happy to have a look at it again.

[miguelgondu]

Thanks for the fix!, but after updating with npm install @deckdeckgo/highlight-code@3.4.3, I still get this error on first load:

[peterpeterparker]

sh*t my bad, sorry, forgot something if multiple languages are used in the same page. if you don't mind can you try @deckdeckgo/highlight-code@3.4.4 @miguelgondu ?

[miguelgondu]

Really weird: I'm still getting the exact same mistake (even after updating to 3.4.4). The error is exactly the same: grammar seems to be undefined in deckgo-highligh-code.entry.js:745.

[peterpeterparker]

@miguelgondu @deckdeckgo/highlight-code@3.5.0 solves the issue, tested with your website.

I also bumped the plugin gatsby-remark-highlight-code@3.0.2 to set this new version as required dependency.

Thanks for your help 👍

[miguelgondu]

It works like a charm!

I love the plugin. Thank you for all the help.

[peterpeterparker]

Awesome! Thanks for the feedback 🥳