Plans to fetch data using co-location within JSX

[noahlst]

The newly announced Next.js 12 signals a future shift by the Next team to move away from 'data functions' like getStaticProps to co-locating data collection within JSX.

Builds using experimental React 18 (which is in alpha) features - like SSR and RSC - on Next 12 currently fail.

Are there plans to adapt the next-mdx-remote package into this new model?

[jescalan]

Yes

[gamedevsam]

I get errors with React 18:

Module not found: Package path ./jsx-runtime.js is not exported from package /home/sbatista/Dev/Personal/sambatista.com/node_modules/react (see exports field in /home/sbatista/Dev/Personal/sambatista.com/node_modules/react/package.json)

[noahlst]

Hi team! The original purpose of this issue was really based on two parts — hooks/colocating as raised at Next.js Conf 2021; and React SSR/Server Components. With React 18 now in GA and 4.0.1 capable of <Suspense>, SSR, etc (#255, #250, #237, more), I've renamed this to focus on the latter only.

[noahlst]

At this time, if you're experiencing errors with React 18 concurrency features, check:

• that next-mdx-remote is pinned at version 4.0.1
• that you are using the latest version of Next.js (12.1.4 at writing)
• that you're using the latest version of React (i.e. 18.0.0 proper)
• that your next.config.js includes experimental: { runtime: "nodejs"} (Edge Runtime disables eval which this library requires)

If none of that works try adding this to your next.config.js:

webpack: (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      "react/jsx-runtime.js": path.resolve("node_modules/react/jsx-runtime"),
    };
    return config;
  },

Or you can try require.resolve instead of path. This is courtesy of @jakejarvis

Note that, with time, this will probably break!

[gamedevsam]

@fernpolo pinning next-mdx-remote to version 4.0.1 solved the problem for me for now. Thanks for the update!

[BRKalow]

Closing this for now, thanks for raising the question! We'll be following the progress of the data-fetching evolutions in Next.js and look at how we'll be able to update next-mdx-remote to fit into the new patterns as more information comes out.