2.0.0-beta.78 - Next target set to serverless causes [...next-auth] to fail

[Mattsull01]

Hey all,

I'm somewhat new to Next and Next-Auth, so I apologize if I'm doing something wrong, or missed something in documentation, but I've done my best to work through this a few times and can't seem to find anything wrong with my setup. I've also started looking at how Next creates the .next app, but its a lot to take in.

Describe the bug
When Next is set to the serverless target in next.config.js, next-auth throws 'no such file or directory, open '/css/index.css''

This issue DOES NOT appear when target: "serverless" is removed.

To Reproduce

1. Setup basic Next App (next@9.4.4)
2. Set next.config.js target: "serverless"
3. Setup next-auth / your provider(s), etc. next-auth@2.0.0-beta.78
4. Build Next (I used yarn)
5. Start Next

https://github.com/Mattsull01/next-test

Screenshots or error logs
Error: ENOENT: no such file or directory, open '/css/index.css'
at Object.openSync (fs.js:461:3)
at Object.readFileSync (fs.js:364:35)
at Object. (/Users/matt/Code/next-test/.next/serverless/pages/api/auth/[...nextauth].js:176015:1339)
at Object.zgXW (/Users/matt/Code/next-test/.next/serverless/pages/api/auth/[...nextauth].js:176016:30)
at webpack_require (/Users/matt/Code/next-test/.next/serverless/pages/api/auth/[...nextauth].js:23:31)
at Object.tD0P (/Users/matt/Code/next-test/.next/serverless/pages/api/auth/[...nextauth].js:153125:832)
at webpack_require (/Users/matt/Code/next-test/.next/serverless/pages/api/auth/[...nextauth].js:23:31)
at Object.vwd5 (/Users/matt/Code/next-test/.next/serverless/pages/api/auth/[...nextauth].js:165619:18)
at webpack_require (/Users/matt/Code/next-test/.next/serverless/pages/api/auth/[...nextauth].js:23:31)
at Module.mQn/ (/Users/matt/Code/next-test/.next/serverless/pages/api/auth/[...nextauth].js:128628:67) {
errno: -2,
syscall: 'open',
code: 'ENOENT',
path: '/css/index.css'
}

[iaincollins]

Thanks for the detailed bug report!

This is an issue with Next.js I've run into myself using node modules and it's frustrating.

I actually didn't realise it was still an unresolved issue.

I think these are some relevant bug reports; I think some of them may have workarounds:

• Next.js API routes (and pages) should support reading files vercel/next.js#8251
• Fix for __dirname vercel/next.js#8334

I think the issue is Next.js doesn't detect when a file that is not loaded using require/import, so files loaded using readFile(), such as text files, CSS files, etc in this way fails because they don't get included in the bundle that gets deployed.

For some reason it isn't always a problem for Next.js apps deployed on Vercel, I don't understand why though.

In the case of NextAuth.js, it is triggered when the built-in pages try to load the small CSS file used to style them, this file is processed with PostCSS at build time when the module is published, so is pre-minified, etc, and using readFileSync() to load it is the easiest way to load a "compiled" CSS file without PostCSS needing to be a run-time dependancy.

It's technically simple for us to work around; we could just included the built CSS into a file like css.js and require('./css.js') on that file instead, which work work, as files loaded that way are fine.

This is slightly awkward as it means we can't as easily use PostCSS to automatically process the output for us at build time, at least without doing a bit work of work on the build process, so I'll leave this open in case anyone who is familiar with this issue, or who wants to dig into it, is able to suggest an alternative approach we could take.

[iaincollins]

This should be resolved now.

I wrote a hacky build script in #297 to wrap the CSS in a JavaScript function as part of the build process, as I couldn't find a good plugin for PostCSS to do this automatically.

Only a limited amount of CSS is used in NextAuth.js - for the built in pages - so I don't think this approach will give us too much trouble to maintain in future, even if it is a bit hacky.

Would love feedback on if this resolved the issue as anticipated.

[Mattsull01]

@iaincollins Thanks so much! I'll test it and get back to you with in the next day or so.

~ Matt

[Mattsull01]

@iaincollins It solved the issue! Thanks again!

[iaincollins]

Hey @Mattsull01 I ran into this today and I think it answers why this wasn't an issue on Vercel.

vercel/next.js#11861

It seems they are using target: "experimental-serverless-trace" under the hod on Vercel (instead of serverless).

From what I can gather it relies on their own builder, and can be used locally but not sure about being used elsewhere (e.g. to build and run on AWS Lambda). I guess it depends on how the package is built.

It's POSSIBLE we might revert this behaviour in future to make our lives easier, but only if setting "experimental-serverless-trace" actually works for people. If you are still using NextAuth.js down the line interested and able to help test a beta release some time (it should be a simple swap with npm i next-auth@beta) please let us know! :-)

[Mattsull01]

Hey @iaincollins I’m happy to help, let me know when. Matt

…

On Fri, Jun 26, 2020 at 5:14 PM Iain Collins ***@***.***> wrote: Hey @Mattsull01 <https://github.com/Mattsull01> I ran into this today and *I think* it answers why this wasn't an issue on Vercel. vercel/next.js#11861 <vercel/next.js#11861> It seems they are using target: "experimental-serverless-trace" under the hod on Vercel (instead of serverless). From what I can gather it relies on their own builder, and can be used locally but not sure about being used elsewhere (e.g. to build and run on AWS Lambda). I guess it depends on how the package is built. It's POSSIBLE we might revert this behaviour in future to make our lives easier, but only if setting "experimental-serverless-trace" actually works for people. If you are still using NextAuth.js down the line interested and able to help test a beta release some time (it should be a simple swap with npm i ***@***.***) please let us know! :-) — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#281 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AFZ6ZW2KJ42UF26B3NIZMJ3RYU2WJANCNFSM4OBTOONQ> .