Preact: Package path ./compat/jsx-runtime.js is not exported from package

Hello

I am having issues when replacing React with Preact in production build.

My project can be found at jahirfiquitiva/jahir.dev

And this is the build error I am getting:

info  - Creating an optimized production build  
Failed to compile.

./node_modules/next-contentlayer/dist/hooks/useMDXComponent.js
Module not found: Package path ./compat/jsx-runtime.js is not exported from package /Users/jahir/dev/jahir/website/node_modules/preact (see exports field in /Users/jahir/dev/jahir/website/node_modules/preact/package.json)

Import trace for requested module:
./node_modules/next-contentlayer/dist/hooks/index.js
./src/pages/blog/[slug].tsx


> Build failed because of webpack errors
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

I’m not sure why it started failing if it was working just fine before 😕

[alany411]

I found a temporary solution, if you want to use preact@10.6. You can edit your next.config.js to assign the correct alias until this issue gets fixed.

/** @type {import('next').NextConfig} */

const { withContentlayer } = require('next-contentlayer');

module.exports = withContentlayer()({
  reactStrictMode: true,
  swcMinify: true,
  webpack: (config, { dev, isServer }) => {
    if (!dev && !isServer) {
      Object.assign(config.resolve.alias, {
        'react/jsx-runtime.js': 'preact/compat/jsx-runtime',
        react: 'preact/compat',
        'react-dom': 'preact/compat',
        'react-dom/test-utils': 'preact/test-utils',
      });
    }

    return config;
  },
});

[jahirfiquitiva]

Sure… Thanks for the help