vite build error

[hellhorse123]

Steps to reproduce:

1. npm create vite@latest
2. choose React, typescript
3. install libs "ketcher-react": "^2.24.0", "ketcher-standalone": "^2.24.0",
4. invoke libs in component, for example:

   
   /* eslint-disable @typescript-eslint/no-explicit-any */
   import { useEffect, useState } from "react";
   import { Ketcher, StandaloneStructServiceProvider } from "ketcher-standalone";
   import { Editor } from "ketcher-react";
   import "ketcher-react/dist/index.css";
   import "./App.css";

const structServiceProvider = new StandaloneStructServiceProvider();

function App() { const [isKetcherInitialized, setIsKetcherInitialized] = useState(false); // Track Ketcher initialization const [ketcherInstance, setKetcherInstance] = useState<Ketcher | null>(null); // Store Ketcher instance

useEffect(() => { if (ketcherInstance && isKetcherInitialized) { try { ketcherInstance.setMolecule(""); } catch (error) { console.error("Failed to set SMILES:", error); } } }, [isKetcherInitialized]);

return (

{ console.error("Error in Ketcher:", message); }} onInit={(ketcher: Ketcher) => { // Assign Ketcher instance to window for KetcherLogger to use /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */ // @ts-ignore window.ketcher = ketcher; setKetcherInstance(ketcher); // Set Ketcher instance in state setIsKetcherInitialized(true); // Mark Ketcher as initialized try { ketcher.setMolecule(''); // Set the default SMILES after initialization } catch (error) { console.error("Error initializing Ketcher with SMILES:", error); } }} />

); }

export default App;

5. Try to build: npm run build

Explanation:
After adding libs:

"ketcher-react": "^2.24.0",
"ketcher-standalone": "^2.24.0",

and trying to build my react ts project with vite, I get error:

thread '' panicked at /Users/runner/.cargo/registry/src/index.crates.io-6f17d22bba15001f/swc_common-0.39.0/src/syntax_pos.rs:702:18: width 3 given for non-narrow character note: run with RUST_BACKTRACE=1 environment variable to display a backtrace thread '' panicked at library/core/src/panicking.rs:221:5: panic in a function that cannot unwind stack backtrace: 0: 0x1329fce37 - _napi_register_module_v1 1: 0x1329899eb - 2: 0x1329d19f2 - _napi_register_module_v1 3: 0x1329fe442 - _napi_register_module_v1 4: 0x1329ff8d9 - _napi_register_module_v1 5: 0x1329fe992 - _napi_register_module_v1 6: 0x1329fe929 - _napi_register_module_v1 7: 0x1329fe91c - _napi_register_module_v1 8: 0x132b4c56c - _napi_register_module_v1 9: 0x132b4c5e5 - _napi_register_module_v1 10: 0x132b4c589 - _napi_register_module_v1 11: 0x132981dfc - 12: 0x100616b40 - __ZN6v8impl12_GLOBAL__N_123FunctionCallbackWrapper6InvokeERKN2v820FunctionCallbackInfoINS2_5ValueEEE thread caused non-unwinding panic. aborting. /bin/sh: line 1: 13941 Abort trap: 6 vite build

As I understand, this is trouble : `width 3 given for non-narrow character`, chatGPT says:

> SWC is a Rust-based compiler that Vite uses for code transformation and minification during the build process. The error message:
> width 3 given for non-narrow character
> indicates that SWC is encountering a character that doesn't fit within its expected character width, possibly due to Unicode characters or certain syntax in the ketcher packages.
> 
> Given that the error appears after importing ketcher-react and ketcher-standalone, it's likely that:
> 
>     SWC cannot process some code within these packages.
>     The packages might contain non-standard syntax or characters that cause SWC to crash.

my dependencies:

"react": "^18.2.0",
"vite": "^5.3.2",

[hellhorse123]

More precisely, there is a bug in the ketcher-react library, without it the build is successful

[hellhorse123]

One more addition: Here is the problematic line:

Code file with error

After the build, for some reason this import does not work.

[samellis]

I get the same bug, also vite, no errors apparently in build but trying to load site throws this error. npm run start serves a working page, problem is only after build.

After adding libs:

    "ketcher-react": "^2.24.0",
    "ketcher-standalone": "^2.24.0",

and trying to build my react ts project with vite, I get error:

thread '<unnamed>' panicked at /Users/runner/.cargo/registry/src/index.crates.io-6f17d22bba15001f/swc_common-0.39.0/src/syntax_pos.rs:702:18:
width 3 given for non-narrow character
note: run with `RUST_BACKTRACE=1` environment variable to display a backtrace
thread '<unnamed>' panicked at library/core/src/panicking.rs:221:5:
panic in a function that cannot unwind
stack backtrace:
   0:        0x1329fce37 - _napi_register_module_v1
   1:        0x1329899eb - <unknown>
   2:        0x1329d19f2 - _napi_register_module_v1
   3:        0x1329fe442 - _napi_register_module_v1
   4:        0x1329ff8d9 - _napi_register_module_v1
   5:        0x1329fe992 - _napi_register_module_v1
   6:        0x1329fe929 - _napi_register_module_v1
   7:        0x1329fe91c - _napi_register_module_v1
   8:        0x132b4c56c - _napi_register_module_v1
   9:        0x132b4c5e5 - _napi_register_module_v1
  10:        0x132b4c589 - _napi_register_module_v1
  11:        0x132981dfc - <unknown>
  12:        0x100616b40 - __ZN6v8impl12_GLOBAL__N_123FunctionCallbackWrapper6InvokeERKN2v820FunctionCallbackInfoINS2_5ValueEEE
thread caused non-unwinding panic. aborting.
/bin/sh: line 1: 13941 Abort trap: 6           vite build

As I understand, this is trouble : width 3 given for non-narrow character, chatGPT says:

SWC is a Rust-based compiler that Vite uses for code transformation and minification during the build process. The error message: width 3 given for non-narrow character indicates that SWC is encountering a character that doesn't fit within its expected character width, possibly due to Unicode characters or certain syntax in the ketcher packages. Given that the error appears after importing ketcher-react and ketcher-standalone, it's likely that:

SWC cannot process some code within these packages.
The packages might contain non-standard syntax or characters that cause SWC to crash.

my dependencies:

    "react": "^18.2.0",
    "vite": "^5.3.2",

I had this problem, found the solution in this vite bug: https://github.com/vitejs/vite/issues/18179#issue-2543316736

npm install -D rollup@4.22.0

[samellis]

One more addition: Here is the problematic line:

Code file with error

After the build, for some reason this import does not work.

After solving the first post issue (with npm install -D rollup@4.22.0) I managed to build successfully. However on opening the site I see the same "Uncaught ReferenceError: require is not defined" on the same bit of code (raphael) in ketcher-react.

[wiscgazf]

May I ask, after vite packaging, the problem of require('raphael') require not defined has been solved? I have exactly the same phenomenon as you

[hellhorse123]

May I ask, after vite packaging, the problem of require('raphael') require not defined has been solved? I have exactly the same phenomenon as you

Unfortunately, the problem is still not solved and there is no feedback from the developers

[wiscgazf]

I have solved the problem ‘the problem of require('raphael') require not defined ’

// 1、 yarn add vite-plugin-commonjs

// vite.config.ts

// 2、import commonjs from 'vite-plugin-commonjs';

{
plugins: [react(), commonjs()],
define: {
    'process.env': {},
    global: 'global',
  },
  build: {
    commonjsOptions: {
      transformMixedEsModules: true,
    },
  },
}

// 3、index.html
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React + TS</title>
         // add script code add to head
    <script>
      var global = window;
    </script>
  </head>

[hellhorse123]

the above helped me to launch Ketcher in build mode, but I started to encounter an error: Uncaught TypeError: SQ is null Perhaps Ketcher in the build does not pull in some other dependencies. could you please provide the Ketcher (Editor) initialization code with dependencies?

[rrodionov91]

Hi @hellhorse123 If you can create repository with example we can try to help.

[hellhorse123]

Hi @hellhorse123 If you can create repository with example we can try to help.

This is archive where reproduce the problem: ketcher-check.zip

However, I don't know how much the above solutions are a crutch, but the following list of steps helped solve this problem: 1) npm install -D rollup@4.22.0(or yarn add rollup@4.22.0 --dev) 2) yarn add vite-plugin-commonjs 3) in file vite.config:

import commonjs from "vite-plugin-commonjs";
...
{
plugins: [react(), commonjs()],
define: {
    'process.env': {},
    global: 'global',
  },
  build: {
    commonjsOptions: {
      transformMixedEsModules: true,
    },
  },
}

4) in file index.html :

  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React + TS</title>
         // add script code add to head
    <script>
      var global = window;
    </script>
  </head>

(Note, you can simplify points 3 and 4 into one, you need to do the following in vite.config:

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

and remove unnecessary script from index)

5) And in my case, was additional problem with cdn plugin in vite.config. I remove react and react-dom from it and all works now

[hwknsj]

I also encountered this same issue, along with some issues resolving the types for ketcher-standalone that introduced themselves after upgrading to the latest v2.25.0.

It would be great to resolve this issue without having to do an elaborate workaround such as the ones @hellhorse123 and @wiscgazf describe (thanks to both of you, by the way!).

@rrodionov91 @samellis – any idea if we can expect a fix for this issue or has it been resolved?