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

[jahirfiquitiva]

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 😕

[schickling]

Unfortunately I have no experience with Preact myself so we'll have to see whether other community members can chime in here.

Can you confirm that using mdx-bundler works with Preact?

[alany411]

If you use preact@10.5.15, it should work.

[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]

@alany411 that doesn't seem to work with preact@10.6.4 😕

[alany411]

Hmm. Not sure what the issue is @jahirfiquitiva but I was able to clone and build successfully with your repo on preact@10.6.4. I did have to add rimraf and cross-env though because I'm currently on my Windows desktop. The only files I changed were next.config.js and package.json

{
  "name": "folio",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "gen-inspo-files": "rimraf ./data/inspiration/*.js* && cross-env NODE_OPTIONS='--experimental-json-modules' node ./scripts/generate-inspiration-files.mjs",
    "clean": "rimraf .next && rimraf out && rimraf .contentlayer",
    "predev": "yarn clean && yarn gen-inspo-files",
    "prebuild": "yarn predev",
    "postbuild": "cross-env NODE_OPTIONS='--experimental-json-modules' node ./scripts/generate-rss.mjs && node ./scripts/generate-sitemap.mjs",
    "update-deps": "npx npm-check-updates -u && yarn"
  },
  "dependencies": {
    "@emotion/react": "^11.7.0",
    "@emotion/styled": "^11.6.0",
    "@mdi/js": "^6.5.95",
    "@mdi/react": "^1.5.0",
    "classnames": "^2.3.1",
    "colord": "^2.9.1",
    "contentlayer": "^0.0.33",
    "next": "12.0.7",
    "next-contentlayer": "^0.0.33",
    "next-themes": "^0.0.15",
    "preact": "10.6.4",
    "react": "^17.0.2",
    "react-compare-image": "^3.1.0",
    "react-dom": "^17.0.2",
    "react-palette": "^1.0.2",
    "swr": "^1.1.1",
    "use-lanyard": "^1.0.3",
    "use-sound": "^4.0.1"
  },
  "devDependencies": {
    "@babel/core": "^7.16.0",
    "@bpsmart/eslint-config-base": "^0.1.0",
    "@bpsmart/eslint-config-react": "^0.0.8",
    "@emotion/babel-plugin": "^11.3.0",
    "@emotion/css": "^11.5.0",
    "@emotion/server": "^11.4.0",
    "@fullhuman/postcss-purgecss": "^4.1.3",
    "@jsdevtools/rehype-toc": "^3.0.2",
    "@types/node": "^16.11.12",
    "@types/react": "^17.0.37",
    "@types/remove-markdown": "^0.3.1",
    "@typescript-eslint/eslint-plugin": "^5.6.0",
    "@typescript-eslint/parser": "^5.6.0",
    "autoprefixer": "^10.4.0",
    "cross-env": "^7.0.3",
    "cssnano": "^5.0.12",
    "eslint": "^8.4.1",
    "eslint-config-next": "12.0.7",
    "eslint-config-standard": "^16.0.3",
    "eslint-plugin-import": "^2.25.3",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^5.2.0",
    "eslint-plugin-react": "^7.27.1",
    "eslint-plugin-react-hooks": "^4.3.0",
    "globby": "12.0.2",
    "postcss": "^8.4.4",
    "postcss-calc": "^8.0.0",
    "postcss-flexbugs-fixes": "^5.0.2",
    "postcss-import": "^14.0.2",
    "postcss-preset-env": "^7.0.1",
    "prettier": "^2.5.1",
    "reading-time": "^1.5.0",
    "rehype": "^12.0.0",
    "rehype-autolink-headings": "^6.1.0",
    "rehype-code-titles": "^1.0.3",
    "rehype-prism-plus": "^1.1.3",
    "rehype-slug": "^5.0.0",
    "remark-gfm": "^3.0.1",
    "remove-markdown": "^0.3.0",
    "rimraf": "^3.0.2",
    "typescript": "^4.5.3",
    "xml": "^1.0.1"
  },
  "resolutions": {
    "preact": "10.6.2"
  },
  "prettier": {
    "arrowParens": "always",
    "singleQuote": true,
    "tabWidth": 2,
    "trailingComma": "all"
  }
}

/* eslint-disable @typescript-eslint/no-var-requires */
const { withContentlayer } = require('next-contentlayer');

const appHeaders = require('./headers');

const buildRedirect = (source, destination, permanent = true) => {
  return {
    source,
    destination,
    permanent,
  };
};

/**
 * @type {import('next').NextConfig}
 */
const defaultNextConfig = {
  swcMinify: true,
  reactStrictMode: true,
  experimental: {
    removeConsole: {
      exclude: ['error'],
    },
  },
  images: {
    domains: [
      'images.unsplash.com',
      'i.scdn.co',
      'spotify.com',
      'jahir.dev',
      'unavatar.now.sh',
      'unavatar.io',
      'lh3.googleusercontent.com',
      'cdn.discordapp.com',
    ],
  },
  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;
  },
  async headers() {
    return appHeaders;
  },
  async redirects() {
    return [
      /* Blog posts redirections */
      buildRedirect(
        '/blog/a-priori-care',
        'https://medium.com/@jahirfiquitiva/taking-a-priori-care-of-your-future-job-7ed24cf18ed2',
      ),
      buildRedirect(
        '/blog/md-iconography-guidelines',
        'https://stories.uplabs.com/what-google-missed-in-their-guidelines-for-material-design-iconography-daf9f88000ec',
      ),
      buildRedirect('/blog/post-of-fame', '/donate#thanks'),
      /* Old static assets paths to news */
      buildRedirect('/assets/:path*', '/static/:path*'),
      /* Needed for android dashboards */
      buildRedirect(
        '/static/images/me/me.jpg',
        '/static/images/jahir/jahir.jpg',
      ),
      /* Dashbud links */
      buildRedirect('/dashbud', 'https://dashbud.dev'),
      buildRedirect('/dashbud/:path*', 'https://dashbud.dev'),
      buildRedirect('/dashsetup', 'https://dashbud.dev'),
      buildRedirect('/dashsetup/:path*', 'https://dashbud.dev'),
      /* Other redirections */
      buildRedirect('/links', '/'),
      buildRedirect('/music', '/dashboard'),
      buildRedirect('/support', '/donate'),
      buildRedirect('/thanks', '/donate#thanks'),
      buildRedirect('/uses', '/blog/uses'),
      buildRedirect('/releases', '/gh-releases'),
      buildRedirect('/feed', '/feed.xml'),
      buildRedirect('/resume', '/share/Jahir-Fiquitiva-Resume.pdf'),
    ];
  },
};

module.exports = withContentlayer()(defaultNextConfig);

[jahirfiquitiva]

you're right @alany411 ... I think the order of the alias is important... it works fine! thank you so much! 😀🙌

[schickling]

@jahirfiquitiva can this issue be closed?

[jahirfiquitiva]

Sure... Thanks for the help