aerolab / nextjs-pwa Goto Github PK
View Code? Open in Web Editor NEWBuild a PWA with Next.JS
License: MIT License
Build a PWA with Next.JS
License: MIT License
Any idea what the best way to run on express?
You may want to consider next-manifest and next-offline. I am still learning about all this but they seem like they might greatly simplify a next.js PWA implementation.
But I am getting those errors, any idea why?
Starting process with command `npm start`
2018-01-04T04:25:44.463448+00:00 app[web.1]:
2018-01-04T04:25:44.463476+00:00 app[web.1]: > [email protected] start /app
2018-01-04T04:25:44.463489+00:00 app[web.1]: > NODE_ENV=production node server.js
2018-01-04T04:25:44.463491+00:00 app[web.1]:
2018-01-04T04:25:44.809950+00:00 app[web.1]: > Ready on http://localhost:46078
2018-01-04T04:25:45.932300+00:00 heroku[web.1]: State changed from starting to up
2018-01-04T04:25:54.791603+00:00 app[web.1]: { Error: Cannot find module 'styled-jsx\style.js'
2018-01-04T04:25:54.791619+00:00 app[web.1]: at Function.Module._resolveFilename (module.js:538:15)
2018-01-04T04:25:54.791621+00:00 app[web.1]: at Function.Module._load (module.js:468:25)
2018-01-04T04:25:54.791622+00:00 app[web.1]: at Module.require (module.js:587:17)
2018-01-04T04:25:54.791623+00:00 app[web.1]: at require (internal/module.js:11:18)
2018-01-04T04:25:54.791624+00:00 app[web.1]: at Object.<anonymous> (/app/.next/dist/pages/index.js:35:14)
2018-01-04T04:25:54.791624+00:00 app[web.1]: at Module._compile (module.js:643:30)
2018-01-04T04:25:54.791625+00:00 app[web.1]: at Object.Module._extensions..js (module.js:654:10)
2018-01-04T04:25:54.791625+00:00 app[web.1]: at Module.load (module.js:556:32)
2018-01-04T04:25:54.791626+00:00 app[web.1]: at tryModuleLoad (module.js:499:12)
2018-01-04T04:25:54.791626+00:00 app[web.1]: at Function.Module._load (module.js:491:3) code: 'MODULE_NOT_FOUND' }
2018-01-04T04:25:54.798898+00:00 app[web.1]: { Error: Cannot find module 'next\dist\lib\error.js'
2018-01-04T04:25:54.798900+00:00 app[web.1]: at Function.Module._resolveFilename (module.js:538:15)
2018-01-04T04:25:54.798901+00:00 app[web.1]: at Function.Module._load (module.js:468:25)
2018-01-04T04:25:54.798902+00:00 app[web.1]: at Module.require (module.js:587:17)
2018-01-04T04:25:54.798902+00:00 app[web.1]: at require (internal/module.js:11:18)
2018-01-04T04:25:54.798903+00:00 app[web.1]: at Object.<anonymous> (/app/.next/dist/pages/_error.js:3:18)
2018-01-04T04:25:54.798904+00:00 app[web.1]: at Module._compile (module.js:643:30)
2018-01-04T04:25:54.798905+00:00 app[web.1]: at Object.Module._extensions..js (module.js:654:10)
2018-01-04T04:25:54.798905+00:00 app[web.1]: at Module.load (module.js:556:32)
2018-01-04T04:25:54.798906+00:00 app[web.1]: at tryModuleLoad (module.js:499:12)
2018-01-04T04:25:54.798907+00:00 app[web.1]: at Function.Module._load (module.js:491:3) code: 'MODULE_NOT_FOUND' }
2018-01-04T04:25:55.150263+00:00 app[web.1]: { Error: Cannot find module 'next\dist\lib\error.js'
2018-01-04T04:25:55.150277+00:00 app[web.1]: at Function.Module._resolveFilename (module.js:538:15)
2018-01-04T04:25:55.150278+00:00 app[web.1]: at Function.Module._load (module.js:468:25)
2018-01-04T04:25:55.150279+00:00 app[web.1]: at Module.require (module.js:587:17)
2018-01-04T04:25:55.150279+00:00 app[web.1]: at require (internal/module.js:11:18)
2018-01-04T04:25:55.150281+00:00 app[web.1]: at Object.<anonymous> (/app/.next/dist/pages/_error.js:3:18)
2018-01-04T04:25:55.150281+00:00 app[web.1]: at Module._compile (module.js:643:30)
2018-01-04T04:25:55.150282+00:00 app[web.1]: at Object.Module._extensions..js (module.js:654:10)
2018-01-04T04:25:55.150282+00:00 app[web.1]: at Module.load (module.js:556:32)
2018-01-04T04:25:55.150283+00:00 app[web.1]: at tryModuleLoad (module.js:499:12)
2018-01-04T04:25:55.150284+00:00 app[web.1]: at Function.Module._load (module.js:491:3) code: 'MODULE_NOT_FOUND' }
2018-01-04T04:25:55.154827+00:00 heroku[router]: at=info method=GET path="/favicon.ico" host=bitcoinvsaltcoins.herokuapp.com request_id=c40f8b48-8a93-43dd-88d7-f5ff49f7a6c3 fwd="186.15.29.74" dyno=web.1 connect=0ms service=11ms status=500 bytes=164 protocol=https
2018-01-04T04:25:54.804717+00:00 heroku[router]: at=info method=GET path="/" host=bitcoinvsaltcoins.herokuapp.com request_id=e629f750-514e-406d-8e57-df9b10a88901 fwd="186.15.29.74" dyno=web.1 connect=0ms service=53ms status=500 bytes=164 protocol=https
2018-01-04T04:26:02.330838+00:00 app[web.1]: { Error: Cannot find module 'styled-jsx\style.js'
2018-01-04T04:26:02.330860+00:00 app[web.1]: at Function.Module._resolveFilename (module.js:538:15)
2018-01-04T04:26:02.330861+00:00 app[web.1]: at Function.Module._load (module.js:468:25)
2018-01-04T04:26:02.330862+00:00 app[web.1]: at Module.require (module.js:587:17)
2018-01-04T04:26:02.330862+00:00 app[web.1]: at require (internal/module.js:11:18)
2018-01-04T04:26:02.330863+00:00 app[web.1]: at Object.<anonymous> (/app/.next/dist/pages/index.js:35:14)
2018-01-04T04:26:02.330864+00:00 app[web.1]: at Module._compile (module.js:643:30)
2018-01-04T04:26:02.330865+00:00 app[web.1]: at Object.Module._extensions..js (module.js:654:10)
2018-01-04T04:26:02.330865+00:00 app[web.1]: at Module.load (module.js:556:32)
2018-01-04T04:26:02.330866+00:00 app[web.1]: at tryModuleLoad (module.js:499:12)
2018-01-04T04:26:02.330866+00:00 app[web.1]: at Function.Module._load (module.js:491:3) code: 'MODULE_NOT_FOUND' }
The truth link is blog/react-nextjs-pwa but the link matches to pwa-react-nextjs ๐
I see you are using <style jsx>. Can you please show me how to use styled-components instead?
I know how to use it when it extends Document since it has access to the renderPage. But with the Layout.js it is not extending Document so how would you get access to the renderPage?
Thanks
I've visited https://github.com/goldhand/sw-precache-webpack-plugin but there's no documentation on the options you added in the nextjs.config.js
on the verbose
and runtimeCaching
Could you point me to the documentation for these and what they do?
Hi,
Thank you for providing an example implementation of a PWA with nextjs. I was implementing a similar model to my nextjs app and with my config for the service worker in next.config.js i added then setting called navigateFallback="/index" to add a fallback page if the network is down so the service worker can deliver that and the app continues to display some cached content even if the network is down.
That setting however doesn't work and when the network is turned off it still shows a 404 page saying the page can not be found and so the redirect doesn't work.
I wonder if you have found this bug or have a solution to get that to work?
BW
P
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.