Next.js: Serverless API routes not working

[ecwyne]

Working in development, but when deploying to now every api route has the following error in the logs.

TypeError: require is not a function
    at Object.+nUH (/var/task/page.js:12162:14)
    at __webpack_require__ (/var/task/page.js:23:31)
    at Object.ubcj (/var/task/page.js:432129:20)
    at __webpack_require__ (/var/task/page.js:23:31)
    at Object.ug46 (/var/task/page.js:432406:20)
    at __webpack_require__ (/var/task/page.js:23:31)
    at Object.1XFb (/var/task/page.js:27759:15)
    at __webpack_require__ (/var/task/page.js:23:31)
    at Object.qEY2 (/var/task/page.js:410688:11)
    at __webpack_require__ (/var/task/page.js:23:31)

[Timer]

Hi @ecwyne, can you please try next@canary?

[ecwyne]

I am using "next": "^9.0.1-canary.1"

next dev 👍
next build && next start 👎
@now/next (running in zeit/now) 👎

[cj]

I've run into an issue with the API routes too (let me know if you want me to open a new ticket if it's not related). I have a file pages/api/pages/index, using next or now dev locally the URL /api/pages/index works just fine, but deployed to now /api/pages/index gives a 404 and this error in the console:

START RequestId: a21f4827-7f66-4b71-8b18-56d03d03a73a Version: $LATEST
2019-07-11T01:05:47.957Z    a21f4827-7f66-4b71-8b18-56d03d03a73a    ERROR   { FetchError: invalid json response body at https://hulsa-cj.hulsa.now.sh/api/pages/index reason: Unexpected token < in JSON at position 0
    at /var/task/page.js:21277:32
    at process._tickCallback (internal/process/next_tick.js:68:7)
  message:
   'invalid json response body at https://hulsa-cj.hulsa.now.sh/api/pages/index reason: Unexpected token < in JSON at position 0',
  type: 'invalid-json' }
2019-07-11T01:05:47.958Z    a21f4827-7f66-4b71-8b18-56d03d03a73a    ERROR   TypeError: Cannot read property 'experimentalPrerender' of undefined
    at renderToHTML (/var/task/page.js:10728:43)
    at process._tickCallback (internal/process/next_tick.js:68:7)
END RequestId: a21f4827-7f66-4b71-8b18-56d03d03a73a
REPORT RequestId: a21f4827-7f66-4b71-8b18-56d03d03a73a  

/api/pages however, works just fine

[huv1k]

Hey @ecwyne, could you provide better reproduction? So we can test it and fix it? Thx in advance

[ecwyne]

@huv1k creating a minimum reproduction this morning I discovered that the issue first arises when I add https://github.com/fauna/faunadb-js and target: 'serverless'. Works perfectly when target: 'server'.

I'm happy to open an issue with them if it's an issue on their end. It appears it's an issue because they're using require (which seems totally normal to me). They have a browserify step, but I don't think it's used when importing from npm

[Timer]

Having the reproduction would still be immensely helpful @ecwyne!

[ecwyne]

https://github.com/ecwyne/nextjs-issue-7888

[ecwyne]

@Timer @huv1k error logs point to https://github.com/ecwyne/nextjs-issue-7888/blob/master/www/.next/serverless/pages/api/hello.js#L101 (Line 101)

TypeError: require is not a function
    at Object.+nUH (/var/task/page.js:101:14)
    at __webpack_require__ (/var/task/page.js:23:31)
    at Object.ubcj (/var/task/page.js:16498:20)
    at __webpack_require__ (/var/task/page.js:23:31)
    at Object.ug46 (/var/task/page.js:16516:20)
    at __webpack_require__ (/var/task/page.js:23:31)
    at Object.1XFb (/var/task/page.js:1477:15)
    at __webpack_require__ (/var/task/page.js:23:31)
    at Object.qEY2 (/var/task/page.js:15833:11)
    at __webpack_require__ (/var/task/page.js:23:31)

[ecwyne]

Found this https://github.com/fauna/faunadb-js/issues/133

Which led me to https://github.com/felixge/node-formidable/issues/337

And the suggested solution of https://github.com/felixge/node-formidable/issues/337#issuecomment-153408479

plugins: [
     new webpack.DefinePlugin({ "global.GENTLY": false })
],

[ecwyne]

Confirmed, updating my next.config.js to the following worked (for me).

const webpack = require('webpack');

module.exports = {
    target: 'serverless',
    webpack: config => {
        config.plugins.push(
            new webpack.DefinePlugin({ 'global.GENTLY': false }),
        );
        return config;
    },
};

[Timer]

I guess we can close this then -- it's very unfortunate that formidable is unmaintained and incompatible with the Babel/Webpack ecosystem. 😞

Can you open an issue with faundadb to move to something that's maintained?

[Timer]

Actually, it probably doesn't hurt for us to define this. PR incoming.

[ecwyne]

Thanks so much @Timer! Everything in Next v9 is INCREDIBLE!

[Timer]

Thank you for the awesome detective work @ecwyne!