can't use ketcher-standalone with vite because process.env is not set in the browser

[BrannJoly]

Steps to Reproduce npm create vite@latest test -- --template react-ts npm add ketcher-core ketcher-react ketcher-standalone

add this to main.ts

import { StandaloneStructServiceProvider } from 'ketcher-standalone';
const structServiceProvider = new StandaloneStructServiceProvider();

go to http://localhost:3000/

Actual behavior I have this error in the console and my app completely fails to show in the browser

ketcher-standalone.js?v=5fff0fbd:1692 Uncaught ReferenceError: process is not defined
    at ../node_modules/.pnpm/util@0.12.5/node_modules/util/util.js (ketcher-standalone.js?v=5fff0fbd:1692:5)
    at __require (chunk-TIUEEL27.js?v=5fff0fbd:12:50)
    at ../node_modules/.pnpm/assert@2.1.0/node_modules/assert/build/internal/assert/assertion_error.js (ketcher-standalone.js?v=5fff0fbd:2619:20)
    at __require (chunk-TIUEEL27.js?v=5fff0fbd:12:50)
    at ../node_modules/.pnpm/assert@2.1.0/node_modules/assert/build/assert.js (ketcher-standalone.js?v=5fff0fbd:4036:26)
    at __require (chunk-TIUEEL27.js?v=5fff0fbd:12:50)
    at ketcher-standalone.js?v=5fff0fbd:24564:29

Expected behavior no error

Desktop

• OS: macOS 14.1.1 (23B81)
• Browser chrome
• Version : 120.0.6099.71

Ketcher version 2.15.1

Additional context the error happens while trying to access process.env.NODE_DEBUG Since we're in browser, process.env is not supposed to be set. I don't understand why a frontend package seems to assume to be in a server-side environment ... There's something I'm missing !

[elramus]

You have to define some additional things in vite.config.ts. We have:

  define: {
    "process.env": process.env,
    global: "window",
  },

Once you're past this though, you may hit: https://github.com/epam/ketcher/issues/3711. That's what I'm currently stuck on.