Some examples don't work #25854

d3lm · 2021-06-07T13:54:58Z

What example does this report relate to?

See list below

What version of Next.js are you using?

latest

What version of Node.js are you using?

14.x

What browser are you using?

Chrome

What operating system are you using?

MacOS

How are you deploying your application?

/

Describe the Bug

While testing all examples for this PR, I ran into a few examples that didn't work. Here's a list:

Expected Behavior

The examples are expected to work locally.

After an example has been fixed, please add a Preview section to the README.md right above Deploy your own.

Replace DIRECTORY_NAME with the directory name you’re adding.

## Preview

Preview the example live on [StackBlitz](http://stackblitz.com/):

[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/DIRECTORY_NAME)

⚠️ If the example doesn't work on StackBlitz, please let us know and file an issue here.

To Reproduce

Follow the steps in the README.md.

The text was updated successfully, but these errors were encountered:

vitalybaev · 2021-06-07T20:31:18Z

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

As mentioned in #25854 `witn-next-sitemap` example is missing `typescript` package as a dependency - [x] Make sure the linting passes

vitalybaev · 2021-06-08T10:22:20Z

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

d3lm · 2021-06-08T19:54:57Z

Yep totally, good point.

Fixes one of the items that was mentioned in #25854. It fixes the warning in `with-next-page-transitions` by moving the viewport tag to `_app.js` from `_document.js`

Fixes one of the items that was mentioned in #25854. It fixes warning from React in `with-react-multi-carousel`.

d3lm · 2021-06-09T06:41:38Z

@vitalybaev I can verify that the mobx-state-tree-typescript works now, but there is still a warning. Would be awesome if we could get rid of it.

Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded 
into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated 
UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render 
exclusively on the client. See https://fb.me/react-uselayouteffect-ssr for common fixes.

akellbl4 · 2021-06-09T09:45:31Z

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.

d3lm · 2021-06-09T11:12:45Z

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

akellbl4 · 2021-06-09T11:19:37Z

@d3lm good! Let me know if anything causes errors I'm ready to fix it ;)

d3lm · 2021-06-09T11:47:01Z

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

lauriskuznecovs · 2021-06-10T06:12:42Z

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 · 2021-06-10T07:00:51Z

Warning: componentWillMount has been renamed

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.

@leerob what should we do with the example?

akellbl4 · 2021-06-10T07:48:59Z

@d3lm here are live examples of fixed items that were merged:

Could you please mark them as resolved?

d3lm · 2021-06-10T08:55:55Z

@akellbl4 Updated the list accordingly. Good job man!

@leerob

## Documentation / Examples - [x] Make sure the linting passes As mentioned in #25854 `with-urql` doesn't work. After investigation, I've found that Pokémon GraphQL server located at `https://graphql-pokemon.vercel.app` is down. After some research I came across its repository and this [pull request](lucasbento/graphql-pokemon#14). That pull request provides new URL `https://graphql-pokemon2.vercel.app` which seems to work. I don't know the status of this server, maybe @leerob can confirm this PR is ok.

vitalybaev · 2021-06-10T16:50:35Z

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

d3lm · 2021-06-10T20:21:36Z

@vitalybaev Awesome! Just checked it and it works. Great work 🙌 🙏

@leerob

## Documentation / Examples - [x] Make sure the linting passes As mentioned in vercel#25854 `with-urql` doesn't work. After investigation, I've found that Pokémon GraphQL server located at `https://graphql-pokemon.vercel.app` is down. After some research I came across its repository and this [pull request](lucasbento/graphql-pokemon#14). That pull request provides new URL `https://graphql-pokemon2.vercel.app` which seems to work. I don't know the status of this server, maybe @leerob can confirm this PR is ok.

Fixes one of the items from #25854 ## Documentation / Examples - [x] Make sure the linting passes - [x] Add the StackBlitz button

akellbl4 · 2021-06-14T19:42:10Z

d3lm something went wrong on StackBlitz :( stackblitz/core#1505

Ops, that's was my bad. Fixed in #26091

As mentioned in vercel#25854 `witn-next-sitemap` example is missing `typescript` package as a dependency - [x] Make sure the linting passes

Fixes one of the items that was mentioned in vercel#25854. It fixes the warning in `with-next-page-transitions` by moving the viewport tag to `_app.js` from `_document.js`

Fixes one of the items that was mentioned in vercel#25854. It fixes warning from React in `with-react-multi-carousel`.

@leerob

## Documentation / Examples - [x] Make sure the linting passes As mentioned in vercel#25854 `with-urql` doesn't work. After investigation, I've found that Pokémon GraphQL server located at `https://graphql-pokemon.vercel.app` is down. After some research I came across its repository and this [pull request](lucasbento/graphql-pokemon#14). That pull request provides new URL `https://graphql-pokemon2.vercel.app` which seems to work. I don't know the status of this server, maybe @leerob can confirm this PR is ok.

## Documentation / Examples - [x] Make sure the linting passes Continuing fixing vercel#25854 Switching from `node-sass` to `sass`

### Documentation / Examples Fixed one of the items from vercel#25854 - [x] add `@graphql-codegen/import-types-preset` - [x] remove depriceated field `schemaEntrypoint` - [x] add the StackBlitz button - [x] Make sure the linting passes [Live demo on StackBlitz](https://stackblitz.com/github/akellbl4/next.js/tree/example/with-typescript-graphql/fix-deps/examples/with-typescript-graphql)

Fixes some examples from vercel#25854 - with-kea [live demo](https://stackblitz.com/github/akellbl4/next.js/tree/examples/missed-peer-deps/examples/with-kea) - with-mobx [live demo](https://stackblitz.com/github/akellbl4/next.js/tree/examples/missed-peer-deps/examples/with-mobx) - with-mobx-react-lite [live demo](https://stackblitz.com/github/akellbl4/next.js/tree/examples/missed-peer-deps/examples/with-mobx-react-lite) - with-mobx-state-tree [live demo](https://stackblitz.com/github/akellbl4/next.js/tree/examples/missed-peer-deps/examples/with-mobx-state-tree) ## Documentation / Examples - [x] Add the StackBlitz button - [x] Make sure the linting passes

Fixes one of the items from vercel#25854 ## Documentation / Examples - [x] Make sure the linting passes - [x] Add the StackBlitz button

Fixes one of the items from #25854 ## Documentation / Examples - [x] Make sure the linting passes - [x] Add the StackBlitz button - [x] [Live demo](https://stackblitz.com/github/akellbl4/next.js/tree/examples/with-lingui-update/examples/with-lingui)

d3lm · 2021-06-21T15:21:52Z

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

vitalybaev · 2021-06-21T16:40:16Z

@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 😴

## Documentation / Examples - [x] Make sure the linting passes Fixes #26436 As mention in #25854 `with-webassembly` example doesn't work anymore after switching to webpack 5. This PR adds webpack experimental configuration.

d3lm · 2021-06-21T18:37:57Z

Yay! Has been merged 🙌 Thanks @vitalybaev

Fixes one of the items from vercel#25854 ## Documentation / Examples - [x] Make sure the linting passes - [x] Add the StackBlitz button - [x] [Live demo](https://stackblitz.com/github/akellbl4/next.js/tree/examples/with-lingui-update/examples/with-lingui)

## Documentation / Examples - [x] Make sure the linting passes Fixes vercel#26436 As mention in vercel#25854 `with-webassembly` example doesn't work anymore after switching to webpack 5. This PR adds webpack experimental configuration.

d3lm · 2021-06-29T07:49:51Z

I just filed #26715 because the with-webpack-bundle-size-analyzer doesn't work anymore. Anyone down to fix this?

### Documentation / Examples Fixed one of the items from #25854 - Fixes warning from `next-intl` - Hides locale selector in case if no other location - Fixes path `next/router` import - Removes unused variable --- - [x] Add the StackBlitz button in README.md - [x] Make sure the linting passes [Live demo on StackBlitz](https://stackblitz.com/github/akellbl4/next.js/tree/fix/example-with-i18n-next-intl-missing-other/examples/with-i18n-next-intl)

### Documentation / Examples Fixed one of the items from vercel#25854 - Fixes warning from `next-intl` - Hides locale selector in case if no other location - Fixes path `next/router` import - Removes unused variable --- - [x] Add the StackBlitz button in README.md - [x] Make sure the linting passes [Live demo on StackBlitz](https://stackblitz.com/github/akellbl4/next.js/tree/fix/example-with-i18n-next-intl-missing-other/examples/with-i18n-next-intl)

Cheprer · 2021-10-16T20:33:25Z

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?

balazsorban44 · 2021-12-23T02:24:24Z

Hi, we appreciate the efforts on this, but I believe such an issue like this should not exist. It's way too general and hardly actionable. I suggest opening example-specific issues instead.

balazsorban44 · 2022-01-27T01:27:26Z

This issue has been automatically locked due to no recent activity. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

…9996) ## Bug - Partially fixes #25854 - Badly specified package dependency version (`graphql-let`). The new major version required manual migration. As specified [here](https://github.com/piglovesyou/graphql-let/releases/tag/v0.18.0). - In `lib/resolvers.ts` ```Module '"*.graphqls"' has no exported member 'MutationResolvers'. Did you mean to use 'import MutationResolvers from "*.graphqls"' instead?ts(2614)``` ## Fixes - Migrate as described in migration guide for `graphql-let` above. - Update some npm packages along the way.

…rcel#29996) ## Bug - Partially fixes vercel#25854 - Badly specified package dependency version (`graphql-let`). The new major version required manual migration. As specified [here](https://github.com/piglovesyou/graphql-let/releases/tag/v0.18.0). - In `lib/resolvers.ts` ```Module '"*.graphqls"' has no exported member 'MutationResolvers'. Did you mean to use 'import MutationResolvers from "*.graphqls"' instead?ts(2614)``` ## Fixes - Migrate as described in migration guide for `graphql-let` above. - Update some npm packages along the way.

d3lm added bug Issue was opened via the bug report template. examples Issue/PR related to examples labels Jun 7, 2021

vitalybaev mentioned this issue Jun 7, 2021

fix: added typescript dependency in next-sitemap example #25866

Merged

1 task

kodiakhq bot pushed a commit that referenced this issue Jun 7, 2021

fix: added typescript dependency in next-sitemap example (#25866)

ff1b8e9

As mentioned in #25854 `witn-next-sitemap` example is missing `typescript` package as a dependency - [x] Make sure the linting passes

This was referenced Jun 8, 2021

fix: move viewport meta tag to head in _app.js #25901

Merged

fix: use key while rendering arrays #25902

Merged

kodiakhq bot pushed a commit that referenced this issue Jun 9, 2021

fix: use key while rendering arrays (#25902)

3815222

Fixes one of the items that was mentioned in #25854. It fixes warning from React in `with-react-multi-carousel`.

akellbl4 mentioned this issue Jun 9, 2021

(examples/with-i18n-next-intl): fixes warning #25928

Merged

2 tasks

akellbl4 mentioned this issue Jun 9, 2021

(example/with-antd-mobile): Fix the example #25929

Closed

2 tasks

vitalybaev mentioned this issue Jun 10, 2021

(examples/with-urql): fixes graphql server url #25987

Merged

1 task

vitalybaev mentioned this issue Jun 11, 2021

(examples/with-react-md): switch from node-sass to sass #26001

Merged

1 task

This was referenced Jun 11, 2021

(example/with-typescript-grapql): fix deps #26010

Merged

(examples/with-tailwind-emotion): disable jit mode #26012

Closed

kodiakhq bot pushed a commit that referenced this issue Jun 14, 2021

(examples/with-rbx-bulma-pro): update deps (#26077)

8fd5d92

Fixes one of the items from #25854 ## Documentation / Examples - [x] Make sure the linting passes - [x] Add the StackBlitz button

flybayer pushed a commit to blitz-js/next.js that referenced this issue Jun 16, 2021

fix: use key while rendering arrays (vercel#25902)

cf45f33

Fixes one of the items that was mentioned in vercel#25854. It fixes warning from React in `with-react-multi-carousel`.

flybayer pushed a commit to blitz-js/next.js that referenced this issue Jun 16, 2021

(examples/with-rbx-bulma-pro): update deps (vercel#26077)

85f2cc6

Fixes one of the items from vercel#25854 ## Documentation / Examples - [x] Make sure the linting passes - [x] Add the StackBlitz button

phoshenwen mentioned this issue Jun 18, 2021

TypeError: Cannot read property 'theme' of undefined #26337

Closed

vitalybaev mentioned this issue Jun 21, 2021

(examples/with-webassembly) fixed for webpack 5 #26440

Merged

1 task

Cheprer mentioned this issue Oct 17, 2021

fix(example): with-typescript-graphql graphql-let package migrate #29996

Merged

balazsorban44 closed this as completed Dec 23, 2021

vercel locked as resolved and limited conversation to collaborators Jan 27, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Some examples don't work #25854

Some examples don't work #25854

d3lm commented Jun 7, 2021 •

edited

Loading

vitalybaev commented Jun 7, 2021

vitalybaev commented Jun 8, 2021

d3lm commented Jun 8, 2021

d3lm commented Jun 9, 2021 •

edited

Loading

akellbl4 commented Jun 9, 2021

d3lm commented Jun 9, 2021

akellbl4 commented Jun 9, 2021

d3lm commented Jun 9, 2021 •

edited

Loading

lauriskuznecovs commented Jun 10, 2021 •

edited

Loading

akellbl4 commented Jun 10, 2021

akellbl4 commented Jun 10, 2021

d3lm commented Jun 10, 2021

vitalybaev commented Jun 10, 2021

d3lm commented Jun 10, 2021

akellbl4 commented Jun 14, 2021 •

edited

Loading

d3lm commented Jun 21, 2021

vitalybaev commented Jun 21, 2021

d3lm commented Jun 21, 2021

d3lm commented Jun 29, 2021

Cheprer commented Oct 16, 2021

balazsorban44 commented Dec 23, 2021

balazsorban44 commented Jan 27, 2022

Some examples don't work #25854

Some examples don't work #25854

Comments

d3lm commented Jun 7, 2021 • edited Loading

What example does this report relate to?

What version of Next.js are you using?

What version of Node.js are you using?

What browser are you using?

What operating system are you using?

How are you deploying your application?

Describe the Bug

Expected Behavior

To Reproduce

vitalybaev commented Jun 7, 2021

vitalybaev commented Jun 8, 2021

d3lm commented Jun 8, 2021

d3lm commented Jun 9, 2021 • edited Loading

akellbl4 commented Jun 9, 2021

d3lm commented Jun 9, 2021

akellbl4 commented Jun 9, 2021

d3lm commented Jun 9, 2021 • edited Loading

lauriskuznecovs commented Jun 10, 2021 • edited Loading

akellbl4 commented Jun 10, 2021

akellbl4 commented Jun 10, 2021

d3lm commented Jun 10, 2021

vitalybaev commented Jun 10, 2021

d3lm commented Jun 10, 2021

akellbl4 commented Jun 14, 2021 • edited Loading

d3lm commented Jun 21, 2021

vitalybaev commented Jun 21, 2021

d3lm commented Jun 21, 2021

d3lm commented Jun 29, 2021

Cheprer commented Oct 16, 2021

balazsorban44 commented Dec 23, 2021

balazsorban44 commented Jan 27, 2022

d3lm commented Jun 7, 2021 •

edited

Loading

d3lm commented Jun 9, 2021 •

edited

Loading

d3lm commented Jun 9, 2021 •

edited

Loading

lauriskuznecovs commented Jun 10, 2021 •

edited

Loading

akellbl4 commented Jun 14, 2021 •

edited

Loading