Import next/image in ESM projects

[w3nl]

Goals

1. Full ESM compatible

Non-Goals

No response

Background

I have a JS ESM project, and want to try Next.
But I see the import next/image gives me linting error's, because the path isn't valid.
See also: https://nodejs.org/api/esm.html#mandatory-file-extensions
So in that case it looks like I have to do:

import Image from 'next/image.js'

But NPM has designed a main to define the file in package.json.
Why refer to a file in the package, that sounds weird for me.
Feels like a hack to pick just a random file from the package.

Proposal

In the file defined at main in the package.json should also export Image, so you can just do

import { Image } from 'next'

Or deploy seperate packages, so Image will a new package, and you can import it like e.g.

import Image from '@next/image'