Package subpath './compat/jsx-runtime.js' is not defined by "exports" in preact/package.json

[heyitsarpit]

• [x] Check if updating to the latest Preact version resolves the issue

Package subpath './compat/jsx-runtime.js' is not defined by "exports" in preact/package.json

I'm using preact in next js and tried updating to next 12, I'm using mdx-bundler which import "react/jsx-runtime" internally.

Error :

error - ./node_modules/mdx-bundler/dist/client.js:11:0
Module not found: Package path ./compat/jsx-runtime.js is not exported from package /Users/arpit/Developer/personal_website/node_modules/preact (see exports field in /Users/arpit/Developer/personal_website/node_modules/preact/package.json)

Import trace for requested module:
./node_modules/mdx-bundler/client/index.js
./pages/index.tsx

https://nextjs.org/docs/messages/module-not-found
error - Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './compat/jsx-runtime.js' is not defined by "exports" in /Users/arpit/Developer/personal_website/node_modules/preact/package.json

When I check the node_modules, I can see that "jsx-runtime" is inclued in the exports field.

    "exports": {
...
        "./jsx-runtime": {
            "browser": "./jsx-runtime/dist/jsxRuntime.module.js",
            "umd": "./jsx-runtime/dist/jsxRuntime.umd.js",
            "require": "./jsx-runtime/dist/jsxRuntime.js",
            "import": "./jsx-runtime/dist/jsxRuntime.mjs"
        },
        "./jsx-dev-runtime": {
            "browser": "./jsx-runtime/dist/jsxRuntime.module.js",
            "umd": "./jsx-runtime/dist/jsxRuntime.umd.js",
            "require": "./jsx-runtime/dist/jsxRuntime.js",
            "import": "./jsx-runtime/dist/jsxRuntime.mjs"
        },
...
}

[idirmosh]

I had the same issue. as a temporary fix you can assign react/jsx-runtime.js to preact/jsx-runtime in your next.config.js file.

// next.config.js
  webpack: (config, options) => {
    if (!options.dev && !options.isServer) {
      Object.assign(config.resolve.alias, {
      // assign react/jsx-runtime.js to preact/jsx-runtime
        'react/jsx-runtime.js': 'preact/compat/jsx-runtime',
        react: 'preact/compat',
        'react-dom/test-utils': 'preact/test-utils',
        'react-dom': 'preact/compat',
      });
    }