Nextjs The destructuring of a useRouter hook does not work

[rivaslive]

Bug report

Hook useRouter next/router error @keystonejs/app-next 6.1.0

Describe the bug

The error is simple I am using @keystonejs/app-next 6.1.0 and when I try to unstructured useRouter in pages or anywhere else it fails with the following message

if I change the dev command in package.json to cross-env NODE_ENV=development next ./app dev works fine, but when run from keystone instance it fails.

could someone know what's going on?

To Reproduce

Steps to reproduce the behaviour. Please provide code snippets or a repository:

1. create keystone with auth project
2. create next app npx create-next-app // name: app
3. Config index.js
4. See error

my index.js

const { NextApp } = require('@keystonejs/app-next');
const { Keystone } = require('@keystonejs/keystone');
const { PasswordAuthStrategy } = require('@keystonejs/auth-password');
const { Text, Checkbox, Password } = require('@keystonejs/fields');
const { GraphQLApp } = require('@keystonejs/app-graphql');
const { AdminUIApp } = require('@keystonejs/app-admin-ui');
const initialiseData = require('./initial-data');

const { MongooseAdapter: Adapter } = require('@keystonejs/adapter-mongoose');
const PROJECT_NAME = 'example';
const adapterConfig = { mongoUri: 'mongodb://localhost/example' };
const { distDir } = require('./config');

const keystone = new Keystone({
  adapter: new Adapter(adapterConfig),
  onConnect: process.env.CREATE_TABLES !== 'true' && initialiseData,
});

// Access control functions
const userIsAdmin = ({ authentication: { item: user } }) => Boolean(user && user.isAdmin);
const userOwnsItem = ({ authentication: { item: user } }) => {
  if (!user) {
    return false;
  }

  // Instead of a boolean, you can return a GraphQL query:
  // https://www.keystonejs.com/api/access-control#graphqlwhere
  return { id: user.id };
};

const userIsAdminOrOwner = auth => {
  const isAdmin = access.userIsAdmin(auth);
  const isOwner = access.userOwnsItem(auth);
  return isAdmin ? isAdmin : isOwner;
};

const access = { userIsAdmin, userOwnsItem, userIsAdminOrOwner };

keystone.createList('User', {
  fields: {
    name: { type: Text },
    email: {
      type: Text,
      isUnique: true,
    },
    isAdmin: {
      type: Checkbox,
      // Field-level access controls
      // Here, we set more restrictive field access so a non-admin cannot make themselves admin.
      access: {
        update: access.userIsAdmin,
      },
    },
    password: {
      type: Password,
    },
  },
  // List-level access controls
  access: {
    read: access.userIsAdminOrOwner,
    update: access.userIsAdminOrOwner,
    create: access.userIsAdmin,
    delete: access.userIsAdmin,
    auth: true,
  },
});

const authStrategy = keystone.createAuthStrategy({
  type: PasswordAuthStrategy,
  list: 'User',
  config: { protectIdentities: process.env.NODE_ENV === 'production' },
});

module.exports = {
  keystone,
  apps: [
    new GraphQLApp(),
    new AdminUIApp({
      name: PROJECT_NAME,
      authStrategy,
    }),
    new NextApp({ dir: 'app' }),
  ],
  distDir
};

Screenshots

exact line where it fails using keystonejs

System information

• OS: Windows
• @keystonejs/adapter-mongoose": "^11.1.0",
• @keystonejs/app-admin-ui": "^7.4.1",
• @keystonejs/app-graphql": "^6.2.2",
• @keystonejs/app-next": "^6.1.0",
• @keystonejs/auth-password": "^6.0.2",
• @keystonejs/fields": "^22.0.1",
• @keystonejs/keystone": "^19.2.1",
• cross-env": "^7.0.3",
• next": "10.0.9",
• react": "17.0.2",
• react-dom: "17.0.2"