ClickHouse / ClickHouse/click-ui
[Bug]: CodeBlock breaks SSR/client evaluation in Waku/Vite due to CJS react-syntax-highlighter language imports
- Dominant language
- TypeScript
- Stars
- 135
- Forks
- 33
- Avg merge
- 2d 13h
- Merged PRs (30d)
- 19
Description
### 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
```sh
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:
```sh
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:
```json
{
"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
```sh
npm create waku@latest click-ui-ssr-repro
cd click-ui-ssr-repro
npm install
npm install @clickhouse/click-ui styled-components
```
App.tsx
```tsx
import { Button } from '@clickhouse/click-ui';
export default function App() {
return Test;
}
```
```sh
npm run dev
```
```sh
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:
```tsx
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
- [x] Checked in both light and dark mode (if applicable)
- [x] Checked at different viewport sizes (if applicable)
- [x] Checked with keyboard navigation (if applicable)
- [x] Checked for visual regressions in related components
Contributor guide
No contributing guide indexed for this repository
Research direction
Start with the CodeBlock entry point shown in dist/esm/components/CodeBlock/index.js and compare its react-syntax-highlighter language imports with the package’s ESM paths. Reproduce the failure using the Waku/Vite setup and a root import of Button; done means @clickhouse/click-ui loads without the _interopRequireDefault evaluation error.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript, vite
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 55/100