Vue devtools doesn't show setup state for a component imported from a Vite built Vue library

[segevfiner]

Vue devtools version

6.5.0

Link to minimal reproduction

https://github.com/segevfiner/vite-devtools-lib-issue

Steps to reproduce & screenshots

1. pnpm build in packages/foo
2. pnpm dev in apps/bar
3. Open the browser & the Vue devtools.
4. Check the inspector for the HelloWorld component.

If you switch the import in apps/bar/src/App.vue to import the HelloWorld component from ./components/HelloWorld.vue instead, the setup state does show in the Vue devtools.

What is expected?

It shows setup state for the component imported from the foo library.

What is actually happening?

It doesn't.

System Info

System:
    OS: macOS 13.3.1
    CPU: (10) arm64 Apple M1 Pro
    Memory: 104.58 MB / 16.00 GB
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 16.20.0 - ~/.nvm/versions/node/v16.20.0/bin/node
    Yarn: 1.22.19 - ~/.nvm/versions/node/v16.20.0/bin/yarn
    npm: 9.6.5 - ~/.nvm/versions/node/v16.20.0/bin/npm
  Browsers:
    Chrome: 112.0.5615.137
    Safari: 16.4

Any additional comments?

No response

[Azurewarth0920]

It is the limitation on the production build.

The devtool relies on the property setupState in the instance when development.
But the setupState is not exposed in the production mode. In other words, you cannot inspect the internal state of compiled component.

[segevfiner]

Can we tweak the build to produce a build conditional on process.env.NODE_ENV for production vs development build so that the library has debugging available when built as such?

[Azurewarth0920]

Can we tweak the build to produce a build conditional on process.env.NODE_ENV for production vs development build so that the library has debugging available when built as such?

Nope, most of the libraries are pre-built, so when importing the libraries they are already in "production mode".

Then I found another approach to solve this and pulled a request.

[segevfiner]

I'm talking about tweaking the build process of my own library to support such a mode. As a flag to vite plugin for vue or something.

[Azurewarth0920]

I'm talking about tweaking the build process of my own library to support such a mode. As a flag to plugin vue or something.

At this time, due to the limitation of the compiler. The answer is NO.
Or you can try not to compile your library and import .vue file directly.

[segevfiner]

So I guess this is a feature request to the compiler. I'll figure out what's the right repo to request that

[Azurewarth0920]

Somehow I think it is the mis-implementation on devtool.

It will be fixed by https://github.com/vuejs/devtools/pull/2091

[segevfiner]

So this might also tie into vitejs/vite-plugin-vue#36 which was about the name but I guess there are also other differences in building components between release and debug.

[s-nesbigall]

Any news on this? I still have this problem in 6.5.1. It seems the merge request never got accepted.