with-next-page-transitions example is failing

[mkaraula]

Examples bug report

Example name

with-next-page-transitions

Describe the bug

After following the description on https://github.com/zeit/next.js/tree/canary/examples/with-next-page-transitions and accessing the site, the server throws an Error

TypeError: Cannot read property 'isRequired' of null
    at Object.<anonymous> (/Users/marcokaraula/repos/nextjs-examples/with-next-page-transitions/node_modules/next-page-transitions/lib/PageTransition.js:300:37)
    at Module._compile (internal/modules/cjs/loader.js:721:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:732:10)
    at Module.load (internal/modules/cjs/loader.js:620:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
    at Function.Module._load (internal/modules/cjs/loader.js:552:3)
    at Module.require (internal/modules/cjs/loader.js:657:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.<anonymous> (/Users/marcokaraula/repos/nextjs-examples/with-next-page-transitions/node_modules/next-page-transitions/lib/index.js:3:46)
    at Module._compile (internal/modules/cjs/loader.js:721:30)
TypeError: Cannot read property 'isRequired' of null
    at Object.<anonymous> (/Users/marcokaraula/repos/nextjs-examples/with-next-page-transitions/node_modules/next-page-transitions/lib/PageTransition.js:300:37)
    at Module._compile (internal/modules/cjs/loader.js:721:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:732:10)
    at Module.load (internal/modules/cjs/loader.js:620:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
    at Function.Module._load (internal/modules/cjs/loader.js:552:3)
    at Module.require (internal/modules/cjs/loader.js:657:17)
    at require (internal/modules/cjs/helpers.js:22:18)
    at Object.<anonymous> (/Users/marcokaraula/repos/nextjs-examples/with-next-page-transitions/node_modules/next-page-transitions/lib/index.js:3:46)
    at Module._compile (internal/modules/cjs/loader.js:721:30)

To Reproduce

1. npx create-next-app --example with-next-page-transitions with-next-page-transitions
2. cd with-next-page-transitions
3. npm install
4. npm run build
5. npm start

Additional context

I've found this Issue but I think its different because it was a problem during the build. for me the build works fine. Full output:

~/repos/nextjs-examples/with-next-page-transitions $ npm install && npm run build && npm start
npm WARN with-next-page-transitions@1.0.0 No repository field.

audited 6486 packages in 3.636s
found 0 vulnerabilities


> with-next-page-transitions@1.0.0 build /Users/marcokaraula/repos/nextjs-examples/with-next-page-transitions
> next build

[18:06:26] Compiling client
[18:06:26] Compiling server
[18:06:28] Compiled server in 1s
[18:06:31] Compiled client in 4s

> with-next-page-transitions@1.0.0 start /Users/marcokaraula/repos/nextjs-examples/with-next-page-transitions
> next start

> Ready on http://localhost:3000

[teleginzhenya]

Hello!
The problem is inside next-page-transitions lib.
You can change PageTranssition.js and edit line 250

PageTransition.propTypes = {
  children: PropTypes.node.isRequired,
  classNames: PropTypes.string.isRequired,
-  timeout: timeoutsShape.isRequired,
+  timeout: timeoutsShape,
  loadingComponent: PropTypes.element,
  loadingDelay: PropTypes.number,
  loadingCallbackName: PropTypes.string,
  /* eslint-disable react/require-default-props */
  loadingTimeout: (props, ...args) => {
    let pt = timeoutsShape
    if (props.loadingComponent) pt = pt.isRequired
    return pt(props, ...args)
  },
  loadingClassNames: (props, ...args) => {
    let pt = PropTypes.string
    if (props.loadingTimeout) pt = pt.isRequired
    return pt(props, ...args)
  },
  /* eslint-enable react/require-default-props */
  monkeyPatchScrolling: PropTypes.bool,
}

PageTransition.defaultProps = {
  loadingComponent: null,
  loadingCallbackName: 'pageTransitionReadyToEnter',
  loadingDelay: 500,
  monkeyPatchScrolling: false,
+  timeout: null
}

upd: I did a PR to the next-page-transitions

[mkaraula]

It works. Thank you! So this seems to be an Issue with next-page-transitions and not with the example. I will close this Issue then.

[AbraaoAlves]

The problem is a dep on next-page-transitions called next-page-transitions. Maybe this PR insert this problem.

You can fix it just by adding this code to your package.json:

  "resolutions": {
    "next-page-transitions/react-transition-group": "2.5.1"
  }

Or just wait for @teleginzhenya PR