Can't import to React

Hi, I am not able to import shiki into a react app. I am getting Uncaught TypeError: fs.readFileSync is not a function error. Here’s my code for reference.

import './App.css'
import { useEffect, useState } from 'react'
import  shiki  from 'shiki'

shiki.getHighlighter({
  theme: 'nord'
}).then(highlighter => {
  console.log(highlighter.codeToHtml(`console.log('shiki');`, 'js'))
})
...

[antfu]

@i9or Thanks for the detailed description and repro.

For 2. and 3. should be fixed in the recent commits.

For 1. You can use your current solution or via third-party CDNs like unpkg or jsdelivr. If you’d like to bundle those file, you can do them this way:

import * as shiki from 'shiki';
import themeNord from 'shiki/themes/nord.json'
import langTS from 'shiki/languages/typescript.tmLanguage.json'
import langTSX from 'shiki/languages/tsx.tmLanguage.json'
import onigasm from 'arraybuffer-loader!shiki/dist/onigasm.wasm'

shiki.setOnigasmWASM(onigasm)
const highlighter = await shiki.getHighlighter({
  theme: 'nord',
  themes: [themeNord],
  langs: [{
    id: 'typescript',
    scopeName: langTS.scopeName,
    grammar: langTS,
    aliases: ['ts']
  }, {
    id: 'tsx',
    scopeName: langTSX.scopeName,
    grammar: langTSX
  }],
})
const highlightedCode = highlighter.codeToHtml(SAMPLE_CODE, 'tsx');

[orta]

I can, and I have - this is shipped in 0.9.2 👍🏻