Tom-Bonnike/netlify-plugin-inline-critical-css

SyntaxError: 'noscript)>[rel="stylesheet"]' is not a valid selector

brendan1212 opened this issue · 8 comments

brendan1212 commented

Not sure where to start in debugging this. Is there anything else I can provide here?
Thanks

2. netlify-plugin-inline-critical-css (onPostBuild event)     
4:23:30 PM: ────────────────────────────────────────────────────────────────
4:23:30 PM: ​
4:23:31 PM: ​
4:23:31 PM:   Plugin "netlify-plugin-inline-critical-css" failed            
4:23:31 PM: ────────────────────────────────────────────────────────────────
4:23:31 PM: ​
4:23:31 PM:   Error message
4:23:31 PM:   SyntaxError: 'noscript)>[rel="stylesheet"]' is not a valid selector
4:23:31 PM: ​
4:23:31 PM:   Plugin details
4:23:31 PM:   Package:        netlify-plugin-inline-critical-css
4:23:31 PM:   Version:        2.0.0
4:23:31 PM:   Repository:     git+https://github.com/Tom-Bonnike/netlify-plugin-inline-critical-css.git
4:23:31 PM:   npm link:       https://www.npmjs.com/package/netlify-plugin-inline-critical-css
4:23:31 PM:   Report issues:  https://github.com/Tom-Bonnike/netlify-plugin-inline-critical-css/issues
4:23:31 PM: ​
4:23:31 PM:   Error location
4:23:31 PM:   In "onPostBuild" event in "netlify-plugin-inline-critical-css" from Netlify app
Tom-Bonnike commented

This plugin simply forwards all options and calls critical. Could you try directly running critical on your project locally and see if you get the same error? Are @pentwo and you working on the same project, or is this happening on multiple projects? Have you written this selector yourself?

I can’t find any occurence of it in the critical repo. Either way in the next days I’ll try and find some time to bump Critical to v5 and release a new version of the plugin. Maybe that’ll fix it 😅

  • 👍1
pentwo commented

Just tried with critical, but there was the same issue.
I try to look into node_model/inline-critical/index.js and found that if I commented out the lines 80 and 81

  const targetSelectors = [
    o.selector,
//    ':not(noscript) > link[rel="stylesheet"]',
//    ':not(noscript) > link[rel="preload"][as="style"]',
    'head script',
  ];

Then the build works.
Not sure how to fix this thought.

I am using Mantine as my css framework not sure if that's the reason.

  • 👍2
Tom-Bonnike commented

I’d recommend opening an issue on the inline-critical repo with a small reproduction case then.

brendan1212 commented

Hi @Tom-Bonnike , these are 2 separate instances of the issue. Unfortunately, I'm unable to get the critical library working on my nuxtjs project locally.

  • 👍1
ninjasitm commented

Currently experiencing this on a build but did not install this plugin. Is this installed by default on New Netlify builds?

EIDT: The issue is fixed by disabling the plugin here: https://app.netlify.com/sites/{{SITE_NAME}}/integrations/plugins

  • 🎉1
Tom-Bonnike commented

So wait you did install the plugin yes? It shouldn’t be installed by default

Natetronn commented

I'm having this issue as well when using this plugin, which is activated on Netlify. When plugin is disabled, build goes fine. It was working fine for quite some time.

I just changed from pnpm to yarn, as pnpm was having another (unrelated) issue during build. I also updated my .nvmrc to a more recent version of node in the process to rule that out when troubleshooting that issue. I wonder if one of those changes has caused this.

@pentwo which version of Node are you running? I'm on 18.16.0 LTS.

ETA

Okay, I get the same error on v16.20.0 LTS as well.

pentwo commented

@Natetronn
Build locally with node version v18.12.1 failed with this error