Issue 1:
When koa-router is wrapped by next, /graphiql become 404

[ x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

/graphiql should not 404

Current Behavior

/graphiql 404

Steps to Reproduce (for bugs)

wrapped with next js, this code below will make /graphiql 404

const Koa = require('koa');
const Router = require('koa-router');
const koaBody = require('koa-bodyparser');
const next = require('next');
const { graphqlKoa, graphiqlKoa } = require('apollo-server-koa');
const { makeExecutableSchema } = require('graphql-tools');

const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

app.prepare()
.then(() => {
const server = new Koa();
const router = new Router();

router.get('*', async (ctx) => {
await handle(ctx.req, ctx.res);
});

const typeDefs = `
type Query {
hello: String
}
`;

const resolvers = {
Query: {
hello: () => 'Hello world!',
},
};

// Put together a schema
const schema = makeExecutableSchema({
typeDefs,
resolvers,
});

router.post('/graphql', koaBody(), graphqlKoa({ schema }));
router.get('/graphql', graphqlKoa({ schema }));

router.get('/graphiql', graphiqlKoa({ endpointURL: '/graphql' }));

server.use(router.routes());
server.use(router.allowedMethods());

server.listen(3000, (err) => {
if (err) throw err;
console.log('> Ready on http://localhost:3000');
});
})
.catch((ex) => {
console.error(ex.stack);
process.exit(1);
});

but if we change the code like this, i can access /graphiql

const Koa = require('koa');
const Router = require('koa-router');
const koaBody = require('koa-bodyparser');

const { graphqlKoa, graphiqlKoa } = require('apollo-server-koa');
const { makeExecutableSchema } = require('graphql-tools');

const app = new Koa();
const router = new Router();
const PORT = 3000;

const typeDefs = `
type Query {
hello: String
}
`;

const resolvers = {
Query: {
hello: () => 'Hello world!',
},
};

const myGraphQLSchema = makeExecutableSchema({
typeDefs,
resolvers,
});

// koaBody is needed just for POST.
router.post('/graphql', koaBody(), graphqlKoa({ schema: myGraphQLSchema }));
router.get('/graphql', graphqlKoa({ schema: myGraphQLSchema }));

router.get('/graphiql', graphiqlKoa({ endpointURL: '/graphql' }));

app.use(router.routes());
app.use(router.allowedMethods());
app.listen(3000, (err) => {
if (err) throw err;
console.log('> Ready on http://localhost:3000');
});

response console

DONE Compiled successfully in 2128ms 22:59:14

> Ready on http://localhost:3000
Client pings, but there's no entry for page: /graphiql
Client pings, but there's no entry for page: /graphiql
Client pings, but there's no entry for page: /graphiql
Client pings, but there's no entry for page: /graphiql
Client pings, but there's no entry for page: /graphiql
Client pings, but there's no entry for page: /graphiql
Client pings, but there's no entry for page: /graphiql
Client pings, but there's no entry for page: /graphiql

Your Environment

Tech
Version

next
5.1.0

node
8.9.4

OS
ubuntu 17

browser
chrome

Here's my complete dependencies

"dependencies": {
"apollo-server-koa": "^1.3.4",
"bcrypt": "^2.0.0",
"bluebird": "^3.5.1",
"dotenv": "^5.0.1",
"googleapis": "^28.1.0",
"graphql": "^0.13.2",
"graphql-tools": "^2.24.0",
"isomorphic-unfetch": "^2.0.0",
"koa": "^2.5.0",
"koa-bodyparser": "^4.2.0",
"koa-router": "^7.4.0",
"lodash": "^4.17.5",
"next": "^5.1.0",
"pg": "^7.4.1",
"pg-hstore": "^2.3.2",
"react": "^16.3.1",
"react-dom": "^16.3.1",
"reactstrap": "^5.0.0",
"sequelize": "^4.37.6",
"styled-jsx": "^2.2.6",
"xlsx": "^0.12.8"
},

Issue 2:
Bug report

Describe the bug

When you use react a component residing outside the main Next.js project folder which uses hooks. You end up getting Invalid hook call error and the application breaks. Components without hooks work as expected.

The bug appears in all versions >9.0.5 when you change the webpack config so that files outside the main folder are transpiled. It’s working fine in <=9.0.5

To Reproduce

Check out the repro at https://github.com/baldurh/next-9.0.6-bug-repro

Expected behavior

The code should not break when using files outside the project folder.

System information

OS: N/A

Browser: N/A

Version of Next.js: >=9.0.6

Additional context

I know this is probably not a common use of Next.js but in our project we’re using a monorepo and have a shared folder with components used by multiple applications. It would be nice to get this working again. If someone finds an alternative config we could use I’d also be happy to do that 🙂