[Live] optional chaining and null coalescing not supported

[csantos-nydig]

Is there an existing issue for this?

• I have searched the existing issues

Code of Conduct

• I agree to follow this project's Code of Conduct

Code Sandbox link

https://codesandbox.io/p/devbox/react-live-optional-chaining-q2qwy2?file=%2Fsrc%2FApp.tsx%3A4%2C1-17%2C2

Bug report

cannot use optional chaining (something.foo?.bar) nor null coalescing (?? '')

Steps

1. Go to the linked codesandbox
2. Notice the error

This is the live code I'm trying to use:

function Example() {
  const something = {};

  return (
    <h3 style={{
      background: 'darkslateblue',
      color: 'white',
      padding: 8,
      borderRadius: 4
    }}>
      {`Hello World! 👋 ${something.foo?.bar ?? ''}`}
    </h3>
  )
}

Versions

• react: 18
• vite: 5.1.6
• react-live: 4.1.6

Additional context

The same exact live code works fine in your Demo page 🤨

I even cloned this repository locally and tested the same exact code in your Storybook examples, and it works fine.

So, I'm not sure what is different from the version you have running in your demo versus what is published via v4.1.6

Additional context

FWIW: the same exact code works fine in react-live@3.2.0, here the v3.2.0 codesandbox

[carbonrobot]

I forked your working sandbox and changed the version and it seems to be working. I'm not sure what the difference between the two sandboxes is.

https://codesandbox.io/p/devbox/react-live-v3-optional-chaining-forked-nhdwhv

[csantos-nydig]

I forked your working sandbox and changed the version and it seems to be working. I'm not sure what the difference between the two sandboxes is.

codesandbox.io/p/devbox/react-live-v3-optional-chaining-forked-nhdwhv

did you restart the DEV server after changing the version? I had the same "experience" when forking from 4.x to 3.x.

---

Not sure how tied react-live is with docusaurus, but the issue can be reproduced in their live docs too (they use react-live@4.1.6 too) and in their codesanboxes

• https://docusaurus.io/docs/markdown-features/code-blocks#interactive-code-editor
• https://codesandbox.io/p/devbox/prod-monad-7gh39v?file=%2Fdocusaurus.config.ts

[carbonrobot]

Interesting. I also see it doesn't work on the Docusaurus page, but it does work on our own docs page

[csantos-nydig]

Indeed, cross-sharing my findings FWIW: facebook/docusaurus#9809 (comment)

[csantos-nydig]

Only thing I see different, but IMO should not matter (?), is that your docs page and storybook and all local code is handled by pnpm; while us as consumers (codesandbox, direct users, docusaurus users) install react-live@4.x via npm/yarn.... but again, I don't think it matters.

or whatever is published to npm is, somehow, different from what "you use locally" for your docs page/storybook/etc. (which also doesn't make sense either)

[csantos-nydig]

@childrentime said facebook/docusaurus#9809 (comment) & facebook/docusaurus#9809 (comment)

---

It seems to be fixed in #383 (merged to master on Feb 5)

but the latest version of this pkg is 4.1.6 and it was released Feb 2 based on https://www.npmjs.com/package/react-live/v/4.1.6 and https://github.com/FormidableLabs/react-live/releases/tag/react-live%404.1.6

So first: I'm not sure how is this working in your page @childrentime https://www.reactuse.com/element/useActiveElement 😅 See #389 (comment)

but, Second: it seems we just need to release a new version to include #383

That would explain why it works for you (react-live) locally (storybook) and in your website: because it uses the code from master to build these elements.... and doesn't work for us (npm consumers)

[csantos-nydig]

mini update @childrentime - it works in your example because you use noInline prop. it fails if we update your example to this diff

-```tsx live noInline
+```tsx live
 
 function Demo() {
   const arr = [1, 2, 3, 4, 5, 6];
@@ -32,10 +32,8 @@
     </div>
   );
 };
-
-render(<Demo/>)

---

So, yes, if the fix if #383 (and it seems it is, because it works in react-live docs site, we are missing to release a new version to include #383

[carbonrobot]

Aha! That release got missed in our automation bc the changeset was not in the original merge.

It's now released in https://github.com/FormidableLabs/react-live/releases/tag/react-live%404.1.7

[csantos-nydig]

thanks @carbonrobot ! I've installed 4.1.7 and the issue is not longer present 💪