Can't import constants in next.config.mjs/js

[thany]

Describe the Bug

When I import constants like this in my next.config.mjs:

import { constants } from '@sitecore-jss/sitecore-jss-nextjs';

The build will break:

(node:8856) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
 ⨯ Failed to load next.config.mjs, see more info here https://nextjs.org/docs/messages/next-config-error

> Build error occurred
Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Projects\Redacted\turborepo\apps\e-commerce\node_modules\chalk\source\index.js from C:\Projects\Redacted\turborepo\apps\e-commerce\node_modules\@sitecore-jss\sitecore-jss-nextjs\dist\cjs\services\component-props-service.js not supported.
Instead change the require of index.js in C:\Projects\Redacted\turborepo\apps\e-commerce\node_modules\@sitecore-jss\sitecore-jss-nextjs\dist\cjs\services\component-props-service.js to a dynamic import() which is available in all CommonJS modules.
    at mod.require (C:\Projects\Redacted\turborepo\node_modules\next\dist\server\require-hook.js:65:28)
    at Object.<anonymous> (C:\Projects\Redacted\turborepo\apps\e-commerce\node_modules\@sitecore-jss\sitecore-jss-nextjs\dist\cjs\services\component-props-service.js:16:33) {
  code: 'ERR_REQUIRE_ESM'
}

But when I change the import to:

import { constants } from '@sitecore-jss/sitecore-jss';

It works fine.

It makes no difference if it's called next.config.js or next.config.mjs.

This is in an update from 22.0.0 to 22.2.1, and there was nothing in the changelog about this, even though it's clearly a breaking change.

To Reproduce

Use the import as described.

Expected Behavior

It should not complain about import bollocks. Those are among the most frustrating errors you could possibly run into.

Possible Fix

No response

Provide environment information

• Sitecore Version: 10.4
• JSS Version: 22.2.1
• Browser Name and version: Firefox latest
• Operating System and version (desktop or mobile): desktop, Windows 10
• Link to your project (if available): N/A

[thany]

Just to add: it's not that constants is that much of an important thing to be able to import. I'm just thinking "what else doesn't import correctly, should we need it in the future?"

This is a disconcerting thought, and that's why this merits some thorough testing, now and in the future.

[thany]

After going through the migration and no errors remaining, a build now produces this:

   Collecting page data  ..Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Projects\Redacted\turborepo\apps\e-commerce\node_modules\chalk\source\index.js from C:\Projects\Redacted\turborepo\apps\e-commerce\node_modules\@sitecore-jss\sitecore-jss-nextjs\dist\cjs\services\component-props-service.js not supported.
Instead change the require of index.js in C:\Projects\Redacted\turborepo\apps\e-commerce\node_modules\@sitecore-jss\sitecore-jss-nextjs\dist\cjs\services\component-props-service.js to a dynamic import() which is available in all CommonJS modules.
    at mod.require (C:\Projects\Redacted\turborepo\node_modules\next\dist\server\require-hook.js:65:28)
    at Object.<anonymous> (C:\Projects\Redacted\turborepo\apps\e-commerce\node_modules\@sitecore-jss\sitecore-jss-nextjs\dist\cjs\services\component-props-service.js:16:33) {
  code: 'ERR_REQUIRE_ESM'
}
Error [ERR_REQUIRE_ESM]: require() of ES Module C:\Projects\Redacted\turborepo\apps\e-commerce\node_modules\chalk\source\index.js from C:\Projects\Redacted\turborepo\apps\e-commerce\node_modules\@sitecore-jss\sitecore-jss-nextjs\dist\cjs\services\component-props-service.js not supported.
Instead change the require of index.js in C:\Projects\Redacted\turborepo\apps\e-commerce\node_modules\@sitecore-jss\sitecore-jss-nextjs\dist\cjs\services\component-props-service.js to a dynamic import() which is available in all CommonJS modules.
    at mod.require (C:\Projects\Redacted\turborepo\node_modules\next\dist\server\require-hook.js:65:28)
    at Object.<anonymous> (C:\Projects\Redacted\turborepo\apps\e-commerce\node_modules\@sitecore-jss\sitecore-jss-nextjs\dist\cjs\services\component-props-service.js:16:33) {
  code: 'ERR_REQUIRE_ESM'
}

> Build error occurred
Error: Failed to collect page data for /[[...path]]
    at C:\Projects\Redacted\turborepo\node_modules\next\dist\build\utils.js:1268:15 {
  type: 'Error'
}

So it's going wrong at "Collecting page data".

I have no bloody clue where I'm supposed to go looking to fix it. It doesn't say where this include is actually coming, and it is incorrectly telling me to replace a require inside node_modules, which I'm obviously not going to do.

Please provide a fix at your earliest convenience. This is now blocking us. Critical priority please.

[thany]

If I go to C:\Projects\Redacted\turborepo\apps\e-commerce\node_modules\@sitecore-jss\sitecore-jss-nextjs\dist\cjs\services\component-props-service.js and actually make the change it wants me to make:

It appears to work. Or at least the build doesn't explode.

But again, this is a horrible and unsustainable workaround that will only work on my machine, and will be replaced at the whim of an npm install, or indeed a deployment to any environment beyond my local dev.

The real solution is to not transpile to arcane require statements. Or set up the exports in the (meaning JSS's) package.json correctly.

[art-alexeyenko]

Thanks for bringing this to light @thany . I must not that breaking changes are possible between minor versions (as outlined in changelog https://github.com/Sitecore/jss/blob/dev/CHANGELOG.md) , but this looks more like an unintended regression. It's not very clear why it happens - chalk has been present and componen-props-service hasn't been changed for a long time.
I've put it into backlog for proper prioritization and investigation with the team.

[art-alexeyenko]

Doing some more investigation, I see JSS uses require in next.config out of the box - import is not (and wasn't as of v22.0) usable in next.config.js as it's not an ESM module.
We have plans to switch all of JSS to ESM completely and that should take care of this and similar problems.

[thany]

import in next.config.js (or .mjs) is fully supported. It's working perfectly for other imports as well.

What version of Next.js are you using that doesn't support this? We are on 14, switching to 15 shortly.