next.js: Some examples don't work

I’m going to fix all of the examples with missed peer dependencies

with-react-md has been merged 👌

Example with-typescript-graphql is currenty not working. The fix above didn’t work.

In lib/resolvers.ts typescript throws an error and fails to compile.

Module '"*.graphqls"' has no exported member 'MutationResolvers'. Did you mean to use 'import MutationResolvers from "*.graphqls"' instead?ts(2614)

Ideas how to fix it?

Yay! Has been merged 🙌 Thanks @vitalybaev

Yes. It installs the latest version of @lingui/react and some exports were deprecated (removed actually). I think I can update the example.

Thanks @akellbl4 for fixing the with-typescript-grapql exmaple 🎉 🙏

@d3lm with-urql example has been fixed in #25987. I’ve also added StackBlitz button in readme. Please check it.

@d3lm good! Let me know if anything causes errors I’m ready to fix it 😉

Could you please convert this list to checkboxes? It would be much better to understand fixed cases 🙏

@d3lm thanks for reporting! It has been broken after releasing Next.js 11, that enabled webpack 5 by default. Let’s wait my PR to merge 😴

@akellbl4 @vitalybaev I just filed an issue for with-webassembly which broke recently. Maybe you have some time to check?

d3lm something went wrong on StackBlitz 😦 stackblitz/core#1505

Ops, that’s was my bad. Fixed in https://github.com/vercel/next.js/pull/26091

ssr-caching example does not work, even with current latest package versions. I made it working like this, but there is an issue when using next-i18next. locale is not available from next router, but locales is.

server.js

const cacheableResponse = require('cacheable-response')
const express = require('express')
const next = require('next')

const port = parseInt(process.env.PORT, 10) || 3000
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })

const handle = app.getRequestHandler()

const ssrCache = cacheableResponse({
  ttl: 1000 * 60, // 1 minute
  getKey: ({ req }) => `${req.url}`,
  get: async ({ req, res, path, query }) => {
    const data = await app.renderToHTML(req, res, path, query)

    // Add here custom logic for when you do not want to cache the page, for
    // example when the page returns a 404 status code:
    if (res.statusCode === 404) {
      res.end(data)
      return
    }

    return { data }
  },
  send: ({ data, res }) => res.send(data)
})

app.prepare().then(() => {
  const server = express()

  server.get('/', (req, res) => ssrCache({ req, res, path: req.path, query: req.query, }))

  server.get('/blog/:id', (req, res) => ssrCache({ req, res, path: req.path, query: req.query, }))

  server.get('*', (req, res) => handle(req, res))

  server.listen(port, (err) => {
    if (err) throw err
    console.log(`> Ready on http://localhost:${port}`)
  })
})

@akellbl4 I commented on your PRs with updates and can verify that the i18n example works now 👍 Good job!

@akellbl4 Thanks for the update! Let me test those examples again and update the checklist accordingly.

• The warning in with-next-page-transitions has been fixed.
• with-react-multi-carousel is fixed as well
• I don’t see anything that we can fix in with-reflux example. The warning produced by reflux. Reflux hasn’t got updates last 4 years.

Good work, thanks! mobx-state-tree-typescript should be fixed in #25589