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

vuejs / devtools-v6

⚙️ Browser devtools extension for debugging Vue.js applications.

https://devtools-v6.vuejs.org/

MIT License

24.69k stars 4.14k forks source link

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

Closed segevfiner closed 9 months ago

segevfiner commented 1 year ago

Vue devtools version

6.5.0

Link to minimal reproduction

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

Steps to reproduce & screenshots

pnpm build in packages/foo
pnpm dev in apps/bar
Open the browser & the Vue devtools.
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.

screenshot

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

Azurewarth0920 commented 1 year ago

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

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

segevfiner commented 1 year ago

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

s-nesbigall commented 1 year ago

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