Next.js site's Lighthouse report screenshots shows site without working JS

kmcguire · November 23, 2022, 10:07am

Site:

brc-web-vad.netlify.app / https://vad.redcross.org.uk

Issue description:

I’ve installed the Lighthouse plugin, but I’m a bit concerned that the results it’s reporting are not accurate. When I look at the report, all the screenshots of our site look like javascript wasn’t working/running, and in the report’s section about console logs there are lots of 404s for our css and js assets.

Context:

“next”: “12.3.3”,
“@netlify/plugin-nextjs”: “4.29.1”,
“@netlify/plugin-lighthouse”: “4.0.3”,
We have a pretty detailed Content Security Policy, but ‘self’ should be allowed everywhere

Lighthouse report screenshot:

Lighthouse report console logs:

localhost:5000/_next/static/chunks/webpack-9b312e20a4e32339.js
Failed to load resource: the server responded with a status of 404 (Not Found)

localhost:5000/_next/static/chunks/framework-4556c45dd113b893.js
Failed to load resource: the server responded with a status of 404 (Not Found)

localhost:5000/_next/static/chunks/main-eab35b1792758c8a.js
Failed to load resource: the server responded with a status of 404 (Not Found)

localhost:5000/_next/static/chunks/pages/_app-aaea18a70aa9c005.js
Failed to load resource: the server responded with a status of 404 (Not Found)

localhost:5000/_next/static/chunks/409-b5e1b7dad64b2dc0.js
Failed to load resource: the server responded with a status of 404 (Not Found)

localhost:5000/_next/static/chunks/906-3798bb141fe512d3.js
Failed to load resource: the server responded with a status of 404 (Not Found)

localhost:5000/_next/static/chunks/723-3104ba4889d7fa5c.js
Failed to load resource: the server responded with a status of 404 (Not Found)

localhost:5000/_next/static/chunks/pages/%5B%5B...slug%5D%5D-31f34c0a7212f72b.js
Failed to load resource: the server responded with a status of 404 (Not Found)

localhost:5000/_next/static/n8oEHhG3Y0xQ9UPXBeO54/_buildManifest.js
Failed to load resource: the server responded with a status of 404 (Not Found)

localhost:5000/_next/static/n8oEHhG3Y0xQ9UPXBeO54/_ssgManifest.js
Failed to load resource: the server responded with a status of 404 (Not Found)

Refused to apply style from 'localhost:5000/_next/static/css/051774649863483d.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

Refused to execute script from 'localhost:5000/_next/static/chunks/409-b5e1b7dad64b2dc0.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

Refused to execute script from 'localhost:5000/_next/static/chunks/723-3104ba4889d7fa5c.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

Refused to execute script from 'localhost:5000/_next/static/chunks/906-3798bb141fe512d3.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.|

Refused to execute script from 'localhost:5000/_next/static/chunks/framework-4556c45dd113b893.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.|

Refused to execute script from 'localhost:5000/_next/static/chunks/main-eab35b1792758c8a.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.|

Refused to execute script from 'localhost:5000/_next/static/chunks/pages/_app-aaea18a70aa9c005.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.|

Refused to execute script from 'localhost:5000/_next/static/chunks/pages/%5B%5B...slug%5D%5D-31f34c0a7212f72b.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.|

Refused to execute script from 'localhost:5000/_next/static/chunks/webpack-9b312e20a4e32339.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.|

Refused to execute script from 'localhost:5000/_next/static/n8oEHhG3Y0xQ9UPXBeO54/_buildManifest.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.|

Refused to execute script from 'localhost:5000/_next/static/n8oEHhG3Y0xQ9UPXBeO54/_ssgManifest.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

I’ve cut out the http:// wherever it was mentioned to avoid making actual links to localhost.

jackbrewer · November 23, 2022, 1:28pm

Hi @kmcguire

You’re correct, it’s not looking quite as expected! Would you mind giving me a little more info around your setup?

Did you install the plugin via npm? Or did you use the Netlify App UI?
Do you have anything specified in your netlify.toml to configure this plugin beyond the default options?

If the source for this project is public, I’d be happy to see if I can replicate the issue.

Thanks, Jack.

kmcguire · November 23, 2022, 2:17pm

Thanks @jackbrewer! Sadly the source isn’t public but I can answer your Qs.

Did you install the plugin via npm? Or did you use the Netlify App UI?

npm

Do you have anything specified in your netlify.toml to configure this plugin beyond the default options?

No Lighthouse config in netlify.toml, barely anything in there besides a few redirects.

I suspect it might be our Content Security Policy, which is set in next.config.js. Contents:

const contentSecurityPolicy = `
  default-src 'self' redcross.org.uk *.redcross.org.uk *.kc-usercontent.com *.netlify.app *.netlify.com *.onetrust.com https://analytics.tiktok.com https://in.hotjar.com https://vars.hotjar.com https://www.googletagmanager.com;

  connect-src 'self' *.onetrust.com https://analytics.tiktok.com https://region1.google-analytics.com https://stats.g.doubleclick.net https://www.google.co.uk https://www.googleadservices.com https://www.google-analytics.com wss://ws1.hotjar.com;

  img-src 'self' redcross.org.uk *.redcross.org.uk *.kc-usercontent.com *.onetrust.com https://analytics.tiktok.com https://bat.bing.com https://googleads.g.doubleclick.net https://sasrchvadproduksouth001.blob.core.windows.net https://stats.g.doubleclick.net https://www.facebook.com https://www.google.com https://www.google.co.uk https://www.google-analytics.com https://www.googletagmanager.com data:;

  script-src 'self' redcross.org.uk *.redcross.org.uk *.netlify.app *.netlify.com *.onetrust.com https://analytics.tiktok.com https://bat.bing.com https://connect.facebook.net https://www.google.com https://www.google.co.uk https://www.googleadservices.com https://www.google-analytics.com/ https://www.googletagmanager.com https://www.gstatic.com https://script.hotjar.com https://static.hotjar.com 'unsafe-inline' 'unsafe-eval';

  style-src 'self' redcross.org.uk *.redcross.org.uk 'unsafe-inline';

  frame-ancestors https://app.kontent.ai;
`;

const securityHeaders = [
  {
    key: "X-DNS-Prefetch-Control",
    value: "on",
  },
  {
    key: "Strict-Transport-Security",
    value: "max-age=31536000",
  },
  {
    key: "X-XSS-Protection",
    value: "1; mode=block",
  },
  {
    key: "X-Content-Type-Options",
    value: "nosniff",
  },
  {
    key: "Referrer-Policy",
    value: "strict-origin-when-cross-origin, no-referrer-when-downgrade",
  },
  {
    key: "Permissions-Policy",
    value: "fullscreen=(self), geolocation=(self), web-share=(self)",
  },
  {
    key: "Content-Security-Policy",
    value: contentSecurityPolicy.replace(/\s{2,}/g, " ").trim(),
  },
];

jackbrewer · November 24, 2022, 3:32pm

Thanks for the follow-up.

I deployed a relatively basic Next.js site with a variation of your CSP setup and was able to load CSS/JS as expected, so there may be other variables in play.

The Lighthouse plugin currently runs against a static built version of your site’s files. It does not currently support Server Side Rendering or Incremental Static Regeneration (these are planned for a future version), so this may play in to the problem. Are you able to confirm that your _next directory containing your compiled CSS and JS lives directly within your .next publish directory once compiled?

Additionally, you could try creating a branch without the Content Security Policy in place to test the theory using a Deploy Preview? This would require creating a placeholder Pull Request, which wouldn’t need to be merged to your production code.

kmcguire · November 24, 2022, 4:06pm

Thank you for looking into it!

I’ve tried removing the CSP entirely and checked the Preview Deploy’s Lighthouse report, and found the same - no styling.

Running the Netlify build locally, it looks like the CSS and JS don’t go into .next/_next, but .next/static/css and .next/static/chunks respectively.

jackbrewer · November 24, 2022, 5:04pm

No worries

I’ve replicated the same here. Running next build directly doesn’t generate a static site ready to be audited directly by Lighthouse – as you found, the paths can’t resolve successfully.

Support for this is definitely on our radar though. Sorry it’s not an immediate solution, but it will hopefully be available soon.

kmcguire · November 24, 2022, 5:08pm

It’s good to know it wasn’t something wrong with our setup!

Will keep an eye out for the update

Thanks for your time!