Vue version

3.2.37

Link to minimal reproduction

https://stackblitz.com/edit/vitejs-vite-nftks5

Steps to reproduce

Our project is too complex to be reproduced in StackBlitz so I tried to create a demo project that is close to the original. There is a standard library that contains all of our components (too many components to be in the demo build) and a folder containing the app.

What is expected?

The app should be working in production mode.

What is actually happening?

We have a Vue 2 project migrated in Vue 3. Everything is working fine on dev mode but the error "Cannot read properties of null (reading 'refs')" shows up in production mode and the app is not rendered. This error seems to be linked with the attribute ref that we use to access to a component of our App because when we remove the component's tag the error disappears.

In the demo project the component to look at is Standard.

System Info

No response

Any additional comments?

No response

Please add the steps necessary to demonstrate the issue in the linked stackblitz project.

It is fixed. I just removed the --inline-vue in the build command in the library's package.json and everything is working fine, just as in dev mode. I don't know if this can help the community in any way so I leave this comment and close the issue.

In case someone else runs into this, I noticed that I had some element refs that were wrapped in template strings ``, which caused the same error. So making the following changes to my refs solved the problem:

- <div :ref="`annotationLayer`" />
+ <div ref="annotationLayer" />

For fun i tried passing a normal string literal (:ref="'annotationLayer'") and this seems to work. It would be interesting to know more about why template literals are not allowed.