Compiler error on component preview page 'react/jsx-runtime' with compilers/react-typescript

[tranlehaiquan]

Describe the bug

I have created an component with create-react-app and bit.envs/compilers/react-typescript@3.1.65. I try to preview after publish but got error 'react/jsx-runtime' can't resolve.

Steps to Reproduce

1. Create project with create-react-app --typescript
2. Install compiler bit.envs/compilers/react-typescript@3.1.65
3. Publish and preview component

Expected Behavior

I would expect a preview to appear with no compilation error.

Screenshots, exceptions and logs

If applicable, add screenshots, exceptions, and logs to help explain your problem.

Specifications

• Bit version: 14.8.8
• Node version: v12.19.0
• npm / yarn version: 6.14.8
• Platform: windows 10
• Bit compiler (include version): bit.envs/compilers/react-typescript@3.1.65
• Bit tester (include version):

[Dennnnny]

same issue here, and I did not use Typescript :(
I totally follow the tutorial , but eventually got this issue when preview on bit.dev
but, It seems works on another projects, and I don't know why it can not preview on bit.dev

[tranlehaiquan]

@Dennnnny I copy title from this issue and add Typescript (#3729). I don't know but the issue's author said "It working again" :))

[effinrich]

Hi,
I'm getting the same error:
module not found: Can't resolve 'react/jsx-runtime'

Specs:

• bit version : 14.8.8
• node version : v14.5.0
• npm version : 6.14.5
• yarn version : 1.22.10
• platform : darwin
• React: 17.0.1
• Bit compiler (include version): "bit.envs/compilers/react@2.0.0"
• Bit tester (include version): "bit.envs/testers/jest@22.4.3"

Is there a workaround? Appears to have started over a week ago.

[stevepepple]

I'm seeing the same thing. Here's a public example:
https://bit.dev/vibemap/components/project-list

[tranlehaiquan]

:)) it seems too many bugs need to fix before this

[littlefinger42]

This is a pretty big bug and stopping new projects in react

[effinrich]

This is a pretty big bug and stopping new projects in react

Yes, it completely upended a project I started for a new job as senior frontend manager. I made the proposal with a bit demo 2 weeks prior. When development started I immediately hit this critical error blocking my path. I’m now a day away from completing my own version of bit. So I guess there was a silver lining, but hugely frustrating nonetheless.

[tranlehaiquan]

Yes, and no one care about this?

[jacobaclarke]

I made a compiler for my own repo that works for me. It is at https://github.com/j718/j718.envs. You can install with bit import -c j718.envs/nextjs

Have not tested on a ton of cases but worked on my own components. I hope it helps!

[rapturt9]

For me, I just precompiled the React code with an older version and the copy pasted the code for bit to compile.

[drkstr101]

Does this just need a quick PR to patch dependencies, or are there design issues holding back the upgrade?

I'll see if I can squeeze in a 4h block tomorrow to get this feature working. Seems like a good investment. Moving on if it takes longer than this.

[tahins]

I was also facing this issue and I wasn't using Typescript. Downgrading the React compiler from version 2.0.0 to 1.0.30 worked for me.

[drkstr101]

Yup, I found it was fixable locally by reverting upgrade to --latest, but I didn't spend any time trying to narrow it down. Thanks for the tip!

[grelas]

Followed the tutorial which installed bit.envs/compilers/react@2.0.0 and am also getting this error https://bit.dev/grelas/react-tutorial/product-list.

[useless-stuff]

Same here, we are exploring bit.dev for the first time, not a great start :)
We only use Typescript and we don't want to use an old version of react/typescript on a brand new project.

Module not found: Can't resolve 'react/jsx-runtime' in [...]

[curgery]

Can't thank you enough tahins ...,
RLG

[DavLac]

Using Typescript + React 17.0.1

moving from "react-typescript@4.0.0" to "react-typescript@3.0.0" worked for me

"bit": {
    "env": {
      "compiler": "bit.envs/compilers/react-typescript@3.0.0"
    },
    "componentsDefaultDirectory": "components/{name}",
    "packageManager": "npm"
  }

[kshitiz-orizion]

@DavLac Thanks it worked for me!

[itaymendel]

Hi

Sorry for the late response here. Bit v15 should resolve most React-TS issues and improve workflow drastically.

We'll start rolling out v15 of Bit this week, please reach out to me privately on the public slack community for a sneak peek and getting early access to it.

[GimpMaster]

@itaymendel - I am now experiencing this issue. Where are you at on Bit v15?

[MelodicCrypter]

@itaymendel - I am also experiencing this one just now. Using TypeScript compiler.

[GimpMaster]

I discovered my issue was using react-typescript compiler 4.0.0 while only using React 16 in my project. 4.0.0 required React 17.