elastic/next-eui-starter

Unable to compile to serverless target

Jakkc opened this issue · 10 comments

Jakkc commented

Hi,

When trying to compile to serverless I get the following errors:

(node:61067) UnhandledPromiseRejectionWarning: Error: TypeError: fn is not a function at /Users/Jack/Desktop/app/next.config.js:42:19 at handleExternals (/Users/Jack/Desktop/appnode_modules/webpack/lib/ExternalModuleFactoryPlugin.js:78:17) at next (/Users/Jack/Desktop/app/node_modules/webpack/lib/ExternalModuleFactoryPlugin.js:66:9) at handleExternals (/Users/Jack/Desktop/app/node_modules/webpack/lib/ExternalModuleFactoryPlugin.js:71:7) at /Users/Jack/Desktop/app/node_modules/webpack/lib/ExternalModuleFactoryPlugin.js:101:5 at /Users/Jack/Desktop/app/node_modules/webpack/lib/NormalModuleFactory.js:400:5 at AsyncSeriesWaterfallHook.eval [as callAsync] (eval at create (/Users/Jack/Desktop/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:16:1) at AsyncSeriesWaterfallHook.lazyCompileHook (/Users/Jack/Desktop/app/node_modules/tapable/lib/Hook.js:154:20) at NormalModuleFactory.create (/Users/Jack/Desktop/app/node_modules/webpack/lib/NormalModuleFactory.js:381:28) at /Users/Jack/Desktop/app/node_modules/webpack/lib/Compilation.js:1063:18 at Semaphore.acquire (/Users/Jack/Desktop/app/node_modules/webpack/lib/util/Semaphore.js:29:4) at Compilation._addModuleChain (/Users/Jack/Desktop/app/node_modules/webpack/lib/Compilation.js:1062:18) at Compilation.addEntry (/Users/Jack/Desktop/app/node_modules/webpack/lib/Compilation.js:1164:8) at /Users/Jack/Desktop/app/node_modules/webpack/lib/SingleEntryPlugin.js:46:17 at AsyncParallelHook.eval [as callAsync] (eval at create (/Users/Jack/Desktop/app/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:11:1) at AsyncParallelHook.lazyCompileHook (/Users/Jack/Desktop/app/node_modules/tapable/lib/Hook.js:154:20) (node:61067) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). To terminate the node process on unhandled promise rejection, use the CLI flag --unhandled-rejections=strict (see https://nodejs.org/api/cli.html#cli_unhandled_rejections_mode). (rejection id: 1) (node:61067) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

I am unable to provide any more context, sorry!

pugnascotia commented

Can you share a bit more about what you're trying to do when you say "compile to serverless"? Have you made any changes to the project?

Jakkc commented

@pugnascotia when I say compile to serverless I mean in next.config.js I am setting target: serverless. This error occurs when running the next build command.

I have not built my project directly from this boilerplate, however I have copied across all the relevant polyfills for elastic-ui from this repo, and that allows me to compile to target: server (the default next compilation target).

Please let me know anything more specific you require. Happy to provide more detail if necessary, I just don't have the node knowledge to intuitvely understand whats going on!

pugnascotia commented

Hmm, so I was able to replicate and fix the reported problem in commit 2031d9c. However, that leads to a further problem, which appears to be something to do with the styled-jsx module and the lack of a document global on the server side. I'll continue looking when I get a chance, but it seems a bit obscure 😕

  • 👍5
Jakkc commented

Thank you for your speedy response @pugnascotia . I will use the default next compilation target for now but I look forward to using elastic in serverless mode in the future!

pugnascotia commented

So if I:

  1. Start a new app as per the docs, with 
    npm init next-app nextjs-blog --example "https://github.com/vercel/next-learn-starter/tree/master/learn-starter
  2. Change it to serverless mode
  3. yarn build

Then it works OK, and styled-jsx is still in there. Which is odd.

Jakkc commented

Is this with elastic-ui included as well? When I try to compile to serverless target with the hotfix in your previous post, I end up with the same ReferenceError: document is not defined error you reported.

pugnascotia commented

No, I was just trying to work out whether the problem exists in Next.js without EUI, or whether it is actually my problem 😁

Jakkc commented

Aha I see! Well I have been successfully deploying a next serverless build for the past few months. It is only now after adding in elastic-ui that I am unable to compile to serverless. Fine for now, I can revert to the default next target but it would be awesome to have elastic-ui and serverless working together in the future.

Good luck with your search! 😄

  • 👍1
pugnascotia commented

Ah...well, the good news is that I know what the problem is now. In:

node_modules/styled-jsx/dist/lib/stylesheet.js

...there's a check for whether window is defined, before going on to reference document. Because the Next starter adds a window shim, that makes it explode. I don't know why this only happens in serverless mode though.

pugnascotia commented

OK, #8 should have fixed this. Let us know how you get on.