Hi Xenova, I have a project with essentially the same goal but without using transformers.js or npm: https://github.com/Shubin123/kokorojs

The work done with transformers.js would have saved me a ton of work and headache and I will be using it in the future.

My phenomizer is still broken is it ok if i take some of your code/logic from https://github.com/hexgrad/kokoro/blob/main/kokoro.js/src/phonemize.js

I will probably just leave my project where it's at currently with any minor bug fixes and model updates if available.
If no reply I will respect that and just leave my phenomizer broken cause I dont want to pretend like I didnt look at your version. (my tokenizer is probably not up to par either).

I am currently developing a library aimed at enabling llms inside the browser. It's essentially a wrapper for MLC and transformer.js right now but plan to add more agentic stuff like RAG etc.

To integrate transformer.js with Next.js, I had to convert it to TypeScript. I want to ensure that I properly credit you and your work, and you can check it out here: https://github.com/sauravpanda/BrowserAI.

Additionally, I noticed that the license in transformer.js appears to be incomplete and contains default values. I wanted to bring this to your attention.

I hope this is okay with you, and I truly admire all of your work!

Hey, trying to use this with a web worker and webpack...

worker.ts

import { KokoroTTS } from 'kokoro-js';

export default () =>
  self.addEventListener('message', async (event) => {
    const { text } = event.data;
    const tts = await KokoroTTS.from_pretrained(
      'onnx-community/Kokoro-82M-ONNX',
      { dtype: 'fp16' } // fp32, fp16, q8, q4, q4f16
    );
    const audio = await tts.generate(text, { voice: 'af_nicole' });

    self.postMessage({
      audioBuffer: audio.toWav()
    });
  });

tsconfig.json

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "module": "esnext", <-- changed to get webpack to start
    "jsx": "react-jsx",
    "outDir": "./dist",
    "target": "esnext",
    "moduleResolution": "bundler" <-- changed to get webpack to start
  },
  "include": ["src/**/*.ts", "src/**/*.tsx"]
}

WARNING in ./node_modules/kokoro-js/dist/kokoro.web.js 1:127084-127093
Critical dependency: the request of a dependency is an expression
 @ ./src/utils/worker.ts 10:0-38 13:22-47
 @ ./src/pages/index.tsx 16:0-40 22:60-69
 @ ./src/index.tsx 9:29-52

WARNING in ./node_modules/kokoro-js/dist/kokoro.web.js 1:465593-465604
Critical dependency: Accessing import.meta directly is unsupported (only property access or destructuring is supported)
 @ ./src/utils/worker.ts 10:0-38 13:22-47
 @ ./src/pages/index.tsx 16:0-40 22:60-69
 @ ./src/index.tsx 9:29-52

2 warnings have detailed information that is not shown.
Use 'stats.errorDetails: true' resp. '--stats-error-details' to show it.

ERROR in ./node_modules/kokoro-js/dist/kokoro.web.js 1:742156-742185
Module not found: Error: Can't resolve './' in 'C:\code\speechlab\node_modules\kokoro-js\dist'
resolve './' in 'C:\code\speechlab\node_modules\kokoro-js\dist'
  Parsed request is a directory
  using description file: C:\code\speechlab\node_modules\kokoro-js\package.json (relative path: ./dist)
    using description file: C:\code\speechlab\node_modules\kokoro-js\package.json (relative path: ./dist)
      as directory
        existing directory C:\code\speechlab\node_modules\kokoro-js\dist
          using description file: C:\code\speechlab\node_modules\kokoro-js\package.json (relative path: ./dist)
            using path: C:\code\speechlab\node_modules\kokoro-js\dist\index
              using description file: C:\code\speechlab\node_modules\kokoro-js\package.json (relative path: ./dist/index)
                no extension
                  C:\code\speechlab\node_modules\kokoro-js\dist\index doesn't exist
                .js
                  C:\code\speechlab\node_modules\kokoro-js\dist\index.js doesn't exist
                .ts
                  C:\code\speechlab\node_modules\kokoro-js\dist\index.ts doesn't exist
                .tsx
                  C:\code\speechlab\node_modules\kokoro-js\dist\index.tsx doesn't exist
                .json
                  C:\code\speechlab\node_modules\kokoro-js\dist\index.json doesn't exist
 @ ./src/utils/worker.ts 10:0-38 13:22-47
 @ ./src/pages/index.tsx 16:0-40 22:60-69
 @ ./src/index.tsx 9:29-52

Sorry, I couldn't find a better place to report this. Any ideas?

Hi, I’m trying to use kokoro-js in a Next.js 15 project, but I keep getting the following error:

Module not found: Can't resolve './'
./node_modules/kokoro-js/dist/kokoro.web.js:1:742149

However, when I test the same setup in a React + Vite project, it runs without any additional configuration and works as expected.

Here’s my package.json setup:

"kokoro-js": "^1.0.1",
"next": "^15.0.0",
"react": "^18.3.1",
"react-dom": "^18.3.1"

And my Next.js next.config.mjs webpack configuration:

const nextConfig = {
  webpack: (config) => {
    config.resolve.alias = {
      ...config.resolve.alias,
      sharp$: false,
      "onnxruntime-node$": false,
      "onnxruntime-web$": false,
    };
    return config;
  },
};

export default nextConfig;

This is how I initialize kokoro-js in my worker.ts file:

import { KokoroTTS } from "kokoro-js";

addEventListener(
  "message",
  async (event: MessageEvent<{ type: string; number: number }>) => {
    const { type, number } = event.data;
    console.log("Initializing model...");
    const tts = await KokoroTTS.from_pretrained(
      "onnx-community/Kokoro-82M-ONNX",
      {
        dtype: "q8",
      }
    );
  }
);

Is there any known issue with using kokoro-js in Next.js 15?

Since the same code runs fine in React + Vite without any extra setup, is there something specific I need to configure in Next.js to make kokoro-js work properly?

Any help would be appreciated! Thanks.