ClickHouse / ClickHouse/click-ui

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

Open
#1,020 1 comment 0 reactions 0 assignees View on GitHub
bug
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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.