We recently upgrade a solution to JSS 22.3.1. We were already on 22.1.x, so this felt like a pretty straight-forward upgrade. And, for the most part, it was. One thing that was a bit of a pain in the butt was opening up our container logs and seeing a flood of warnings like the title. And by flood…I mean every other line. It was pretty intense.

Time to hit the old google. Good thing is, there’s PLENTY of search results. One of the items in the upgrade guide is to switch to node 22. That…is where the problem starts. The brief story (and honestly they only one you should care about) is that when node 22 released, there was a deprecated library called “punycode” (forever burned into my mind). Node does not like to see downstream dependencies using punycode. Which is annoying. And honestly, you could probably fix some of them. Except maybe eslint. That thing is a bit of a beast and still has an open github issue (auto-closed due to age…but not resolved). And we’re also using storybook. I’m not about to mess with that. If you’re curious where your dependencies are, you can run a ‘npm ls punycode’ you’d be able to see all the refs down the tree.

There are some mixed results out there when trying to work around this. Most people say to downgrade back to node 20, which will technically fix the issue, but also isn’t the recommended approach according to Sitecore. Some say to try to manually override the offending libraries (like moving ajv up to 6.17, which replaces the aged uri-js with fast-uri). But that’s a bit more risky as those dependencies are built that way for a reason. As I said, there’s a bunch of approaches, most with limited success.

The best bet is to honestly just suppress the warning. It is, after all, a warning. Nothing is exploding. How do you suppress this, though? The great answer here is…it’s easy. And it’s succinct. You simply need to pass in the following:

--disable-warning DEP0040

This will simply suppress that specific error. Nothing more, nothing less. But..where do you put that? Lucky for us, node has a way to pull these settings from environment variables. It’s called the “NODE_OPTIONS” environment variable. And since I’m in docker locally, we can totally do that. Now…where? If you check the entrypoint for the rendering container, we see it runs ENTRYPOINT "npm install && npm run start:connected"

So, let’s look at that command in our package.json:

"start:connected": "cross-env NODE_ENV=development npm-run-all --serial bootstrap --parallel next:dev start:watch-components",

cross-env simply allows you to set environment variables cross-platform. No messing with dollar signs or percents. If you were to add something like NODE_OPTIONS=”–disable-warning DEP0040″ to this, it would seem intuitive that you’d be good to go. Unfortunately, you need to trace things a little further down. Right into the “next:dev” command:

"next:dev": "cross-env NODE_OPTIONS='--inspect' next dev",

We’re setting that NODE_OPTIONS again…which is going to overwrite whatever you previously set. So we’ll need to add this directly into the next:dev command something like the below:

"next:dev": "cross-env NODE_OPTIONS='--disable-warning=DEP0040 --inspect' next dev",

Just kidding. If you use the above, you’ll get some nasty errors:

2024-12-13 23:11:49 > cross-env NODE_OPTIONS='--disable-warning=DEP0040 --inspect' next dev
2024-12-13 23:11:49 
2024-12-13 23:11:49 
2024-12-13 23:11:49 > CLIENT@22.3.1 start:watch-components
2024-12-13 23:11:49 > ts-node --project tsconfig.scripts.json scripts/generate-component-builder/index.ts --watch
2024-12-13 23:11:49 
2024-12-13 15:17:38 '--disable-warning' is not recognized as an internal or external command,
2024-12-13 15:17:38 operable program or batch file.
2024-12-13 15:17:38 node:events:496
2024-12-13 15:17:38       throw er; // Unhandled 'error' event
2024-12-13 15:17:38       ^
2024-12-13 15:17:38 
2024-12-13 15:17:38 Error: spawn --disable-warning ENOENT
2024-12-13 15:17:38     at notFoundError (C:\app\node_modules\cross-spawn\lib\enoent.js:6:26)
2024-12-13 15:17:38     at verifyENOENT (C:\app\node_modules\cross-spawn\lib\enoent.js:40:16)
2024-12-13 15:17:38     at cp.emit (C:\app\node_modules\cross-spawn\lib\enoent.js:27:25)
2024-12-13 15:17:38     at ChildProcess._handle.onexit (node:internal/child_process:293:12)
2024-12-13 15:17:38 Emitted 'error' event on ChildProcess instance at:
2024-12-13 15:17:38     at cp.emit (C:\app\node_modules\cross-spawn\lib\enoent.js:30:37)
2024-12-13 15:17:38     at ChildProcess._handle.onexit (node:internal/child_process:293:12) {
2024-12-13 15:17:38   code: 'ENOENT',
2024-12-13 15:17:38   errno: 'ENOENT',
2024-12-13 15:17:38   syscall: 'spawn --disable-warning',
2024-12-13 15:17:38   path: '--disable-warning',
2024-12-13 15:17:38   spawnargs: [ 'DEP0040', 'next', 'dev' ]
2024-12-13 15:17:38 }

You’ve got to escape some double quotes in there like so:

"next:dev": "cross-env NODE_OPTIONS=\"--disable-warning=DEP0040 --inspect\" next dev",

Once you do that, you should see the warnings disappear from your console log. I’m hoping there’s some better movement on this initiative to replace punycode in the future. I’d love to not be suppressing warnings. Given this issue has been around with Node 21, which came out in October of LAST year…I’m not super hopeful.

Note: You’ll want to make similar changes to other commands, but I trust you can get there from here.

***Special thanks to Artem for the support in Slack today. Wouldn’t have this working otherwise!***