Bug: new jsx transform production

[hosseinmd]

React version:16.14.0

Steps To Reproduce

I config our monorepo project to support new JSX transform anything work find on development mode but when creating a build after run project this error printed on browser console.

react-dom.production.min.js:209 ReferenceError: _jsxs is not defined
    at _ (index.tsx:12)
    at Jo (react-dom.production.min.js:153)
    at Ou (react-dom.production.min.js:261)
    at gl (react-dom.production.min.js:246)
    at vl (react-dom.production.min.js:246)
    at ul (react-dom.production.min.js:239)
    at nl (react-dom.production.min.js:230)
    at Hl (react-dom.production.min.js:281)
    at react-dom.production.min.js:284
    at sl (react-dom.production.min.js:240)
iu @ react-dom.production.min.js:209
n.callback @ react-dom.production.min.js:226
mo @ react-dom.production.min.js:131
su @ react-dom.production.min.js:212
wl @ react-dom.production.min.js:255
t.unstable_runWithPriority @ scheduler.production.min.js:19
Yi @ react-dom.production.min.js:122
_l @ react-dom.production.min.js:248
ul @ react-dom.production.min.js:239
nl @ react-dom.production.min.js:230
Hl @ react-dom.production.min.js:281
(anonymous) @ react-dom.production.min.js:284
sl @ react-dom.production.min.js:240
Xl @ react-dom.production.min.js:284
t.render @ react-dom.production.min.js:290
(anonymous) @ renderApplication.js:23
run @ index.js:51
e.runApplication @ index.js:95
208 @ index.ts:6
a @ (index):1
t @ (index):1
r @ (index):1
(anonymous) @ main.5064ecd0.chunk.js:1
react-dom.production.min.js:256 Uncaught ReferenceError: _jsxs is not defined
    at _ (index.tsx:12)
    at Jo (react-dom.production.min.js:153)
    at Ou (react-dom.production.min.js:261)
    at gl (react-dom.production.min.js:246)
    at vl (react-dom.production.min.js:246)
    at ul (react-dom.production.min.js:239)
    at nl (react-dom.production.min.js:230)
    at Hl (react-dom.production.min.js:281)
    at react-dom.production.min.js:284
    at sl (react-dom.production.min.js:240)

Link to code example:

The current behavior

react-dom not working on production mode

The expected behavior

Work.

I tested that in react-native and they work well on dev and production mode both

[gaearon]

Can you share a minimal reproducing project? This would greatly help. I did manual testing of both production and development modes, and did not encounter this problem.

[gaearon]

I do wonder if there's something TypeScript-specific here at play.

[gaearon]

I created a new CRA project with 4.0 beta, turned on the new transform explicitly in the webpack config, and added React 16.14. I made a production build, and did not observe this issue. I think something is being configured incorrectly, but I can't say without seeing your configs and a minimal reproducing project.

[gaearon]

I also just tried using TS 4.1 beta with CRA, switching the output mode to react-jsx, and that worked with production build too.

I wonder if you might have some special config that e.g. rewrites React to be an external (like a UMD bundle). UMD bundles don't have these methods — but you shouldn't be rewriting react/jsx-runtime imports to a UMD bundle either way.

[hosseinmd]

I don't know how to reproducing the project that is somewhat hard.

Thanks for the explanation, I will try to find the problem and let you know.

[gaearon]

Generally a good way to reproduce an issue like this is to delete all files from your project except from the root component and check if it still reproes (it should given it's something related to the build).

[gaearon]

I'm going to close assuming this is a configuration problem. If you narrow it down to React, please feel free to file a new issue with a repro case.

[hosseinmd]

I couldn't found what is wrong, but I solved that by adding this code to Webpack config.

 [
      "@babel/plugin-transform-react-jsx",
      {
        runtime: env === "production" ? "classic" : "automatic",
      },
    ],

[gaearon]

This doesn't really "solve" the problem — just works around it. I strongly recommend against this because now code that compiles in development (e.g. without a React import) would break for you in production. If you can't make a minimal reproducing project to figure out what's wrong, I suggest to stick with the classic transform for now.

[hosseinmd]

Please check this https://github.com/hosseinmd/test-new-jsx