<p dir="auto">When koa-router is wrapped by next, /graphiql become 404</p>

<ul dir="auto">
<li>[ x] I have searched the <a href="https://github.com/zeit/next.js/issues?q=is%3Aissue">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">/graphiql should not 404</p>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">/graphiql 404</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto">wrapped with next js, this code below will make /graphiql 404</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="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(() =&gt; {
    const server = new Koa();
    const router = new Router();

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

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

    const resolvers = {
      Query: {
        hello: () =&gt; '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) =&gt; {
      if (err) throw err;
      console.log('&gt; Ready on http://localhost:3000');
    });
  })
  .catch((ex) =&gt; {
    console.error(ex.stack);
    process.exit(1);
  });"><pre class="notranslate"><code class="notranslate">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(() =&gt; {
    const server = new Koa();
    const router = new Router();

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

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

    const resolvers = {
      Query: {
        hello: () =&gt; '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) =&gt; {
      if (err) throw err;
      console.log('&gt; Ready on http://localhost:3000');
    });
  })
  .catch((ex) =&gt; {
    console.error(ex.stack);
    process.exit(1);
  });
</code></pre></div>
<p dir="auto">but if we change the code like this, i can access <code class="notranslate">/graphiql</code></p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="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: () =&gt; '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) =&gt; {
  if (err) throw err;
  console.log('&gt; Ready on http://localhost:3000');
});"><pre class="notranslate"><code class="notranslate">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: () =&gt; '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) =&gt; {
  if (err) throw err;
  console.log('&gt; Ready on http://localhost:3000');
});
</code></pre></div>
<p dir="auto">response console</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content=" DONE  Compiled successfully in 2128ms                                                                                                                                        22:59:14

&gt; 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"><pre class="notranslate"><code class="notranslate"> DONE  Compiled successfully in 2128ms                                                                                                                                        22:59:14

&gt; 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
</code></pre></div>
<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>next</td>
<td>5.1.0</td>
</tr>
<tr>
<td>node</td>
<td>8.9.4</td>
</tr>
<tr>
<td>OS</td>
<td>ubuntu 17</td>
</tr>
<tr>
<td>browser</td>
<td>chrome</td>
</tr>
</tbody>
</table>
<p dir="auto">Here's my complete dependencies</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content=" &quot;dependencies&quot;: {
    &quot;apollo-server-koa&quot;: &quot;^1.3.4&quot;,
    &quot;bcrypt&quot;: &quot;^2.0.0&quot;,
    &quot;bluebird&quot;: &quot;^3.5.1&quot;,
    &quot;dotenv&quot;: &quot;^5.0.1&quot;,
    &quot;googleapis&quot;: &quot;^28.1.0&quot;,
    &quot;graphql&quot;: &quot;^0.13.2&quot;,
    &quot;graphql-tools&quot;: &quot;^2.24.0&quot;,
    &quot;isomorphic-unfetch&quot;: &quot;^2.0.0&quot;,
    &quot;koa&quot;: &quot;^2.5.0&quot;,
    &quot;koa-bodyparser&quot;: &quot;^4.2.0&quot;,
    &quot;koa-router&quot;: &quot;^7.4.0&quot;,
    &quot;lodash&quot;: &quot;^4.17.5&quot;,
    &quot;next&quot;: &quot;^5.1.0&quot;,
    &quot;pg&quot;: &quot;^7.4.1&quot;,
    &quot;pg-hstore&quot;: &quot;^2.3.2&quot;,
    &quot;react&quot;: &quot;^16.3.1&quot;,
    &quot;react-dom&quot;: &quot;^16.3.1&quot;,
    &quot;reactstrap&quot;: &quot;^5.0.0&quot;,
    &quot;sequelize&quot;: &quot;^4.37.6&quot;,
    &quot;styled-jsx&quot;: &quot;^2.2.6&quot;,
    &quot;xlsx&quot;: &quot;^0.12.8&quot;
  },"><pre class="notranslate"><code class="notranslate"> "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"
  },
</code></pre></div>
<h1 dir="auto">Bug report</h1>
<h2 dir="auto">Describe the bug</h2>
<p dir="auto">When you use react a component residing outside the main Next.js project folder which uses hooks. You end up getting <code class="notranslate">Invalid hook call</code> error and the application breaks. Components without hooks work as expected.</p>
<p dir="auto">The bug appears in all versions <code class="notranslate">&gt;9.0.5</code> when you change the webpack config so that files outside the main folder are transpiled. It’s working fine in <code class="notranslate">&lt;=9.0.5</code></p>
<h2 dir="auto">To Reproduce</h2>
<p dir="auto">Check out the repro at <a href="https://github.com/baldurh/next-9.0.6-bug-repro">https://github.com/baldurh/next-9.0.6-bug-repro</a></p>
<h2 dir="auto">Expected behavior</h2>
<p dir="auto">The code should not break when using files outside the project folder.</p>
<h2 dir="auto">System information</h2>
<ul dir="auto">
<li>OS: N/A</li>
<li>Browser: N/A</li>
<li>Version of Next.js: <code class="notranslate">&gt;=9.0.6</code></li>
</ul>
<h2 dir="auto">Additional context</h2>
<p dir="auto">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 <g-emoji class="g-emoji" alias="slightly_smiling_face" fallback-src="https://github.githubassets.com/images/icons/emoji/unicode/1f642.png">🙂</g-emoji></p>