Vite.js failed to transpile @juggle/resize-observer

[ben-ikt]

Hi, I would like to switch my project to vite.js instead of react-scripts but I can't because of a dependency of ketcher-react.

Steps to Reproduce

1. Replace react-scripts by vite.js
2. Configure vite

export default defineConfig(({ mode }) => {
  return {
    plugins: [react(), viteTsconfigPaths(), svgrPlugin()],
    optimizeDeps: {
      esbuildOptions: {
        // Node.js global to browser globalThis
        define: {
          global: 'globalThis',
        },
        // Enable esbuild polyfill plugins
        plugins: [
          NodeGlobalsPolyfillPlugin({
            buffer: true,
            process: true // -> needed for some of my external packages
          }),
          NodeModulesPolyfillPlugin(),
        ],
      },
    },
    build: {
      sourcemap: false,
      rollupOptions: {
        cache: false,
        plugins: [
          // Enable rollup polyfills plugin
          // used during production bundling
          rollupNodePolyFill(),
        ],
      },
    },
    server: {
      port: 3000,
    },
  };
});

4. Start vite and open http://localhost:3000
5. Open the error console

Actual behavior

Uncaught SyntaxError: Identifier 'process' has already been declared (at ketcher-react.js?v=c1ad07e1:7821:5)

// node_modules/@juggle/resize-observer/lib/utils/process.js
var process; // <- process is already defined. process seems to be declare as a global var.
var init_process2 = __esm({
  "node_modules/@juggle/resize-observer/lib/utils/process.js"() {
    init_process();
    init_buffer();
    init_hasActiveObservations();
    init_hasSkippedObservations();
    init_deliverResizeLoopError();
    init_broadcastActiveObservations();
    init_gatherActiveObservationsAtDepth();
    process = function() {
      var depth = 0;
      gatherActiveObservationsAtDepth(depth);
      while (hasActiveObservations()) {
        depth = broadcastActiveObservations();
        gatherActiveObservationsAtDepth(depth);
      }
      if (hasSkippedObservations()) {
        deliverResizeLoopError();
      }
      return depth > 0;
    };
  }
});

Desktop (please complete the following information):

• OS: macOS 13.2.1
• Browser: chrome
• Version: Version 111.0.5563.64

Ketcher version
2.7.2

[KonstantinEpam23]

Hi @ben-ikt thanks for reaching out! We are currently investigating using vite.js as the build tool for the project. You can follow this issue to check progress with that: #2411

[ben-ikt]

Hi @KonstantinEpam23, here is how I patch @juggle/resize-observer via an esbuild plugin.

/**
 * HACK @juggle/resize-observer/lib/utils/process.js used by ketcher-react
 * 'var process' create a conflict with NodeGlobalsPolyfillPlugin({ process: true })
 */
const ketcherReactTranspile = () => {
  return {
    name: 'ketcher-react-transpile',
    setup(build) {
      build.onLoad({ filter: /@juggle\/resize-observer\/lib\/utils\/process.js/ }, async (args) => {
        const source = await readFile(args.path, 'utf8');
        const hackedSource = source
          .replace('var process =', 'var processTask =')
          .replace('export { process }', 'export { processTask as process }');
        return { contents: hackedSource };
      });
    },
  };
};

And in my vite.config.js

optimizeDeps: {
      esbuildOptions: {
        // Node.js global to browser globalThis
        define: {
          global: 'globalThis',
        },
        // Enable esbuild polyfill plugins
        plugins: [
          ketcherReactTranspile(),
          NodeGlobalsPolyfillPlugin({
            process: true,
          }),
          NodeModulesPolyfillPlugin(),
        ],
      },
    },