Vue3 + Vite web component bundling - process is not defined

[silvester-pari]

Minimal reproduction

https://github.com/silvester-pari/vite-vue3-webcomponent

Question

Hello, I am following this guide to create web components with vue (using SFC), and displaying them in the dev preview works fine. When bundling, however, I run into the console error Uncaught ReferenceError: process is not defined.

I tried setting

  define: {
    "process.env": process.env
  }

in the vite.config.js as indicated by other sources, but this did not help. It produces a different error when running the build command:

[commonjs--resolver] Unexpected token (576:17) in /home/silvester/git/elements/node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js
file: /home/silvester/git/elements/node_modules/@vue/runtime-dom/dist/runtime-dom.esm-bundler.js:576:17
574:     const instance = getCurrentInstance();
575:     if (!instance) {
576:       process.env.NODE_ENV !== "production" && warn(`useCssModule must be called inside setup()`);
                      ^
577:       return EMPTY_OBJ;
578:     }

I have seen vitejs/vite#1973 and vitejs/vite#2278 and https://stackoverflow.com/questions/72628089/error-in-vite-preview-uncaught-in-promise-referenceerror-process-is-not-def, but I have not had luck so far.

Is there any example of Vue3 and Vite actually working to create a web component, including bundling? Any help is appreciated, thanks!

[chenxch]

// vite.config.ts

  define: {
    "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV),
  },

If this can help you solve the problem, I hope it can be marked as the answer. In addition, I think this question should appear in the discussion area of vite, not vue.