[Bug]: ESM not supported with Netlify functions?

[FabienMotte]

Steps to reproduce

Hello!

I've an error in the Netlify function ___netlify-handler complaining about exports not being defined for a node module.
Looks like Netlify functions are using a Node.js version that don't supports ESM, am I right?
Starting with Next.js 12, ESM are supported out of the box, am I missing something?

Thank you!

A link to a reproduction repository

algolia/pwa-ecom-ui-template#33

More information about your build

• I am building using the CLI
• I am building using file-based configuration (netlify.toml)

What OS are you using?

Mac OS

Your netlify.toml file

[build]
  command = "npm run build"
  publish = ".next" 

[[plugins]]
  package = "@netlify/plugin-nextjs"

[[plugins]]
  package = "@netlify/plugin-lighthouse"

  [plugins.inputs]
    output_path = "reports/lighthouse.html"

  [[plugins.inputs.audits]]
    path = "./"

Relevant log output (or link to your logs)

6:19:59 PM f3a6a33f ERROR  ReferenceError: exports is not defined
    at file:///var/task/node_modules/@algolia/react-instantsearch-widget-loadmore-with-progressbar/dist/index.es.js:24:10
    at ModuleJob.run (internal/modules/esm/module_job.js:145:37)
    at async Loader.import (internal/modules/esm/loader.js:182:24)
6:19:59 PM f3a6a33f ERROR  Unhandled Promise Rejection 	{"errorType":"Runtime.UnhandledPromiseRejection","errorMessage":"ReferenceError: exports is not defined","reason":{"errorType":"ReferenceError","errorMessage":"exports is not defined","stack":["ReferenceError: exports is not defined","    at file:///var/task/node_modules/@algolia/react-instantsearch-widget-loadmore-with-progressbar/dist/index.es.js:24:10","    at ModuleJob.run (internal/modules/esm/module_job.js:145:37)","    at async Loader.import (internal/modules/esm/loader.js:182:24)"]},"promise":{},"stack":["Runtime.UnhandledPromiseRejection: ReferenceError: exports is not defined","    at process.<anonymous> (/var/runtime/index.js:35:15)","    at process.emit (events.js:326:22)","    at processPromiseRejections (internal/process/promises.js:209:33)","    at processTicksAndRejections (internal/process/task_queues.js:98:32)"]}
6:19:59 PM f3a6a33f Duration: 924.22 ms	Memory Usage: 100 MB	Init Duration: 458.17 ms

[fschucht]

I'm running into the same issue. It seems to happen if the next.js page bundle loads a node module which has "type": "module" set in its package.json.

I tried fixing it by setting the AWS_LAMBDA_JS_RUNTIME env var to nodejs14.x. It didn't fix the issue but resulted in a more detailed error. Maybe it is helpful:

{"errorType":"Runtime.UnhandledPromiseRejection","errorMessage":"ReferenceError: exports is not defined in ES module scope\nThis file is being treated as an ES module because it has a '.js' file extension and '/var/task/node_modules/remark-directive/package.json' contains \"type\": \"module\". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.","trace":["Runtime.UnhandledPromiseRejection: ReferenceError: exports is not defined in ES module scope","This file is being treated as an ES module because it has a '.js' file extension and '/var/task/node_modules/remark-directive/package.json' contains \"type\": \"module\". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.","    at process.<anonymous> (/var/runtime/index.js:35:15)","    at process.emit (events.js:412:35)","    at processPromiseRejections (internal/process/promises.js:245:33)","    at processTicksAndRejections (internal/process/task_queues.js:96:32)"]}

I also tried to use the old plugin version 3.9.2 with my next.js 12.0.1 upgraded app. It fixes the functions issue however then all interactivity of my pages seems to be broken (buttons stop working etc). So it's unfortunately not a temporary workaround.

[FabienMotte]

Thanks @fschucht for your comment and the detailed error
The npm package I'm using might be misconfigured, I'll have a look

[CrescentKohana]

Same here:

{
  "errorType": "Runtime.UnhandledPromiseRejection",
  "errorMessage": "ReferenceError: exports is not defined",
  "trace": [
    "Runtime.UnhandledPromiseRejection: ReferenceError: exports is not defined",
    "    at process.<anonymous> (/var/runtime/index.js:35:15)",
    "    at process.emit (events.js:326:22)",
    "    at processPromiseRejections (internal/process/promises.js:209:33)",
    "    at processTicksAndRejections (internal/process/task_queues.js:98:32)"
  ]
}

• Next.js 12.0.2
• @netlify/plugin-nextjs 4.0.0-beta.4
• Error is appearing on [slug].tsx with getStaticPaths and getStaticProps, and on index.tsx with only getStaticProps.

[build]
publish = ".next"

[[plugins]]
package = "@netlify/plugin-nextjs"

[ascorbic]

This should now be fixed in the build system. For local builds you'll need to upgrade netlify-cli, but in CI you should be abel to trigger a new build and it should work.

[FabienMotte]

Thanks a lot @ascorbic! I confirm everything is now working on my side 💯