With prettier V3, opening code snippets generate an error

[adrienharnay]

Hello,

When clicking on the "+" icon in the side panel or using the CMD+K shortcut, this error happens:

View error

62829:63 Uncaught TypeError: Cannot read properties of undefined (reading 'replace')
    at unwrapJsx (62829:63:32)
    at formatCode (62829:94:25)
    at formatAndInsert (62829:128:10)
    at formatForInsertion (62829:142:7)
    at eval (44083:200:88)
    at updateReducer (76590:16664:22)
    at Object.useReducer (76590:17898:16)
    at useReducer (26735:1627:21)
    at StoreProvider (44083:352:78)
    at renderWithHooks (76590:16305:18)
    at updateFunctionComponent (76590:19583:20)
    at beginWork (76590:21596:16)
    at HTMLUnknownElement.callCallback (76590:4164:14)
    at Object.invokeGuardedCallbackDev (76590:4213:16)
    at invokeGuardedCallback (76590:4277:31)
    at beginWork$1 (76590:27446:7)
    at performUnitOfWork (76590:26552:12)
    at workLoopSync (76590:26461:5)
    at renderRootSync (76590:26429:7)
    at performSyncWorkOnRoot (76590:26080:20)
    at flushSyncCallbacks (76590:12042:22)
    at eval (76590:25646:13)
unwrapJsx @ 62829:63
formatCode @ 62829:94
formatAndInsert @ 62829:128
formatForInsertion @ 62829:142
eval @ 44083:200
updateReducer @ 76590:16664
useReducer @ 76590:17898
useReducer @ 26735:1627
StoreProvider @ 44083:352
renderWithHooks @ 76590:16305
updateFunctionComponent @ 76590:19583
beginWork @ 76590:21596
callCallback @ 76590:4164
invokeGuardedCallbackDev @ 76590:4213
invokeGuardedCallback @ 76590:4277
beginWork$1 @ 76590:27446
performUnitOfWork @ 76590:26552
workLoopSync @ 76590:26461
renderRootSync @ 76590:26429
performSyncWorkOnRoot @ 76590:26080
flushSyncCallbacks @ 76590:12042
eval @ 76590:25646
62829:63 Uncaught TypeError: Cannot read properties of undefined (reading 'replace')
    at unwrapJsx (62829:63:32)
    at formatCode (62829:94:25)
    at formatAndInsert (62829:128:10)
    at formatForInsertion (62829:142:7)
    at eval (44083:200:88)
    at updateReducer (76590:16664:22)
    at Object.useReducer (76590:17898:16)
    at useReducer (26735:1627:21)
    at StoreProvider (44083:352:78)
    at renderWithHooks (76590:16305:18)
    at updateFunctionComponent (76590:19583:20)
    at beginWork (76590:21596:16)
    at HTMLUnknownElement.callCallback (76590:4164:14)
    at Object.invokeGuardedCallbackDev (76590:4213:16)
    at invokeGuardedCallback (76590:4277:31)
    at beginWork$1 (76590:27446:7)
    at performUnitOfWork (76590:26552:12)
    at workLoopSync (76590:26461:5)
    at renderRootSync (76590:26429:7)
    at recoverFromConcurrentError (76590:25845:20)
    at performSyncWorkOnRoot (76590:26091:20)
    at flushSyncCallbacks (76590:12042:22)
    at eval (76590:25646:13)
unwrapJsx @ 62829:63
formatCode @ 62829:94
formatAndInsert @ 62829:128
formatForInsertion @ 62829:142
eval @ 44083:200
updateReducer @ 76590:16664
useReducer @ 76590:17898
useReducer @ 26735:1627
StoreProvider @ 44083:352
renderWithHooks @ 76590:16305
updateFunctionComponent @ 76590:19583
beginWork @ 76590:21596
callCallback @ 76590:4164
invokeGuardedCallbackDev @ 76590:4213
invokeGuardedCallback @ 76590:4277
beginWork$1 @ 76590:27446
performUnitOfWork @ 76590:26552
workLoopSync @ 76590:26461
renderRootSync @ 76590:26429
recoverFromConcurrentError @ 76590:25845
performSyncWorkOnRoot @ 76590:26091
flushSyncCallbacks @ 76590:12042
eval @ 76590:25646
react_devtools_backend_compact.js:13096 The above error occurred in the <StoreProvider> component:

    at StoreProvider (webpack-internal:///44083:348:5)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.
overrideMethod @ react_devtools_backend_compact.js:13096
logCapturedError @ 76590:18687
update.callback @ 76590:18715
callCallback @ 76590:13923
commitUpdateQueue @ 76590:13944
commitLayoutEffectOnFiber @ 76590:23386
commitLayoutMountEffects_complete @ 76590:24683
commitLayoutEffects_begin @ 76590:24669
commitLayoutEffects @ 76590:24607
commitRootImpl @ 76590:26818
commitRoot @ 76590:26677
performSyncWorkOnRoot @ 76590:26112
flushSyncCallbacks @ 76590:12042
eval @ 76590:25646
76590:12056 Uncaught TypeError: Cannot read properties of undefined (reading 'replace')
    at unwrapJsx (62829:63:32)
    at formatCode (62829:94:25)
    at formatAndInsert (62829:128:10)
    at formatForInsertion (62829:142:7)
    at eval (44083:200:88)
    at updateReducer (76590:16664:22)
    at Object.useReducer (76590:17898:16)
    at useReducer (26735:1627:21)
    at StoreProvider (44083:352:78)
    at renderWithHooks (76590:16305:18)
    at updateFunctionComponent (76590:19583:20)
    at beginWork (76590:21596:16)
    at beginWork$1 (76590:27421:14)
    at performUnitOfWork (76590:26552:12)
    at workLoopSync (76590:26461:5)
    at renderRootSync (76590:26429:7)
    at recoverFromConcurrentError (76590:25845:20)
    at performSyncWorkOnRoot (76590:26091:20)
    at flushSyncCallbacks (76590:12042:22)
    at eval (76590:25646:13)
unwrapJsx @ 62829:63
formatCode @ 62829:94
formatAndInsert @ 62829:128
formatForInsertion @ 62829:142
eval @ 44083:200
updateReducer @ 76590:16664
useReducer @ 76590:17898
useReducer @ 26735:1627
StoreProvider @ 44083:352
renderWithHooks @ 76590:16305
updateFunctionComponent @ 76590:19583
beginWork @ 76590:21596
beginWork$1 @ 76590:27421
performUnitOfWork @ 76590:26552
workLoopSync @ 76590:26461
renderRootSync @ 76590:26429
recoverFromConcurrentError @ 76590:25845
performSyncWorkOnRoot @ 76590:26091
flushSyncCallbacks @ 76590:12042
eval @ 76590:25646
78153:34 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'languages')
    at eval (78153:34:694)
    at Array.flatMap (<anonymous>)
    at lt (78153:34:681)
    at xo (78153:34:5414)
    at Rr (78153:44:273)
    at Object.eval (78153:46:1462)
    at runPrettier (62829:27:72)
    at formatCode (62829:83:24)
    at formatAndInsert (62829:128:10)
    at formatForInsertion (62829:142:7)
    at eval (44083:200:88)
    at updateReducer (76590:16664:22)
    at Object.useReducer (76590:17898:16)
    at useReducer (26735:1627:21)
    at StoreProvider (44083:352:78)
    at renderWithHooks (76590:16305:18)
    at updateFunctionComponent (76590:19583:20)
    at beginWork (76590:21596:16)
    at beginWork$1 (76590:27421:14)
    at performUnitOfWork (76590:26552:12)
    at workLoopSync (76590:26461:5)
    at renderRootSync (76590:26429:7)
    at performSyncWorkOnRoot (76590:26080:20)
    at flushSyncCallbacks (76590:12042:22)
    at eval (76590:25646:13)
eval @ 78153:34
lt @ 78153:34
xo @ 78153:34
Rr @ 78153:44
eval @ 78153:46
runPrettier @ 62829:27
formatCode @ 62829:83
formatAndInsert @ 62829:128
formatForInsertion @ 62829:142
eval @ 44083:200
updateReducer @ 76590:16664
useReducer @ 76590:17898
useReducer @ 26735:1627
StoreProvider @ 44083:352
renderWithHooks @ 76590:16305
updateFunctionComponent @ 76590:19583
beginWork @ 76590:21596
beginWork$1 @ 76590:27421
performUnitOfWork @ 76590:26552
workLoopSync @ 76590:26461
renderRootSync @ 76590:26429
performSyncWorkOnRoot @ 76590:26080
flushSyncCallbacks @ 76590:12042
eval @ 76590:25646
78153:34 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'languages')
    at eval (78153:34:694)
    at Array.flatMap (<anonymous>)
    at lt (78153:34:681)
    at xo (78153:34:5414)
    at Rr (78153:44:273)
    at Object.eval (78153:46:1462)
    at runPrettier (62829:27:72)
    at formatCode (62829:83:24)
    at formatAndInsert (62829:128:10)
    at formatForInsertion (62829:142:7)
    at eval (44083:200:88)
    at updateReducer (76590:16664:22)
    at Object.useReducer (76590:17898:16)
    at useReducer (26735:1627:21)
    at StoreProvider (44083:352:78)
    at renderWithHooks (76590:16305:18)
    at updateFunctionComponent (76590:19583:20)
    at beginWork (76590:21596:16)
    at HTMLUnknownElement.callCallback (76590:4164:14)
    at Object.invokeGuardedCallbackDev (76590:4213:16)
    at invokeGuardedCallback (76590:4277:31)
    at beginWork$1 (76590:27446:7)
    at performUnitOfWork (76590:26552:12)
    at workLoopSync (76590:26461:5)
    at renderRootSync (76590:26429:7)
    at performSyncWorkOnRoot (76590:26080:20)
    at flushSyncCallbacks (76590:12042:22)
    at eval (76590:25646:13)
eval @ 78153:34
lt @ 78153:34
xo @ 78153:34
Rr @ 78153:44
eval @ 78153:46
runPrettier @ 62829:27
formatCode @ 62829:83
formatAndInsert @ 62829:128
formatForInsertion @ 62829:142
eval @ 44083:200
updateReducer @ 76590:16664
useReducer @ 76590:17898
useReducer @ 26735:1627
StoreProvider @ 44083:352
renderWithHooks @ 76590:16305
updateFunctionComponent @ 76590:19583
beginWork @ 76590:21596
callCallback @ 76590:4164
invokeGuardedCallbackDev @ 76590:4213
invokeGuardedCallback @ 76590:4277
beginWork$1 @ 76590:27446
performUnitOfWork @ 76590:26552
workLoopSync @ 76590:26461
renderRootSync @ 76590:26429
performSyncWorkOnRoot @ 76590:26080
flushSyncCallbacks @ 76590:12042
eval @ 76590:25646
78153:34 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'languages')
    at eval (78153:34:694)
    at Array.flatMap (<anonymous>)
    at lt (78153:34:681)
    at xo (78153:34:5414)
    at Rr (78153:44:273)
    at Object.eval (78153:46:1462)
    at runPrettier (62829:27:72)
    at formatCode (62829:83:24)
    at formatAndInsert (62829:128:10)
    at formatForInsertion (62829:142:7)
    at eval (44083:200:88)
    at updateReducer (76590:16664:22)
    at Object.useReducer (76590:17898:16)
    at useReducer (26735:1627:21)
    at StoreProvider (44083:352:78)
    at renderWithHooks (76590:16305:18)
    at updateFunctionComponent (76590:19583:20)
    at beginWork (76590:21596:16)
    at beginWork$1 (76590:27421:14)
    at performUnitOfWork (76590:26552:12)
    at workLoopSync (76590:26461:5)
    at renderRootSync (76590:26429:7)
    at recoverFromConcurrentError (76590:25845:20)
    at performSyncWorkOnRoot (76590:26091:20)
    at flushSyncCallbacks (76590:12042:22)
    at eval (76590:25646:13)
eval @ 78153:34
lt @ 78153:34
xo @ 78153:34
Rr @ 78153:44
eval @ 78153:46
runPrettier @ 62829:27
formatCode @ 62829:83
formatAndInsert @ 62829:128
formatForInsertion @ 62829:142
eval @ 44083:200
updateReducer @ 76590:16664
useReducer @ 76590:17898
useReducer @ 26735:1627
StoreProvider @ 44083:352
renderWithHooks @ 76590:16305
updateFunctionComponent @ 76590:19583
beginWork @ 76590:21596
beginWork$1 @ 76590:27421
performUnitOfWork @ 76590:26552
workLoopSync @ 76590:26461
renderRootSync @ 76590:26429
recoverFromConcurrentError @ 76590:25845
performSyncWorkOnRoot @ 76590:26091
flushSyncCallbacks @ 76590:12042
eval @ 76590:25646
78153:34 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'languages')
    at eval (78153:34:694)
    at Array.flatMap (<anonymous>)
    at lt (78153:34:681)
    at xo (78153:34:5414)
    at Rr (78153:44:273)
    at Object.eval (78153:46:1462)
    at runPrettier (62829:27:72)
    at formatCode (62829:83:24)
    at formatAndInsert (62829:128:10)
    at formatForInsertion (62829:142:7)
    at eval (44083:200:88)
    at updateReducer (76590:16664:22)
    at Object.useReducer (76590:17898:16)
    at useReducer (26735:1627:21)
    at StoreProvider (44083:352:78)
    at renderWithHooks (76590:16305:18)
    at updateFunctionComponent (76590:19583:20)
    at beginWork (76590:21596:16)
    at HTMLUnknownElement.callCallback (76590:4164:14)
    at Object.invokeGuardedCallbackDev (76590:4213:16)
    at invokeGuardedCallback (76590:4277:31)
    at beginWork$1 (76590:27446:7)
    at performUnitOfWork (76590:26552:12)
    at workLoopSync (76590:26461:5)
    at renderRootSync (76590:26429:7)
    at recoverFromConcurrentError (76590:25845:20)
    at performSyncWorkOnRoot (76590:26091:20)
    at flushSyncCallbacks (76590:12042:22)
    at eval (76590:25646:13)
eval @ 78153:34
lt @ 78153:34
xo @ 78153:34
Rr @ 78153:44
eval @ 78153:46
runPrettier @ 62829:27
formatCode @ 62829:83
formatAndInsert @ 62829:128
formatForInsertion @ 62829:142
eval @ 44083:200
updateReducer @ 76590:16664
useReducer @ 76590:17898
useReducer @ 26735:1627
StoreProvider @ 44083:352
renderWithHooks @ 76590:16305
updateFunctionComponent @ 76590:19583
beginWork @ 76590:21596
callCallback @ 76590:4164
invokeGuardedCallbackDev @ 76590:4213
invokeGuardedCallback @ 76590:4277
beginWork$1 @ 76590:27446
performUnitOfWork @ 76590:26552
workLoopSync @ 76590:26461
renderRootSync @ 76590:26429
recoverFromConcurrentError @ 76590:25845
performSyncWorkOnRoot @ 76590:26091
flushSyncCallbacks @ 76590:12042
eval @ 76590:25646

This happens on 0.32.0 but not on 0.31.0.

Edit: even when downgrading I get an error. It seems a lot of internal utils have code: string but when logging, code is undefined.

Edit2: it seems related to prettier V3.

[askoufis]

Seems like maybe your project's version of prettier is interfering with the one playroom depends on.

The error itself might be due to prettier v3's API being entirely async. We'd likely need a bit of a refactor in order to upgrade to prettier v3, or maybe we could use https://github.com/prettier/prettier-synchronized.

EDIT: Seems like using @prettier/sync combined with prettier/standalone isn't possible.