Lack of ESM entry-points prevents correct default import resolution

[ctjlewis]

What version of Next.js are you using?

latest

What version of Node.js are you using?

14.x

What browser are you using?

Chrome

What operating system are you using?

Linux

How are you deploying your application?

next dev / next start

Describe the Bug

I am consuming next/image for an ESM library, but because it is only exported as CJS, it is not possible to resolve the default import correctly. For example:

import { jsx } from 'react/jsx-runtime.js';
import Image from 'next/image.js';

// fails: the Image() function exists at Image.default
jsx(Image, {});

// works: manually reference named CJS `default` member
jsx(Image.default, {}); 

Expected Behavior

It is not fun, but ideally Next would ship ESM entry-points, perhaps at next/package.mjs, for consumption by third-party libraries or other ESM contexts (see microsoft/TypeScript#44501).

To Reproduce

See https://github.com/ctjlewis/default-resolution-bug.

$ node test.mjs

{ Image: { default: [Function: Image] } }

Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

{
  '$$typeof': Symbol(react.element),
  type: { default: [Function: Image] },
  key: null,
  ref: null,
  props: { src: 'https://via.placeholder.com/150' },
  _owner: null,
  _store: {}
}

[github-actions]

Please verify that your issue can be recreated with next@canary.

Why was this issue marked with the please verify canary label?

We noticed the provided reproduction was using an older version of Next.js, instead of canary.

The canary version of Next.js ships daily and includes all features and fixes that have not been released to the stable version yet. You can think of canary as a public beta. Some issues may already be fixed in the canary version, so please verify that your issue reproduces by running npm install next@canary and test it in your project, using your reproduction steps.

If the issue does not reproduce with the canary version, then it has already been fixed and this issue can be closed.

How can I quickly verify if my issue has been fixed in canary?

The safest way is to install next@canary in your project and test it, but you can also search through closed Next.js issues for duplicates or check the Next.js releases.

My issue has been open for a long time, why do I need to verify canary now?

Next.js does not backport bug fixes to older versions of Next.js. Instead, we are trying to introduce only a minimal amount of breaking changes between major releases.

What happens if I don't verify against the canary version of Next.js?

An issue with the please verify canary that receives no meaningful activity (e.g. new comments that acknowledge verification against canary) will be automatically closed and locked after 30 days.

If your issue has not been resolved in that time and it has been closed/locked, please open a new issue, with the required reproduction, using next@canary.

I did not open this issue, but it is relevant to me, what can I do to help?

Anyone experiencing the same issue is welcome to provide a minimal reproduction following the above steps. Furthermore, you can upvote the issue using the 👍 reaction on the topmost comment (please do not comment "I have the same issue" without repro steps). Then, we can sort issues by votes to prioritize.

I think my reproduction is good enough, why aren't you looking into it quicker?

We look into every Next.js issue and constantly monitor open issues for new comments.

However, sometimes we might miss one or two due to the popularity/high traffic of the repository. We apologize, and kindly ask you to refrain from tagging core maintainers, as that will usually not result in increased priority.

Upvoting issues to show your interest will help us prioritize and address them as quickly as possible. That said, every issue is important to us, and if an issue gets closed by accident, we encourage you to open a new one linking to the old issue and we will look into it.

Useful Resources

• How to Contribute to Open Source (Next.js)
• How to create a Minimal, Complete, and Verifiable example
• Reporting a Next.js bug
• Next.js Triaging issues

[balazsorban44]

This issue has been automatically closed because it wasn't verified against next@canary. If you think it was closed by accident, please leave a comment. If you are running into a similar issue, please open a new issue with a reproduction. Thank you.

[chentsulin]

I believe this issue is not fixed on the canary and should be reopened.

[ctjlewis]

Yeah, @jankaifer, why would you flag this when I linked a repro? It was too much to clone it and check latest canary yourself? There are users reporting and experiencing the bug in this thread.

[REDACTED] close-oriented goals are bad. ESM entry-points will be a little annoying but the band-aid will have to come off eventually.

cc also @balazsorban44, would recommend reopening.

[jankaifer]

Hey, sorry, this was my bad. Reopening.

[balazsorban44]

We understand the frustration, but keep in mind that there was no unexplained action taken here. You had a 30 days notice before the issue was closed, and a detailed reasoning was given as well as why it happened and what you can do to prevent the issue from being closed.

@ctjlewis, please refrain from making personal comments. The comment

It was too much to clone it and check latest canary yourself?

is an unhelpful comment in every sense that creates unnecessary negativity towards maintainers.

Also, refrain from tagging other (unrelated) core maintainers for gaining extra attention, as pointed out. I suggest reading #30402 (comment) carefully.

The ask about checking canary was still valid as per the instructions. The reproduction repository hasn't been updated since 2021, so I would like to ask you to update it against the latest version (which happens to be 13.1.1 as of writing).

At the very least, we can agree that there was no bad intent here, the issue is now re-opened, now let's focus on what matters. 💚