next-runtime
next-runtime copied to clipboard
netlify
[Bug]: ESM not supported with Netlify functions? (part 2)
Summary
This issue appears to me to be a duplicate of 750 which is marked as closed. However I am experiencing the same issue.
Error
[ReferenceError](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/
Global_Objects/ReferenceError) -
module 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/package.json' contains "type": "module".
To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
Stacktrace (the head anyway)
ReferenceError: module 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/package.json' contains "type": "module".
To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
at file:///var/task/___netlify-handler.js:1:1
Settings
I have set "type": "module" in package.json.
AWS_LAMBDA_JS_RUNTIME to nodejs16.x and
NODE_VERSION to 16
I am building using file-based configuration (netlify.toml)
Package.json
"next": "^12.2.1",
"@netlify/functions": "^1.0.0",
"@netlify/plugin-lighthouse": "^3.0.0",
"@netlify/plugin-nextjs": "^4.11.1",
"@next/bundle-analyzer": "^12.2.0",
Netlify.toml
[build]
publish = ".next"
command = "yarn build"
base = "/"
environment = { AWS_LAMBDA_JS_RUNTIME = 'nodejs16.x', NODE_VERSION = '16' }
[[plugins]]
package = "@netlify/plugin-nextjs"
The error appears to be suggesting that there are requires within ___netlify-handler.js and as such this should be renamed with the .cjs extension. I would happily do so however this is generated by the plugin and I can find no straightforward means to alter the file extension generated.
Is ESM supported? The linked issue is closed apparently solved.
Steps to reproduce
Deploy project to Netlify using confutation above. Build succeeds without error. Error is displayed on website homepage.
A link to a reproduction repository
No response
Plugin version
4.11.1
More information about your build
- [ ] I am building using the CLI
- [x] I am building using file-based configuration (
netlify.toml)
Hi @TheCryptoMint ,
We think we may have an idea of what's causing this error and our team is currently investigating. Will update when we have more information for you.
Hi again,
We've made a change that should have addressed the issue you've reported, but wanted to verify with you first before closing this.
Hi, I'm having a similar issue.
To see the error message, try to load this image: https://gamliela.com/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fproject-setup-ready.e736f9d0.png&w=1200&q=75
netlify.toml (site gamliela-website):
[build.environment]
NODE_VERSION = "16"
NPM_FLAGS = "--version" # prevent Netlify npm install
AWS_LAMBDA_JS_RUNTIME = "nodejs16.x"
[build]
publish = ".next"
command = "npx [email protected] install && npm run build"
Source code: https://github.com/gamliela/website/tree/master
I also added NODE_VERSION and AWS_LAMBDA_JS_RUNTIME in the UI, as advised in this thread, but it didn't help.
I am having the same error. I have a next.js project with "type": "module" in the package.json.
This is a hard blocker for a project I am on, unfortunately. We have an existing Next.js v13 app deployed to Vercel that is authored in ESM using type: "module" in package.json to allow for top-level await (which we depend on for reasonable ergonomics when working with slonik). We were looking to migrate to Next.js to get around some issues we've had with Vercel. On Netlify the build process runs flawlessly, but the serverless functions (e.g., ___netlify-handler) just fail due to their produced code using module.exports = require("...").
It also looks like using ESM with a Nextjs project causes IPX images to break. PNGs just won't load and you'll get 502s with similar errors. Had to switch back to CJS in the meantime.
I've had the same issue. Turns out that my package.json had "type": "module", in it, which wasn't needed. Removing this has fixed the issue. I think the built netlify functions look for the nearest package.json. Because it was a module then that's what caused the issue.
What is strange is that mine worked with module for a good week or 2, so something that has been added has triggered this. At the moment I don't have time to debug what that package is 🤷
I've had the same issue. Turns out that my package.json had
"type": "module",in it, which wasn't needed. Removing this has fixed the issue. I think the built netlify functions look for the nearest package.json. Because it was amodulethen that's what caused the issue.What is strange is that mine worked with module for a good week or 2, so something that has been added has triggered this. At the moment I don't have time to debug what that package is 🤷
Seeing the same behaviour all was well then something stopped working. You can see my error message here: https://hopper.workleap.design/_ipx/w_750,q_75/https%3A%2F%2Fassets.workleap.com%2Fhopper%2Fwebdoc%2Ftoken-details.png?url=https%3A%2F%2Fassets.workleap.com%2Fhopper%2Fwebdoc%2Ftoken-details.png&w=750&q=75
I didn't changed things that could have triggered
Also have the same issue when deploying a Next.js 14 app directory project with type: module in package.json.
ReferenceError - module 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/package.json' contains "type": "module".
To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
Stack trace
ReferenceError: module 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/package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.
at file:///var/task/_ipx.js:1:1
at ModuleJob.run (node:internal/modules/esm/module_job:194:25)
@pieh @ascorbic @orinokai @danez @sarahetter any chance of getting the fix mentioned in the PR published soon?
Or at least an officially-blessed workaround?
cc IPX maintainer @pi0 (_ipx.js is the failing file in the error messages above)
Checking dependencies @netlify/[email protected] uses @netlify/[email protected] which uses [email protected] which is quite old. Latest is v3 but I'm afraid there is much interest as i guess Netlify is planning to advocate new Native optimizer...
BTW almost all 3 major versions of IPX use dual ESM/CJS exports with explicit import extensions (unpkg v3 - unpkg v1.3.1).
Please let me know if I can do to help for this or if you spot any bundling issues, i can trigger a hotfix also for 1.x however I'm note sure issue is originating from ipx.
@orinokai mentioned in the closed PR that Netlify is currently testing an update to the Next.js Runtime that will address this issue and will have some information to share soon 🎉
- https://github.com/netlify/next-runtime/pull/1886#issuecomment-1903573857
As a paying Netlify customer, I find this super annoying. Especially given how long this issue has been open. It's 2024, and being unable to set "type": "module" because the run time can't be bothered to support modern standards feels very archaic.
I have also got this issue with my Next.js project. The issue affects both the Netlify functions (/netlify/functions/) and Next.js APIs (/src/pages/api/).
Using netlify dev will run the project correctly on local, but not when deployed to Netlify itself.
I started up my project using the T3 App tool and changed none of the configuration settings out of the box, and ran directly into this problem when adding an API.
This is a major failing of the Netlify Next.js environment and a complete blocker to my project. I didn't want to but I'll have to switch to Vercel to meet my deployment deadline at this point. I was only linked to this bug report after a couples weeks of posting on your forum and raising a support ticket.
I did discover that if you remove any path config from the Netlify functions it seemingly will work, at least in my reduced test case, but my APIs were all written with path parameters, so this wasn't a viable workaround for me.
Minimum replication repo: https://github.com/timothy-bailey-redbox/t3-dash-test Forum conversion: https://answers.netlify.com/t/netlify-functions-es-module-error-when-using-paths-config/111942
Running on Node v20, with Next.js 14.
Workaround
@cdking007: any work around for this?
Until @orinokai and others at Netlify have published the upcoming improvements to the Next.js Runtime, what we (@ProchaLu) are using is this (very hacky) usage of sed to replace "type": "module" with "type": "commonjs" during build on Netlify:
package.json
{
"scripts": {
"build": "next build && sed -i 's/\"type\": \"module\"/\"type\": \"commonjs\"/' package.json"
}
}
Pull request:
- https://github.com/upleveled/next-starter-peacock/pull/163
If you want to follow along with the resolution of this, we have our own issue here, which we will update as the new version of the Netlify Next.js Runtime becomes available:
- https://github.com/upleveled/next-starter-peacock/issues/164
Hi, I echo the same comments with a lot of the complaints here.
I think it is unacceptable that as a paying community, we are paying for our project to not be deployable. There are few useful documentation on this and no workaround.
Given the severity of this issue, the lack of workaround and the widespread adoption of NextJS and ESM, this should have been prioritised as a P0 issue. If u have other more pressing issues than this (that the team cannot handle), I will be severely concerned about the business and technical viability of Netlify as a platform.
Please figure this out urgently.
+1 on this. Still an issue
Yeah, the issue is still open. If you have something to add feel free, but please stop with +1 posts with no additional context—they notify all participants and anybody else that has subscribed to the issue looking for a solution. There are already 20+ people on the thread, and likely many more following. If you want to just support add a 👍 to the first post and move on.
Potential Workaround
@MarcL @orinokai is this fix contained in the "Next.js Runtime v5" feature (currently @netlify/[email protected]) that was just offered to me in early access?
I just saw this in my Netlify dashboard under the Deploys page
Maybe people in this thread can try this out and we can see whether this helps... (it was offered to me on the Deploys page of the site)
In my first tests, it seems like Next.js Runtime v5 allows for ESM projects 😍
However, it's not easy to set up:
@MarcL @orinokai if you can forward this to anyone on the frameworks team, that would be useful. I tried reporting this to Netlify support, but the support ticket form is not currently working.
1. First time setup causes "outdated" message
After clicking "Opt In" the first time, it appears that there is an error message in the Building step, with a link that leads to the wrong place:
1:56:31 PM: ❯ Outdated plugins
1:56:31 PM: - @netlify/[email protected]: latest version is 5.0.0-rc.4
1:56:31 PM: To upgrade this plugin, please uninstall and re-install it from the Netlify plugins directory (https://app.netlify.com/plugins)
On that https://app.netlify.com/plugins link (which redirects to my account-level Integrations page), there's no Next.js plugin mentioned there.
I needed to instead research a bit and through trial and error found the following workflow to disable and re-enable the runtime:
I needed to follow these (convoluted) steps:
- Site configuration
- Build & deploy
- Build settings
- Configure
- Remove (next to Next.js)
- Save
- Configure
- Select
- Next.js
This will also be relevant further down.
2. Incorrect @netlify/plugin-nextjs@5 version installed with new pushed commits
Update: Read my comment below for a potential workaround by pinning the @netlify/plugin-nextjs version
Deploys / deploy previews triggered by commits pushed to both main and branches fail in the Building step while resolving the v5 dependency because they are using the specifier @netlify/plugin-nextjs@5 (probably because v5 is still in RC):
1:58:26 PM: Netlify Build
1:58:26 PM: ────────────────────────────────────────────────────────────────
1:58:26 PM:
1:58:26 PM: ❯ Version
1:58:26 PM: @netlify/build 29.36.3
1:58:27 PM:
1:58:27 PM: ❯ Flags
1:58:27 PM: baseRelDir: true
1:58:27 PM: buildId: 65f1a2c642479b0008047cc2
1:58:27 PM: deployId: 65f1a2c642479b0008047cc4
1:58:27 PM:
1:58:27 PM: ❯ Current directory
1:58:27 PM: /opt/build/repo
1:58:27 PM:
1:58:27 PM: ❯ Config file
1:58:27 PM: /opt/build/repo/netlify.toml
1:58:27 PM:
1:58:27 PM: ❯ Context
1:58:27 PM: deploy-preview
1:58:27 PM:
1:58:27 PM: ❯ Installing plugins
1:58:27 PM: - @netlify/plugin-nextjs@5
1:58:27 PM:
1:58:27 PM: Dependencies installation error
1:58:27 PM: ────────────────────────────────────────────────────────────────
1:58:27 PM:
1:58:27 PM: Error message
1:58:27 PM: Error while installing dependencies in /opt/build/repo/.netlify/plugins/
1:58:27 PM: npm ERR! code ETARGET
1:58:27 PM: npm ERR! notarget No matching version found for @netlify/plugin-nextjs@5.
1:58:27 PM: npm ERR! notarget In most cases you or one of your dependencies are requesting
1:58:27 PM: npm ERR! notarget a package version that doesn"t exist.
Given my previous experience with the disabling / re-enabling, I tried again the long series of steps I mentioned above
And then, the next deploy found the @netlify/[email protected] version:
1:04:05 PM: Netlify Build
1:04:05 PM: ────────────────────────────────────────────────────────────────
1:04:05 PM:
1:04:05 PM: ❯ Version
1:04:05 PM: @netlify/build 29.36.3
1:04:05 PM:
1:04:05 PM: ❯ Flags
1:04:05 PM: baseRelDir: true
1:04:05 PM: buildId: 65f1960ee26f9a0d074ec5f4
1:04:05 PM: deployId: 65f1960ee26f9a0d074ec5f6
1:04:06 PM:
1:04:06 PM: ❯ Current directory
1:04:06 PM: /opt/build/repo
1:04:06 PM:
1:04:06 PM: ❯ Config file
1:04:06 PM: /opt/build/repo/netlify.toml
1:04:06 PM:
1:04:06 PM: ❯ Context
1:04:06 PM: production
1:04:06 PM:
1:04:06 PM: ❯ Installing plugins
1:04:06 PM: - @netlify/[email protected]
1:04:07 PM:
1:04:07 PM: ❯ Using Next.js Runtime - v5.0.0-rc.4
1:04:07 PM:
1:04:07 PM: ❯ Loading plugins
1:04:07 PM: - [email protected] from Netlify app
1:04:08 PM:
1:04:08 PM: @netlify/plugin-nextjs (onPreBuild event)
1:04:08 PM: ────────────────────────────────────────────────────────────────
1:04:08 PM:
1:04:08 PM: Next.js cache restored
1:04:08 PM:
1:04:08 PM: (@netlify/plugin-nextjs onPreBuild completed in 106ms)
I did this once earlier today, and then the problem returned again, and I needed to follow the steps above again, and then it restored the version to @netlify/[email protected]
I'm not sure why it sometimes uses the version @netlify/plugin-nextjs@5, but would be useful if this could be fixed.
@MarcL @orinokai, Opt-in the Next.js Runtime v5 (@netlify/[email protected]) resolved the issue. These are my steps to update @netlify/plugin-nextjs to v5:
- Re-deploying your Next.js application on Netlify
- Opt-In to Next.js Runtime v5
- After the re-deployment, navigate to the Deploys Section on Netlify
- Look for the Opt-In button related to Next.js Runtime v5 and click it
- During the deployment, you may encounter a warning about outdated plugins
1:56:31 PM: ❯ Outdated plugins
1:56:31 PM: - @netlify/[email protected]: latest version is 5.0.0-rc.4
1:56:31 PM: To upgrade this plugin, please uninstall and re-install it from the Netlify plugins directory (https://app.netlify.com/plugins)
-
Remove and re-add Next.js Runtime under site configuration -> Build & deploy -> Build settings -> Configure -> Remove (next to Next.js) -> Save -> Configure -> Select -> Next.js
-
Trigger another re-deployment and the
@netlify/[email protected]was added
1:58:59 PM: ❯ Installing plugins
1:58:59 PM: - @netlify/[email protected]
- Incorrect
@netlify/plugin-nextjs@5version installed with Deploy Previews
Looking through the Opt Out section of the docs, I found a way to pin the @netlify/plugin-nextjs version to a particular release candidate version (eg. 5.0.0-rc.4):
pnpm add @netlify/[email protected]
And then add this to your netlify.toml:
[[plugins]]
package = "@netlify/plugin-nextjs"
In my first tests, this seems to prevent Netlify from "forgetting" the exact version of the Next.js runtime and trying to install @netlify/plugin-nextjs@5 👍
@ProchaLu - Thanks! That's great to hear.
@karlhorky - You can pin the version as you mentioned if you need to but we are regularly pushing out new changes so be mindful that you won't get them. We're currently tagging the @rc version with each new release so you'll pick up the release candidate fixes if you use that.
As we think this issue is fixed with the new RC, I'll close this issue. If you see any more problems then please raise a new issue. Thanks!
You can pin the version as you mentioned if you need to but we are regularly pushing out new changes so be mindful that you won't get them.
@MarcL thanks, yeah that's the downside of my pinning workaround.
But just to be absolutely clear, Deploy Previews are currently using @5 which causes all deploys to fail for users who have opted in to the Next.js v5 Runtime. (both Deploy Previews on new pushes to branches and also regular deploys from new pushes to the main branch)
So without my workaround, the opted-in Next.js v5 Runtime is unusable.