Netlify error

[Gyurmatag]

Environment

• Operating System: Darwin
• Node Version: v16.14.0
• Nuxt Version: 3.0.0-rc.6-27668034.5232c1b
• Package Manager: [email protected]
• Builder: vite
• User Config: buildModules, modules, intlify, css, colorMode, build, publicRuntimeConfig, meta
• Runtime Modules: @nuxtjs/[email protected]
• Build Modules: @intlify/[email protected], @pinia/[email protected]

Reproduction

https://www.evgyuru.hu/ https://answers.netlify.com/t/this-function-has-crashed-but-i-have-no-netlify-functions/72053/9?u=gyurmatag

Describe the bug

I have a Nuxt site deployed to Netlify but for over 2 weeks the site can't be reached because it says the following:

Here is my site live, so you can see it in action: https://www.evgyuru.hu/ Also somebody from Netlify said that is a bug in Nuxt: https://answers.netlify.com/t/this-function-has-crashed-but-i-have-no-netlify-functions/72053/9?u=gyurmatag I provided the complete logs for this error.

Additional context

No response

Logs

Aug 10, 09:11:29 PM: 93e58501 ERROR  [h3] [unhandled] H3Error: Directory import '/var/task/node_modules/date-fns/fp' is not supported resolving ES modules imported from /var/task/chunks/app/server.mjs
Did you mean to import date-fns/fp/index.js?
    at createError (file:///var/task/node_modules/h3/dist/index.mjs:238:15)
    at nodeHandler (file:///var/task/node_modules/h3/dist/index.mjs:428:21)
    at async ufetch (file:///var/task/node_modules/unenv/runtime/fetch/index.mjs:9:17)
    at async $fetchRaw2 (file:///var/task/node_modules/ohmyfetch/dist/chunks/fetch.mjs:131:20)
    at async Object.errorhandler [as onError] (file:///var/task/chunks/nitro/aws-lambda.mjs:319:16)
    at async nodeHandler (file:///var/task/node_modules/h3/dist/index.mjs:436:9)
    at async ufetch (file:///var/task/node_modules/unenv/runtime/fetch/index.mjs:9:17)
    at async $fetchRaw2 (file:///var/task/node_modules/ohmyfetch/dist/chunks/fetch.mjs:131:20)
    at async Object.errorhandler [as onError] (file:///var/task/chunks/nitro/aws-lambda.mjs:319:16)
    at async nodeHandler (file:///var/task/node_modules/h3/dist/index.mjs:436:9) {
  statusCode: 500,
  fatal: false,
  unhandled: true,
  statusMessage: 'Internal Server Error'
}

[danielroe]

@Gyurmatag Have you tried changing the import as the error message suggests?

Would you provide a minimal reproduction? 🙏

[itzaks]

Crashing here as well. Also timing out, seems to be remote async data that doesn't load properly when building on netlify. Happens both on Netlify and Vercel.

Here's an error that I get from the asyncData-call if it helps:

TypeError: Cannot read properties of undefined (reading 'filter')
    at extractOperationName (file:///var/task/chunks/app/server.mjs:101596:54)
    at resolveRequestDocument (file:///var/task/chunks/app/server.mjs:101605:25)
    at Proxy.<anonymous> (file:///var/task/chunks/app/server.mjs:101416:20)
    at step (file:///var/task/chunks/app/server.mjs:101259:21)
    at Object.next (file:///var/task/chunks/app/server.mjs:101206:16)
    at file:///var/task/chunks/app/server.mjs:101192:69
    at new Promise (<anonymous>)
    at __awaiter2 (file:///var/task/chunks/app/server.mjs:101174:12)
    at Proxy.GraphQLClient2.request (file:///var/task/chunks/app/server.mjs:101405:14)
    at file:///var/task/chunks/app/server.mjs:101870:60

Possible workaround for now for me was to lock to rc-4. This solved the issue. Didn't check with rc-5 though.

yarn.lock

  "resolutions": {
    "nuxt": "3.0.0-rc.4",
    "nuxi": "3.0.0-rc.4",
    "@nuxt/vite-builder": "3.0.0-rc.4",
    "@nuxt/kit": "3.0.0-rc.4",
    "@nuxt/schema": "3.0.0-rc.4"
  }

[danielroe]

Please check whether the edge channel resolves things for you, and if not, please do provide a minimal reproduction. 🙏

[itzaks]

Please check whether the edge channel resolves things for you, and if not, please do provide a minimal reproduction. 🙏

Edge seems to solve the problem above. But introduces a new error.

[Debug] [vite] connected. (client, line 268)
[Error] SyntaxError: Importing binding name 'GraphQLClient' is not found.
	link
	linkAndEvaluateModule

Locking to rc-4 works though.

[Gyurmatag]

@Gyurmatag Have you tried changing the import as the error message suggests?

Would you provide a minimal reproduction? 🙏

@danielroe I am on the edge channel, so the latest version of nuxt and the problem still persist. I can't provide a reproduction because the error is on Netlify only, on my machine it works fine. What should I do? Because my site is offline and it's very annoying...

[danielroe]

You can provide a minimal repository that doesn't work when deployed.

[mwohlan]

Can confirm the issue with netlify even with rc7. Gonna wait a bit for op to post a reproduction first.

[Mokkapps]

I have the same problem with rc7 and rc8 (also edge). I saw this error in the Netlify logs of my function:

Aug 12, 04:11:04 PM: 703edbc4 ERROR  [nuxt] [request error] [unhandled] [500] Named export 'w3cwebsocket' not found. The requested module 'websocket' is a CommonJS module, which may not support all module.exports as named exports.
Aug 12, 04:11:04 PM: 703edbc4 ERROR  CommonJS modules can always be imported via the default export, for example using:
Aug 12, 04:11:04 PM: 703edbc4 ERROR  import pkg from 'websocket';
Aug 12, 04:11:04 PM: 703edbc4 ERROR  const { w3cwebsocket } = pkg;
Aug 12, 04:11:04 PM: 703edbc4 ERROR    at ModuleJob._instantiate (node:internal/modules/esm/module_job:128:21)  
Aug 12, 04:11:04 PM: 703edbc4 ERROR    at async ModuleJob.run (node:internal/modules/esm/module_job:194:5)  
Aug 12, 04:11:04 PM: 703edbc4 ERROR    at async Promise.all (index 0)  
Aug 12, 04:11:04 PM: 703edbc4 ERROR    at async ESMLoader.import (node:internal/modules/esm/loader:385:24)  
Aug 12, 04:11:04 PM: 703edbc4 ERROR    at async ./chunks/handlers/renderer.mjs:11089:24  
Aug 12, 04:11:04 PM: 703edbc4 ERROR    at async ./chunks/handlers/renderer.mjs:11143:64  
Aug 12, 04:11:04 PM: 703edbc4 ERROR    at async ./chunks/handlers/renderer.mjs:14:22  
Aug 12, 04:11:04 PM: 703edbc4 ERROR    at async ./node_modules/h3/dist/index.mjs:492:19  
Aug 12, 04:11:04 PM: 703edbc4 ERROR    at async nodeHandler (./node_modules/h3/dist/index.mjs:438:7)  
Aug 12, 04:11:04 PM: 703edbc4 ERROR    at async handler2 (./chunks/nitro/aws-lambda.mjs:4182:13)

[mwohlan]

I have the same problem with rc7 and rc8 (also edge). I saw this error in the Netlify logs of my function:

Aug 12, 04:11:04 PM: 703edbc4 ERROR  [nuxt] [request error] [unhandled] [500] Named export 'w3cwebsocket' not found. The requested module 'websocket' is a CommonJS module, which may not support all module.exports as named exports.
Aug 12, 04:11:04 PM: 703edbc4 ERROR  CommonJS modules can always be imported via the default export, for example using:
Aug 12, 04:11:04 PM: 703edbc4 ERROR  import pkg from 'websocket';
Aug 12, 04:11:04 PM: 703edbc4 ERROR  const { w3cwebsocket } = pkg;
Aug 12, 04:11:04 PM: 703edbc4 ERROR    at ModuleJob._instantiate (node:internal/modules/esm/module_job:128:21)  
Aug 12, 04:11:04 PM: 703edbc4 ERROR    at async ModuleJob.run (node:internal/modules/esm/module_job:194:5)  
Aug 12, 04:11:04 PM: 703edbc4 ERROR    at async Promise.all (index 0)  
Aug 12, 04:11:04 PM: 703edbc4 ERROR    at async ESMLoader.import (node:internal/modules/esm/loader:385:24)  
Aug 12, 04:11:04 PM: 703edbc4 ERROR    at async ./chunks/handlers/renderer.mjs:11089:24  
Aug 12, 04:11:04 PM: 703edbc4 ERROR    at async ./chunks/handlers/renderer.mjs:11143:64  
Aug 12, 04:11:04 PM: 703edbc4 ERROR    at async ./chunks/handlers/renderer.mjs:14:22  
Aug 12, 04:11:04 PM: 703edbc4 ERROR    at async ./node_modules/h3/dist/index.mjs:492:19  
Aug 12, 04:11:04 PM: 703edbc4 ERROR    at async nodeHandler (./node_modules/h3/dist/index.mjs:438:7)  
Aug 12, 04:11:04 PM: 703edbc4 ERROR    at async handler2 (./chunks/nitro/aws-lambda.mjs:4182:13)

Getting the same error

[geyermichael]

Get a quite similar error on build and run node .output/server/index.mjs on local machine. After open http://0.0.0.0:3000 following error message runs in a loop till FATAL ERROR: Reached heap limit Allocation failed - JavaScript heap out of memory

[nuxt] [request error] [unhandled] [500] Named export 'w3cwebsocket' not found. The requested module 'websocket' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from 'websocket';
const { w3cwebsocket } = pkg;

  at ModuleJob._instantiate (node:internal/modules/esm/module_job:128:21)  
  at async ModuleJob.run (node:internal/modules/esm/module_job:194:5)  
  at async Promise.all (index 0)  
  at async ESMLoader.import (node:internal/modules/esm/loader:385:24)  
  at async ./.output/server/chunks/handlers/renderer.mjs:11096:24  
  at async ./.output/server/chunks/handlers/renderer.mjs:11150:64  
  at async ./.output/server/chunks/handlers/renderer.mjs:14:22  
  at async ./.output/server/node_modules/h3/dist/index.mjs:492:19  
  at async Server.nodeHandler (./.output/server/node_modules/h3/dist/index.mjs:438:7)

My Nuxt project info:

• Operating System: Darwin
• Node Version: v16.16.0
• Nuxt Version: 3.0.0-rc.8
• Package Manager: [email protected]
• Builder: vite
• User Config: modules, runtimeConfig
• Runtime Modules: @nuxtjs/[email protected], @nuxtjs/[email protected], @pinia/[email protected], @vueuse/[email protected]
• Build Modules: -

[Gyurmatag]

@danielroe Finally I got a reproduction sorry for the late reply, but here it is: https://bitbucket.org/gyurmaland/nuxt-app/src/ This is not working when deployed to Netlify. Can you please fix this very annoying problem?

[jonnyparris]

this is also happening for Cloudflare Pages, and I can reproduce locally both with official release and on edge channel

[danielroe]

cc: @pi0

[pi0]

Hi, @Gyurmatag quickly checking your reproduction, it seems date-fns (used by vue3-date-picker) has externalization issues. I've saw similar issue couple of times seems a regression but in the meantime, you can use this as workaround and fix:

import { defineNuxtConfig } from 'nuxt'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  nitro: {
    externals: {
      inline: ['date-fns']
    }
  }
})

Other issues for w3cwebsocket might be solved with similar workaround but reproduction would be nice 🙏🏼

@jonnyparris Can you please provide a reproduction for cloudflare? Are are using nuxt generate or custom nitro preset?

[jonnyparris]

@pi0 repro here: https://github.com/jonnyparris/bug-repro-nuxt3; using nuxt generate; no date-fns

[pi0]

Thanks for repro @jonnyparris. I've made an upstream issue in @nuxtjs/supabase module with a similar quick fix (add websocket to build.transpile) for w3cwebsocket issue.

[Gyurmatag]

@pi0 Thank you for the quick workaround. It works now. Waiting for the final fix!

[pi0]

Happy hearing it fixed. To be honest it is tricky to fix all CommonJS-related issues. Nuxt 3 is fully ESM native and neither date-fns (tracker issue: https://github.com/date-fns/date-fns/issues/1781) and vue3-date-picker are ESM friendly.

We made an extensive compatibility framework within Nitro and unenv for such libraries but unfortunately they will get broken from time to time. More info in docs

Anyway, I will try to see if we can make an improvement in nitro to fix this issue out of the box.

[Mokkapps]

Thanks @pi0, the following workaround works for the deployed version:

  build: {
    transpile: ['websocket']
  }

But if I try to start it locally with nuxi dev then I receive this error:

[nuxt] [request error] [unhandled] [500] require is not defined in ES module scope, you can use import instead
  at $id_sEPSfxeQ04 (./.nuxt/dist/server/server.mjs:39984:1)  
  at __instantiateModule__ (./.nuxt/dist/server/server.mjs:56642:9)  
  at __ssrLoadModule__ (./.nuxt/dist/server/server.mjs:56580:25)  
  at ssrImport (./.nuxt/dist/server/server.mjs:56605:13)  
  at $id_976n4XWvUA (./.nuxt/dist/server/server.mjs:39623:37)  
  at __instantiateModule__ (./.nuxt/dist/server/server.mjs:56642:9)  
  at __ssrLoadModule__ (./.nuxt/dist/server/server.mjs:56580:25)  
  at ssrImport (./.nuxt/dist/server/server.mjs:56605:13)  
  at $id_gZLsYJZ6jg (./.nuxt/dist/server/server.mjs:39359:37)  
  at async __instantiateModule__ (./.nuxt/dist/server/server.mjs:56642:3)

Any idea how to fix this?

[mattmaribojoc]

@Mokkapps I fixed it by adding conditional logic transpile based on env

build: {
    transpile: [process.env.NODE_ENV === 'production' ? 'websocket' : ''],
}

[Mokkapps]

@Mokkapps I fixed it by adding conditional logic transpile based on env

build: {
    transpile: [process.env.NODE_ENV === 'production' ? 'websocket' : ''],
}

Perfect, that works! Thanks @matthewmaribojoc!

[larbish]

Concerning this error with websocket when using the supabase module: it should be fixed in v0.1.23 of the supabase module.

[danielroe]

Let's track the more general issue in https://github.com/nuxt/framework/issues/7206.

[ozgurkisa]

build: {
    transpile: [process.env.NODE_ENV === 'production' ? 'websocket' : ''],
}

Resolved my problem this:

build: { transpile: [process.env.NODE_ENV === 'production' ? 'date-fns' : ''], }