search

elastic / next-eui-starter

Start building Kibana protoypes quickly with the Next.js EUI Starter
https://elastic.github.io/next-eui-starter/
Apache License 2.0
92 stars 30 forks source link

Bad-precaching-response with themes/min.css when trying to use EUI next.js Starter for PWA #25

Open hidesminimally opened 3 years ago

hidesminimally commented 3 years ago

I'm using EUI's Next.js starter and am trying to make this into a PWA -- here is the repo. I haven't done anything crazy different from the EUI starter. Upon running npm run build; npm run start I get workbox-030153e1.js:1 Uncaught (in promise) bad-precaching-response: bad-precaching-response :: [{"url":"http://localhost:3000/public/themes/eui_theme_amsterdam_dark.e7b2d22ec11f782218ad.min.css","status":404}

Which I think results the PWA audit in Lighthouse to fail: image

I've tried excluding the themes/ folder from the caching step but this hasn't worked.

Any ideas?

Thanks in advanced!

thompsongl commented 3 years ago

This is just a hunch, but it could be that the theme switching method is the cause. Namely, using <link disabled /> on the unused theme css files.

hidesminimally commented 3 years ago

Thanks for the suggestion @thompsongl - I tried this with this PR - https://github.com/hidesminimally/engram/pull/1 and am at the same place: image

I've also tried next build and have gotten the following error despite my installation of sass in package.json's dependencies and devDependencies:

info  - Using webpack 4. Reason: future.webpack5 option not enabled https://nextjs.org/docs/messages/webpack5
info  - Checking validity of types
@rollup/plugin-replace: 'preventAssignment' currently defaults to false. It is recommended to set this option to `true`, as the next major version will default this option to `true`.
info  - Creating an optimized production build
Failed to compile.

./src/pages/app.module.scss
Error: Cannot find module 'sass'
Require stack:
- /usr/local/lib/node_modules/next/dist/compiled/sass-loader/cjs.js
- /usr/local/lib/node_modules/next/dist/compiled/webpack/bundle4.js
- /usr/local/lib/node_modules/next/dist/compiled/webpack/webpack.js
- /usr/local/lib/node_modules/next/dist/next-server/server/config-utils.js
- /usr/local/lib/node_modules/next/dist/next-server/server/config.js
- /usr/local/lib/node_modules/next/dist/build/index.js
- /usr/local/lib/node_modules/next/dist/cli/next-build.js
- /usr/local/lib/node_modules/next/dist/bin/next

> Build error occurred
Error: > Build failed because of webpack errors
    at /usr/local/lib/node_modules/next/dist/build/index.js:17:924
    at async Span.traceAsyncFn (/usr/local/lib/node_modules/next/dist/telemetry/trace/trace.js:5:584)

Which I think is also a relevant error...

But interestingly enough, when I deploy it to vercel: https://engram-k3raxj6v1-hidesminimally.vercel.app/ it does not have the sass module loading error. Just the same errors as the original post -- 404 for build-manifest.json (and min.css though I've told the caching to ignore those files for now), which prevent the app from becoming a PWA due to the 404 crashing the serviceworker.js

hidesminimally commented 3 years ago

Update: Found a solution for npm run build; npm run start by excluding .json and .min.css from preaching:https://github.com/hidesminimally/engram/pull/1/files#diff-882b2c04b01b2e8b2cdcf1817c30ea503a8005f1c0d54cfff37053b6801fea85R183

Although I'm not sure this is totally correct because I see this 404 on the vercel deployment: https://engram-izzzwf40m-hidesminimally.vercel.app/ image

And yet it is able to become a PWA.....