Deploy on Vercel - Module not found: Package path ./compat/jsx-runtime.js is not exported from package

[johanguse]

Hey I can't deploy on Vercel anymore... after update to last version I got this error:

--
16:32:47.489 | warn - Preview features are not covered by semver, may introduce breaking changes, and can change at any time.
16:32:56.935 | Failed to compile.
16:32:56.936 |  
16:32:56.936 | ./node_modules/mdx-bundler/dist/client.js
16:32:56.936 | Module not found: Package path ./compat/jsx-runtime.js is not exported from package /vercel/path0/node_modules/preact (see exports field in /vercel/path0/node_modules/preact/package.json)
16:32:56.937 |  
16:32:56.937 | Import trace for requested module:
16:32:56.937 | ./node_modules/mdx-bundler/client/index.js
16:32:56.937 | ./components/MDXComponents.js
16:32:56.937 | ./pages/about.js
16:32:56.937 |  
16:32:56.938 |  
16:32:56.938 | > Build failed because of webpack errors
16:32:56.961 | error Command failed with exit code 1.
16:32:56.961 | info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
16:32:56.984 | Error: Command "CI= yarn build" exited with 1

package.json
{ "name": "tailwind-nextjs-starter-blog", "version": "1.2.1", "private": true, "scripts": { "start": "cross-env SOCKET=true node ./scripts/next-remote-watch.js ./data", "dev": "next dev", "build": "next build && node ./scripts/generate-sitemap", "serve": "next start", "analyze": "cross-env ANALYZE=true next build", "lint": "next lint --fix --dir pages --dir components --dir lib --dir layouts --dir scripts", "prepare": "husky install" }, "dependencies": { "@mailchimp/mailchimp_marketing": "^3.0.58", "@tailwindcss/forms": "^0.3.2", "@tailwindcss/typography": "^0.4.0", "autoprefixer": "^10.2.5", "esbuild": "^0.12.15", "github-slugger": "^1.3.0", "gray-matter": "^4.0.2", "image-size": "1.0.0", "mdx-bundler": "^6.0.1", "next": "12.0.3", "next-themes": "^0.0.14", "postcss": "^8.3.5", "preact": "^10.5.13", "react": "17.0.2", "react-dom": "17.0.2", "reading-time": "1.3.0", "rehype-autolink-headings": "^6.0.0", "rehype-citation": "^0.1.1", "rehype-katex": "^6.0.0", "rehype-prism-plus": "^1.1.3", "rehype-slug": "^5.0.0", "remark-footnotes": "^4.0.0", "remark-gfm": "^2.0.0", "remark-math": "^5.0.0", "sharp": "^0.28.3", "smoothscroll-polyfill": "^0.4.4", "tailwindcss": "^2.2.2", "unist-util-visit": "^4.0.0" }, "devDependencies": { "@next/bundle-analyzer": "12.0.3", "@svgr/webpack": "^5.5.0", "cross-env": "^7.0.3", "dedent": "^0.7.0", "eslint": "^7.29.0", "eslint-config-next": "12.0.3", "eslint-config-prettier": "^8.3.0", "eslint-plugin-jsx-a11y": "^6.4.1", "eslint-plugin-prettier": "^3.3.1", "file-loader": "^6.0.0", "globby": "11.0.3", "husky": "^6.0.0", "inquirer": "^8.1.1", "lint-staged": "^11.0.0", "next-remote-watch": "^1.0.0", "socket.io": "^4.1.3", "socket.io-client": "^4.1.3", "prettier": "2.2.1" }, "lint-staged": { "*.+(js|jsx|ts|tsx)": [ "eslint --fix" ], "*.+(js|jsx|ts|tsx|json|css|md|mdx)": [ "prettier --write" ] } }

[timlrx]

It works on local build but not vercel? That's strange. I last deployed it 3 days ago with no issues. The logs suggest that the problem is with mdx-bundler.

Is your repo public and could you link it over here? Thanks

[johanguse]

Hey @timlrx I made it public now. Here is: https://github.com/johanguse/johanguse-dev
Correct local works fine, only on Vercel has this problem. To make sure I've clone this repo above and run again in my maschine and works fine.
Thank you for support

[timlrx]

It turns out that there is an issue with the newest version of preact and nextjs. See vercel/next.js#31539, vercel/next.js#31538

It should have been resolved but upgrading to the latest version of preact does not fix it for me. Will have to re-examine the configurations or wait for someone else to figure it out.

Meanwhile I suggest fixing preact to 10.5.15.

[johanguse]

Hey @timlrx thanks for the support. I`ve update preact to 10.5.15 and still getting error... I need to waiting the fix from Vercel team?

My commit: johanguse/johanguse-dev@2da0a7e

[timlrx]

It has to be exact - "preact": "10.5.15"

On a side note, I have tried changing the setup to use next-plugin-preact with preact 10.6.2 and and nextjs 12.0.5. But it seems there is some issue between preact and mdx-bundler as well so I recommend just staying with 10.5.15 for the time being.

[PsyGik]

FWIW, I was facing this on local as well as on CI. I managed to fix (re: workaround) by updating the aliases in next.config.js.

Object.assign(config.resolve.alias, {
        'react/jsx-runtime.js': 'preact/compat/jsx-runtime',
        react: 'preact/compat',
        'react-dom/test-utils': 'preact/test-utils',
        'react-dom': 'preact/compat',
      })

NOTE: 'react/jsx-runtime.js': 'preact/compat/jsx-runtime', has to be first in the list

[timlrx]

Thanks, this does the trick - yes, the order matters (but it's not in the same order as the preact docs).

[johanguse]

Thank you @timlrx and @PsyGik