Bun React JSX-Dev-Runtime Cannot Find Module / jsxDEV Is Not A Function Error
Preface
We're using Bun (https://bun.sh/) for some repositories - and as a still young project, it has some quirks. Recording one of those in case it's encountered elsewhere.
Error case
We had a situation when an NPM package built with Bun was working fine while using locally, and build that included the package passed well, but when the final build (of the app that used the Bun-built package) was loaded from CDN, it failed with following:
TypeError: (0 , yK.jsxDEV) is not a function
at C$ (index. )s:1:46881)
at of (react-dom.production.min.js:167:137) at s (react-dom.production.min. js:290:337) at sZ (react-dom production.min. js: 280:389) at react-dom.production.min.js:280:320
at sx (react-dom.production.min.js:280:325) at sB (react-dom.production.min.js:271:88)
at sW (react-dom-production.min.js:273:300) at iu (react-dom.production.min.js: 127:105) at react-dom.production.min.js:267:273
When investigating locally, somewhat different behaviour was observed - the package was failing with the following error (package names generalised):
@parcel/core: Failed to resolve 'exportedThing' from './node_modules/somepackage/dist/index.js'
/Users/user/devel/project/node_modules/somepackage/dist/index.js:1:34428
> 1 | from"exportedThing";import{a as hs,b as ms}from"somePackage";import{jsxDEV as gs}from"react/jsx-dev-runtime";var Di=({children:i})=>{const{locale:e}=ms();return gs(hs,{locale:e,localeData:us,children:i}
> | ^^^^^^^^^^^^^^^^^^
2 |
@parcel/resolver-default: Cannot find module 'exportedThing'
Those were somewhat obscure and misleading - the keywords are "jsxDEV" and "react/jsx-dev-runtime" - the app was running on production, yet required some dev resources.
Solution
The solution was to prefix the Bun build command in package.json
(for the package build) with NODE_ENV=production
, like e.g. in our case:
"build": "NODE_ENV=production bun build.ts",