Skip to content

Commit

Permalink
Add note to node-loader on how to use w/ react 18
Browse files Browse the repository at this point in the history
  • Loading branch information
wooorm committed Oct 7, 2022
1 parent c3ccee4 commit 8970e21
Show file tree
Hide file tree
Showing 2 changed files with 19 additions and 4 deletions.
4 changes: 2 additions & 2 deletions packages/node-loader/lib/index.js
Expand Up @@ -3,8 +3,8 @@
*
* @typedef LoaderOptions
* @property {boolean} [fixRuntimeWithoutExportMap=true]
* Several JSX runtimes, notably React and Emotion, don’t yet have a proper
* export map set up.
* Several JSX runtimes, notably React below 18 and Emotion below 11.10.0,
* don’t yet have a proper export map set up.
* Export maps are needed to map `xxx/jsx-runtime` to an actual file in ESM.
* This option fixes React et al by turning those into `xxx/jsx-runtime.js`.
*
Expand Down
19 changes: 17 additions & 2 deletions packages/node-loader/readme.md
Expand Up @@ -105,9 +105,24 @@ It also exports the following identifier: `createLoader`.

Create a Node ESM loader to compile MDX to JS.

###### `options`
##### `options`

`options` are the same as [`compile` from `@mdx-js/mdx`][options].
One extra field is supported:

###### `options.fixRuntimeWithoutExportMap`

Fix broken export maps (`boolean`, default: `true`).

Several JSX runtimes, notably React below 18 and Emotion below 11.10.0, don’t
have a proper export map set up.
Export maps are needed to map `xxx/jsx-runtime` to an actual file in ESM.
This option fixes React et al by turning those into `xxx/jsx-runtime.js`.

> 👉 **Note**: If you are using recent React, or other proper packages, you
> have to turn this field off.
> See the example below on how to configure your loader.
> Pass `fixRuntimeWithoutExportMap: false` in options to it.
###### Example

Expand All @@ -122,7 +137,7 @@ const {load, getFormat, transformSource} = createLoader(/* Options… */)
export {load, getFormat, transformSource}
```

This example can then be used with `node --experimental-loader=my-loader.js`.
This example can then be used with `node --experimental-loader=./my-loader.js`.

Node itself does not yet support multiple loaders but it is possible to combine
multiple loaders with [`@node-loader/core`][node-loader-core].
Expand Down

1 comment on commit 8970e21

@vercel
Copy link

@vercel vercel bot commented on 8970e21 Oct 7, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

mdx – ./

mdx-mdx.vercel.app
mdxjs.com
v2.mdxjs.com
mdx-git-main-mdx.vercel.app

Please sign in to comment.