Commit graph

3 commits

Author SHA1 Message Date
Jiachi Liu
e0399ca6dc
Support next/og usage in ESM nextjs app (#60818)
### What 

Follow up for #59852 , now you can use `next/og` if your nextjs app is
marked as ESM with `"type": "module"` in package.json.

### How

It's a bug in external handling, we shouldn't ESM import error for local
requests. Previously you'll see the below error but the
og import shouldn't be errored as it's not external package

```
Module not found: ESM packages (/.../app/opengraph-image.js) need to be imported. Use 'import' to reference the package instead
 https://nextjs.org/docs/messages/import-esm-externals
```


Closes NEXT-2147
2024-01-18 13:44:50 +01:00
Steven
4b50313fd9
feat: stabilize unstable_getImgProps() => getImageProps() (#60739)
This PR renames `unstable_getImgProps` to `getImageProps()` (originally
introduced in PR #51205).

Most feedback [after
announcing](https://twitter.com/leeerob/status/1674250190432116736)
looks positive so it seems like we can safely stabilize this API now.
Its unlikely to change.

I also added documentation with example usage.

Closes NEXT-2120
Fixes https://github.com/vercel/next.js/issues/56009
2024-01-17 18:28:49 -05:00
Jiachi Liu
c4ba419d5c
Alias nextjs api entry to esm version for app router (#59852)
## What

When users specify `"type": "module"` in Next.js app, especially with
`create-next-app`, `Image` component is not working. An error
`Unsupported Server Component type: {...}` is thrown.

## Why

`next/image` API is mixing with a client component as default export and
a named export as server component. But the entry file of the API is
still CJS file, which will import the module as the object. So you'll
get `{ default, unstable_getImageProps }` when you do `import Image from
'next/image'` instead of `Image` component itself, where the CJS module
load all the exports as an object. This is expected behavior for ESM but
breaks the usage.

It only errors when you're using js extensions, if you're using
typescript, it still works. If you're using turbopack, it works in dev
mode.

This is also because webpack can't analyze the exports from CJS module
of that `next/image` entry file. Usually we can assign the default
export to the module itself, then attach other named exports onto it, so
the default export equals the `module.exports` itself. But for
`next/image` since the default export is an client component, doing that
will error with React as you cannot modify the react client reference.
Turbopack doesn't use the same way to analyze the default export, so it
doesn't have this problem.

## How

We create few ESM version of entry files of nextjs APIs, then pick up
them to let app router for bundling, instead of using the `next/<api
name>.js` CJS files. Those ESM entries still point to the `next/dist/..`
CJS files. In this way webpack and directly gets the exports from the
`next/dist/...` files and be aware of the module exports. No more CJS
module wrapping the ESM module, the default and named exports can
preserve correctly.

Fixes #54777
Closes NEXT-1774
Closes NEXT-1879
Closes NEXT-1923
2023-12-23 17:46:50 +01:00