Components with forwardRef are not rendered

[kelkes]

Describe the bug

Trying to a component build with forwardRef in Preview.js results in various errors messages.

Reproduction

(Using my example Repo as reference here)

1. Open index.tsx
2. Open Preview for Input component
3. See error in previewjs log

Preview.js version

v1.13.0

Framework

React 18.2.0

System Info

System:
    OS: Linux 5.15 Ubuntu 22.04.1 LTS 22.04.1 LTS (Jammy Jellyfish)
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Memory: 22.85 GB / 30.82 GB
    Container: Yes
    Shell: 5.8.1 - /bin/zsh
  Binaries:
    Node: 18.7.0 - ~/.nvm/versions/node/v18.7.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v18.7.0/bin/yarn
    npm: 8.19.2 - ~/.nvm/versions/node/v18.7.0/bin/npm
  IDEs:
    Nano: 6.2 - /usr/bin/nano
    VSCode: 1.71.0 - /snap/bin/code
    Vim: 8.2 - /usr/bin/vim
  Browsers:
    Chrome: 105.0.5195.125
    Firefox: 104.0.2

Used Package Manager

npm

Extension logs (useful for crashes)

No response

Preview logs (useful for rendering errors)

[8:25:15 AM] Warning: Unexpected ref object provided for select. Use either a ref-setter function or React.createRef().
    at select
    at http://localhost:3140/preview/node_modules/.previewjs/v7.0.0/vite/deps/chunk-S4HW63PM.js?v=34ee91d6:3908:46
    at SelectField2 (http://localhost:3140/preview/node_modules/.previewjs/v7.0.0/vite/deps/chunk-S4HW63PM.js?v=34ee91d6:26652:11)
    at div
    at http://localhost:3140/preview/node_modules/.previewjs/v7.0.0/vite/deps/chunk-S4HW63PM.js?v=34ee91d6:3908:46
    at http://localhost:3140/preview/node_modules/.previewjs/v7.0.0/vite/deps/chunk-S4HW63PM.js?v=34ee91d6:26664:19
    at div
    at http://localhost:3140/preview/node_modules/.previewjs/v7.0.0/vite/deps/chunk-S4HW63PM.js?v=34ee91d6:3908:46
    at FormControl2 (http://localhost:3140/preview/node_modules/.previewjs/v7.0.0/vite/deps/chunk-S4HW63PM.js?v=34ee91d6:16974:19)
    at FormControlWrapper (http://localhost:3140/preview/src/components/form-control-wrapper.tsx:10:3)
    at http://localhost:3140/preview/src/components/form-controls.tsx:116:5
    at EnvironmentProvider (http://localhost:3140/preview/node_modules/.previewjs/v7.0.0/vite/deps/chunk-S4HW63PM.js?v=34ee91d6:20429:11)
    at ColorModeProvider (http://localhost:3140/preview/node_modules/.previewjs/v7.0.0/vite/deps/chunk-S4HW63PM.js?v=34ee91d6:1047:5)
    at ThemeProvider2 (http://localhost:3140/preview/node_modules/.previewjs/v7.0.0/vite/deps/chunk-S4HW63PM.js?v=34ee91d6:3935:45)
    at ThemeProvider3 (http://localhost:3140/preview/node_modules/.previewjs/v7.0.0/vite/deps/chunk-S4HW63PM.js?v=34ee91d6:5515:11)
    at ChakraProvider (http://localhost:3140/preview/node_modules/.previewjs/v7.0.0/vite/deps/chunk-S4HW63PM.js?v=34ee91d6:34899:5)
    at ChakraProvider2 (http://localhost:3140/preview/node_modules/.previewjs/v7.0.0/vite/deps/chunk-S4HW63PM.js?v=34ee91d6:34923:3)
    at IntlProvider3 (http://localhost:3140/preview/node_modules/.previewjs/v7.0.0/vite/deps/react-intl.js?v=34ee91d6:4087:43)
    at PreviewWrapper (http://localhost:3140/preview/src/preview-wrapper.jsx:6:27)
    at Renderer
[8:25:15 AM] TypeError: Cannot add property current, object is not extensible
    at commitAttachRef (http://localhost:3140/preview/node_modules/.previewjs/v7.0.0/vite/deps/chunk-LGNAA2TQ.js?v=34ee91d6:16823:27)
    at commitLayoutEffectOnFiber (http://localhost:3140/preview/node_modules/.previewjs/v7.0.0/vite/deps/chunk-LGNAA2TQ.js?v=34ee91d6:16693:17)
    at commitLayoutMountEffects_complete (http://localhost:3140/preview/node_modules/.previewjs/v7.0.0/vite/deps/chunk-LGNAA2TQ.js?v=34ee91d6:17503:17)
    at commitLayoutEffects_begin (http://localhost:3140/preview/node_modules/.previewjs/v7.0.0/vite/deps/chunk-LGNAA2TQ.js?v=34ee91d6:17492:15)
    at commitLayoutEffects (http://localhost:3140/preview/node_modules/.previewjs/v7.0.0/vite/deps/chunk-LGNAA2TQ.js?v=34ee91d6:17444:11)
    at commitRootImpl (http://localhost:3140/preview/node_modules/.previewjs/v7.0.0/vite/deps/chunk-LGNAA2TQ.js?v=34ee91d6:18848:13)
    at commitRoot (http://localhost:3140/preview/node_modules/.previewjs/v7.0.0/vite/deps/chunk-LGNAA2TQ.js?v=34ee91d6:18772:13)
    at finishConcurrentRender (http://localhost:3140/preview/node_modules/.previewjs/v7.0.0/vite/deps/chunk-LGNAA2TQ.js?v=34ee91d6:18301:15)
    at performConcurrentWorkOnRoot (http://localhost:3140/preview/node_modules/.previewjs/v7.0.0/vite/deps/chunk-LGNAA2TQ.js?v=34ee91d6:18215:15)
    at workLoop (http://localhost:3140/preview/node_modules/.previewjs/v7.0.0/vite/deps/chunk-LGNAA2TQ.js?v=34ee91d6:197:42)
[8:25:15 AM] TypeError: Cannot add property current, object is not extensible
    at safelyDetachRef (http://localhost:3140/preview/node_modules/.previewjs/v7.0.0/vite/deps/chunk-LGNAA2TQ.js?v=34ee91d6:16265:27)
    at commitDeletionEffectsOnFiber (http://localhost:3140/preview/node_modules/.previewjs/v7.0.0/vite/deps/chunk-LGNAA2TQ.js?v=34ee91d6:17025:17)
    at recursivelyTraverseDeletionEffects (http://localhost:3140/preview/node_modules/.previewjs/v7.0.0/vite/deps/chunk-LGNAA2TQ.js?v=34ee91d6:17016:13)
    at commitDeletionEffectsOnFiber (http://localhost:3140/preview/node_modules/.previewjs/v7.0.0/vite/deps/chunk-LGNAA2TQ.js?v=34ee91d6:17107:15)
    at recursivelyTraverseDeletionEffects (http://localhost:3140/preview/node_modules/.previewjs/v7.0.0/vite/deps/chunk-LGNAA2TQ.js?v=34ee91d6:17016:13)
    at commitDeletionEffectsOnFiber (http://localhost:3140/preview/node_modules/.previewjs/v7.0.0/vite/deps/chunk-LGNAA2TQ.js?v=34ee91d6:17107:15)
    at recursivelyTraverseDeletionEffects (http://localhost:3140/preview/node_modules/.previewjs/v7.0.0/vite/deps/chunk-LGNAA2TQ.js?v=34ee91d6:17016:13)
    at commitDeletionEffectsOnFiber (http://localhost:3140/preview/node_modules/.previewjs/v7.0.0/vite/deps/chunk-LGNAA2TQ.js?v=34ee91d6:17033:17)
    at recursivelyTraverseDeletionEffects (http://localhost:3140/preview/node_modules/.previewjs/v7.0.0/vite/deps/chunk-LGNAA2TQ.js?v=34ee91d6:17016:13)
    at commitDeletionEffectsOnFiber (http://localhost:3140/preview/node_modules/.previewjs/v7.0.0/vite/deps/chunk-LGNAA2TQ.js?v=34ee91d6:17107:15)
[8:25:15 AM] The above error occurred in the <select> component:

    at select
    at http://localhost:3140/preview/node_modules/.previewjs/v7.0.0/vite/deps/chunk-S4HW63PM.js?v=34ee91d6:3908:46
    at SelectField2 (http://localhost:3140/preview/node_modules/.previewjs/v7.0.0/vite/deps/chunk-S4HW63PM.js?v=34ee91d6:26652:11)
    at div
    at http://localhost:3140/preview/node_modules/.previewjs/v7.0.0/vite/deps/chunk-S4HW63PM.js?v=34ee91d6:3908:46
    at http://localhost:3140/preview/node_modules/.previewjs/v7.0.0/vite/deps/chunk-S4HW63PM.js?v=34ee91d6:26664:19
    at div
    at http://localhost:3140/preview/node_modules/.previewjs/v7.0.0/vite/deps/chunk-S4HW63PM.js?v=34ee91d6:3908:46
    at FormControl2 (http://localhost:3140/preview/node_modules/.previewjs/v7.0.0/vite/deps/chunk-S4HW63PM.js?v=34ee91d6:16974:19)
    at FormControlWrapper (http://localhost:3140/preview/src/components/form-control-wrapper.tsx:10:3)
    at http://localhost:3140/preview/src/components/form-controls.tsx:116:5
    at EnvironmentProvider (http://localhost:3140/preview/node_modules/.previewjs/v7.0.0/vite/deps/chunk-S4HW63PM.js?v=34ee91d6:20429:11)
    at ColorModeProvider (http://localhost:3140/preview/node_modules/.previewjs/v7.0.0/vite/deps/chunk-S4HW63PM.js?v=34ee91d6:1047:5)
    at ThemeProvider2 (http://localhost:3140/preview/node_modules/.previewjs/v7.0.0/vite/deps/chunk-S4HW63PM.js?v=34ee91d6:3935:45)
    at ThemeProvider3 (http://localhost:3140/preview/node_modules/.previewjs/v7.0.0/vite/deps/chunk-S4HW63PM.js?v=34ee91d6:5515:11)
    at ChakraProvider (http://localhost:3140/preview/node_modules/.previewjs/v7.0.0/vite/deps/chunk-S4HW63PM.js?v=34ee91d6:34899:5)
    at ChakraProvider2 (http://localhost:3140/preview/node_modules/.previewjs/v7.0.0/vite/deps/chunk-S4HW63PM.js?v=34ee91d6:34923:3)
    at IntlProvider3 (http://localhost:3140/preview/node_modules/.previewjs/v7.0.0/vite/deps/react-intl.js?v=34ee91d6:4087:43)
    at PreviewWrapper (http://localhost:3140/preview/src/preview-wrapper.jsx:6:27)
    at Renderer

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.
[8:25:15 AM] The above error occurred in the <Renderer> component:

    at Renderer

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.

Repo link (if available)

https://github.com/trigo-at/previewjs-forwardref-error

(See Input component in index.tsx)

Anything else?

No response