[Bug]: CodeBlock breaks SSR/client evaluation in Waku/Vite due to CJS react-syntax-highlighter language imports

[arrudaricardo]

Summary

When using @clickhouse/click-ui in a Waku/Vite React app, the app fails during module evaluation with:

txt TypeError: _interopRequireDefault is not a function

The stack trace points to CodeBlock importing CJS language modules from react-syntax-highlighter inside Click UI’s ESM build.

Would it be possible to fix this by patching CodeBlock to use the ESM language imports from react-syntax-highlighter instead of the CJS ones?

Error

TypeError: _interopRequireDefault is not a function     at eval (.../node_modules/react-syntax-
highlighter/dist/cjs/languages/hljs/sql.js:8:12)     at async ESModulesEvaluator.runInlinedModule 
(.../node_modules/waku/node_modules/vite/dist/node/module-runner.js:992:3)     at async ModuleRunner.directRequest 
(.../node_modules/waku/node_modules/vite/dist/node/module-runner.js:1247:59)     at async ModuleRunner.cachedRequest 
(.../node_modules/waku/node_modules/vite/dist/node/module-runner.js:1154:73)     at async eval (.../node_modules/@clickhouse/click-
ui/dist/esm/components/CodeBlock/index.js:10:31)     at async ESModulesEvaluator.runInlinedModule 
(.../node_modules/waku/node_modules/vite/dist/node/module-runner.js:992:3)     at async ModuleRunner.directRequest 
(.../node_modules/waku/node_modules/vite/dist/node/module-runner.js:1247:59)     at async ModuleRunner.cachedRequest 
(.../node_modules/waku/node_modules/vite/dist/node/module-runner.js:1154:73)     at async eval (.../node_modules/@clickhouse/click-
ui/dist/esm/index.js:39:1) 

Suspected cause

CodeBlock currently imports Highlight.js language definitions from the CJS build of react-syntax-highlighter:

ts import sql from 'react-syntax-highlighter/dist/cjs/languages/hljs/sql.js'; import bash from 'react-syntax-
highlighter/dist/cjs/languages/hljs/bash.js'; import json from 'react-syntax-highlighter/dist/cjs/languages/hljs/json.js'; import tsx from 
'react-syntax-highlighter/dist/cjs/languages/hljs/typescript.js'; import plaintext from 'react-syntax-
highlighter/dist/cjs/languages/hljs/plaintext.js'; 

However, @clickhouse/click-ui exposes an ESM build through the import export condition:

{
  "exports": { 
    ".": {
       "import": "./dist/esm/index.js", 
      "require": "./dist/cjs/index.cjs" 
    }
   } 
} 

In Waku/Vite, the ESM build is evaluated by Vite’s module runner, and the CJS language module appears to fail because of CJS/ESM interop around _interopRequireDefault.

This can also happen even when CodeBlock is not directly used, because the root entry point re-exports CodeBlock, so importing unrelated components from @clickhouse/click-ui can still cause CodeBlock to be evaluated.

Proposed fix

Could CodeBlock use the ESM language imports instead?

diff - import sql from 'react-syntax-highlighter/dist/cjs/languages/hljs/sql.js'; - import bash from 'react-syntax-highlighter/dist/cjs/languages/hljs/bash.js'; - import json from 'react-syntax-highlighter/dist/cjs/languages/hljs/json.js'; - import tsx from 'react-syntax-highlighter/dist/cjs/languages/hljs/typescript.js'; - import plaintext from 'react-syntax-highlighter/dist/cjs/languages/hljs/plaintext.js';  + import sql from 'react-syntax-highlighter/dist/esm/languages/hljs/sql'; + import bash from 'react-syntax-highlighter/dist/esm/languages/hljs/bash'; + import json from 'react-syntax-highlighter/dist/esm/languages/hljs/json'; + import tsx from 'react-syntax-highlighter/dist/esm/languages/hljs/typescript'; + import plaintext from 'react-syntax-highlighter/dist/esm/languages/hljs/plaintext'; 

Then the registrations could likely be simplified as well:

diff - SyntaxHighlighter.registerLanguage('sql', sql.default || sql); + SyntaxHighlighter.registerLanguage('sql', sql); 

Same for the other languages.

Expected behavior

@clickhouse/click-ui should be importable in Waku/Vite SSR/client-module evaluation without failing during evaluation of CodeBlock.

Actual behavior

The app crashes during module evaluation with:

txt TypeError: _interopRequireDefault is not a function 

Environment

txt Framework/runtime: Waku + Vite Package: @clickhouse/click-ui Failure path: @clickhouse/click-ui/dist/esm/components/CodeBlock/index.js Underlying module: react-syntax-highlighter/dist/cjs/languages/hljs/sql.js

Additional context

This seems related to the general SSR compatibility issue previously reported in #604, but this report identifies a specific failing path through CodeBlock and react-syntax-highlighter CJS language imports.

Component(s) affected

CodeBlock

How to reproduce

npm create waku@latest click-ui-ssr-repro
cd click-ui-ssr-repro
npm install
npm install @clickhouse/click-ui styled-components

App.tsx

import { Button } from '@clickhouse/click-ui';

export default function App() {
  return <Button>Test</Button>;
}

npm run dev

TypeError: _interopRequireDefault is not a function
    at eval (.../node_modules/react-syntax-highlighter/dist/cjs/languages/hljs/sql.js:8:12)
    at async ESModulesEvaluator.runInlinedModule (.../node_modules/waku/node_modules/vite/dist/node/module-runner.js:992:3)
    at async eval (.../node_modules/@clickhouse/click-ui/dist/esm/components/CodeBlock/index.js:10:31)
    at async eval (.../node_modules/@clickhouse/click-ui/dist/esm/index.js:39:1)

Note that CodeBlock does not need to be rendered directly. The failure can happen from a root import such as:

import { Button } from '@clickhouse/click-ui';

Click UI Version

0.0.252-test.7

Browser(s)

Chrome

Operating system

macOS 26

Is this a regression?

Not sure

Last working version (if regression)

No response

Screenshots or recording

No response

Visual / UX checklist

• Checked in both light and dark mode (if applicable)
• Checked at different viewport sizes (if applicable)
• Checked with keyboard navigation (if applicable)
• Checked for visual regressions in related components