Can't import to React

[onattech]

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'))
})
...

[frencojobs]

Shiki is a server-side library, not for client-side. You have to use it in a NodeJS environment.

[orta]

As of v0.9 - shiki can run in a browser, so maybe someone can work on validating it works in React?

[ghost]

I was able use it with React.js, prepared a very basic demo with CRA: https://github.com/i9or/react-shiki-demo

Great work, thanks for the browser support!

Although should mention a few things, which I might not get right:

1. You need manually copy languages, themes and dist/onigasm.wasm somewhere in your app so it's available to browser. In case of CRA, it's public folder. But still I feel like it should be more straightforward, without any manual copy pasting. Again, I might be using package incorrectly 😅

2. I was not able to import shiki like that import * as shiki from 'shiki' or import shiki from 'shiki', it just fails with
   
   and
   
   respectively.
   Tried named import with no luck as well. Only directly importing js file worked:

   import * as shiki from 'shiki/dist/index.js';

   My assumptions here are that either something wrong with CRA/Webpack resolving the packages or maybe because I have used TypeScript version of CRA template and just need to add some setting to tsconfig.json, I don't know 🤷‍♂️

3. I haven't seen this warning:

   shiki/packages/shiki/src/loader.ts

   Line 57 in a9ae1bd

   '[Shiki] no CDN provider found, use `setCDN()` to specify the CDN for loading the resources before calling `getHighlighter()`'

   
   By default shiki just tries to fetch content from some weird path not telling to set CDN:

   

Any help would be appreciated.
Other than that, it works really good! Was able to make interactive playground with just a few lines of code.

[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');

[antfu]

@orta Fixed some bugs and types for this, can you have a look and maybe draft a new release? Thanks.

[orta]

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

[ghost]

Thanks for a quick fix and suggestions, @antfu.
Unfortunately I was not able to apply this line

import onigasm from 'arraybuffer-loader!shiki/dist/onigasm.wasm'

in CRA generated app, issues with the loader usage (something "magic header not detected"). Haven't tried to eject the app though. Most probably a webpack configuration issue. Anyways, decided to quickly update my demo with minimal Webpack setup and now it works perfectly fine (again the link for anyone interested: https://github.com/i9or/react-shiki-demo)
One more thing, before migrating away from CRA I also noticed type mismatch for grammar and themes fields in getHighlighter options. I'll try to prepare a small reproducible demo with TypeScript for that and post it here. Probably tomorrow.
Thanks a lot for your work, gentlemen 🙇

[ghost]

Was able to add TypeScript support with one minor issue. Once I set "resolveJsonModule": true in tsconfig.json my IDE shows this error:

Plus complains on grammar fields as well.
Here's an example: "resolveJsonModule": https://github.com/i9or/react-shiki-demo/tree/types-mismatch
Check App.tsx file.
It was possible to fix it quickly just by removing the option above and declaring json as a module manually:

declare module "*.json";

Not a big issue for me personally, but still wanted to share.

[octref]

The original issues seems to have been fixed.