import devtools from '@vue/devtools' gets into Vite production build

[segevfiner]

Version

6.4.3

Browser and OS info

Chrome 105 / macOS 12.6

Steps to reproduce

1. Create an empty vite project
2. Add import devtools from '@vue/devtools' &

   if (import.meta.env.MODE === 'development') {
     devtools.connect()
   }

3. Build the production build. @vue/devtools doesn't get tree shaken and gets into the production build. I have also seen cases of it importing node specific code which leads to an undefined import to emitter.

What is expected?

For it to be tree shaken so it is easy to include @vue/devtools standalone only for dev builds

What is actually happening?

It is not tree shaken

---

Without it being tree shaken, I will have to manually comment/uncomment it. I haven't found a way to direct it to tree shake @vue/devtools outside of modifying its package.json and adding "sideEffects": false. It still spews a huge amount of eval warnings despite this which I have no idea how to silence.

[segevfiner]

This rollup plugin can be used as a workaround:

    {
      name: 'vue-devtools-side-effects',
      transform(code, id, options?) {
        if (/@vue\/devtools\/index.js$/.test(id)) {
          return {
            code,
            moduleSideEffects: false,
            map: null,
          };
        }
      },
    },

Although you will still get a lot of eval warnings.

[TechAkayy]

Same here, and the size it adds to the production build is huge!

[Kilbourne]

It doesn't get into production build but the eval warnings are still there. Can these warnings be fixed? The warning is 'Error when using sourcemap for reporting an error: Can't resolve original location of error. Use of eval is strongly discouraged, as it poses security risks and may cause issues with minification' and it shows around 50times for build

[Stanzilla]

Looking for a solution for this as well

[bernardoadc]

Found it here:

// vite.config.js
  build: {
    rollupOptions: {
      onwarn: (warning, warn) => (warning.code !== 'EVAL') ? warn(warning) : undefined // suppress eval warnings (@vue/devtools)
    }
  }

[Kilbourne]

Can someone explain why the warnings appear in prod mode ( for what is used eval in this case?) ?