Upcoming theme components 'use strict' change - themes break after upgrading Discourse

I’m now on the latest commit level (105634435f). I upgrade Discourse about every week or so. Usually there are no issues at all. But now multiple theme components failed to load. With fail to load I mean the components do not show up anymore. The log feature in the admin panel does not show anything strange that I can relate to this issue. Many of those errors seem incidental, and already occur over a longer period of time. Like rare MimeType errors and timeouts for DNS to Google, again, they occur rarely.

These plugins fail to load after upgrading:

  • DiscoTOC
  • discourse gifs
  • Discourse Jitsi
  • Hamburger Theme Selector
  • Nav Links Component
  • Tag Icons

The only ones that do work are:

  • Discourse Kanban
  • Easy Footer

If more info is needed (I suppose there is), then I’m happy to provide it to you, please instruct. This post is more as a shoutout that something is wrong, and it’s probably a recent change. Sorry for the lack of info…

4 Likes

In addition, non-strict Javascript variable definitions like:

xxx = 330;

instead of

var xxx = 330;

will lead to JS “undefined variable” errors. We had to change all these in our scripts.

Yes, there is an issue with some theme components, we are working on a fix.

9 Likes

@pmusaraj thank you so much.
Good luck

Do you know why errors are thrown for non-strict defined JS variables in components? Is this a post-processing error? Did anything change here?

The change that caused this problems was reverted an hour ago, please update to latest if your site was affected.

9 Likes

To add to what Falco said, the change will be added back in the next few days, but before I add it back I’ll make sure all our official themes/components are compatible with the change. So if you start seeing the problem with official themes/components again, updating them should fix the problem.

I’ll also make a post to explain how to make themes/components compatible for people who have custom/private components on their sites.

My apologies for the inconvenience today.

6 Likes

one of our themes (a banner theme) has been completely overwritten to its initial format and all of the changes we had made, has gone. there was no update for the theme since 2018. would we be able to revert the changes?

Hmm that’s really weird. Have you updated your instance again to include https://github.com/discourse/discourse/commit/2b9ab3a0d91d1350188dd554764dbb4ce9837edd? Can you elaborate a little more on what you mean by ‘initial format’? Do you mean you had local changes to the JS/CSS of the theme but now all those changes are gone?

2 Likes

Does this also explain the problem with JS variable definitions? If so, how?

I don’t think this issue has to do with this reverted feature, I had the same case with a component a few weeks ago, probably around the fork indicator feature (which concern plugins so :roll_eyes: probably irrelevant too, but I just had to fork the component to modify things).

1 Like

It’s really strange, we never had that problem. Just popped up with the latest version. And I’m wondering what exactly is happening here.

It was a complex change that touched also touched “inline” JS from themes. It was reverted and will be reworked in the next few days before re-landing. You can read the details at https://github.com/discourse/discourse/pull/12517

3 Likes

Yes that change is the cause of the problem you saw in your theme. I need to go into a little bit of details of the theme system to explain what happened. There are 2 ways to add JS to a Discourse theme/component: the first one uses <script type="text/discourse-plugin"> tags inside head_tag.html files, and the other one uses standalone JS files that live inside a directory called javascripts in your theme/component.

Prior to my change today, javascript inside those special script tags were processed in a way that relied on the Discourse global variable which is not available when developing on Discourse with Ember CLI. In the change I pushed today, I made Discourse treat the JS inside those tags as if they came from standalone files and that allowed us to avoid using the Discourse global variable .

Now one “side effect” of treating javascript tags as files is that the javascript inside the tags will have the "use strict" directive which it didn’t have before, and that directive causes the errors you saw:

I’d recommend that you keep all the changes you made today in your theme because JS tags will be treated like standalone files again when I add my change back.

6 Likes

Yes, were just some lazy definitions in our code and all is working fine after making the definitions strict.

Anyways, thank you for explaining this in more detail. Probably helpful to others, too.

1 Like

yes, all the changes has gone, from css, js changes to even changes to the text :sweat: i.e. my theme goes back to its initial format with texts like " Lorem ipsum dolor sit amet …". anyway I will use the backup, but that was a strange thing to happen after the upgrade.

1 Like

Hi @Pad_Pors,

I think your issue is more related this. :slightly_smiling_face:

On the other topic you wrote:

So I think you didn’t update your Discourse for a while.

4 Likes

Continued here: