When trying to load kokoro-js with nextjs

[ayushpaharia]

The "AMP Bind JSX Error" arises when you use the [prop]='something' syntax somewhere in your code.

JSX is a syntax extension for JavaScript used by React (and by extension, Next.js). JSX does not support the usage of this particular syntax, hence the error.

"kokoro-js": "^1.0.1"
"next": "15.1.6"

Kokoro worker.js

import { KokoroTTS } from "kokoro-js"

const model_id = "onnx-community/Kokoro-82M-ONNX"
const tts = await KokoroTTS.from_pretrained(model_id, {
  dtype: "q8", // Options: "fp32", "fp16", "q8", "q4", "q4f16"
})

self.postMessage({ status: "ready" })

// Listen for messages from the main thread
self.addEventListener("message", async (e) => {
  const { text, voice } = e.data

  // Generate speech
  const audio = await tts.generate(text, { voice })

  // Send the audio file back to the main thread
  const blob = audio.toBlob()
  self.postMessage({
    status: "complete",
    audio: URL.createObjectURL(blob),
    text,
  })
})

// next.config.js
/** @type {import('next').NextConfig} */
import type { NextConfig } from "next"

const nextConfig: NextConfig = {
  /* config options here */
  // output: "standalone",
  // https://nextjs.org/docs/app/api-reference/next-config-js/serverExternalPackages
  // serverExternalPackages: ["@huggingface/transformers"],
  output: "standalone", // Feel free to modify/remove this option

  serverExternalPackages: [
    "sharp",
    "onnxruntime-node",
    "kokoro-js",
    "@huggingface/transformers",
  ],

  webpack: (config, options) => {
    // See https://webpack.js.org/configuration/resolve/#resolvealias

    config.resolve.alias = {
      ...config.resolve.alias,
      sharp$: false,
      "onnxruntime-node$": false,
    }

    config.experiments = { ...config.experiments, asyncWebAssembly: true }

    if (!options.isServer) {
      config.output.globalObject = "self"
    }
    // config.resolve.extensions.push(".ts", ".tsx")
    // config.resolve.fallback = { fs: false }

    return config
  },
}

export default nextConfig

Error

Uncaught Error: Module not found: Can't resolve './'
> 1 | var e,A,t={"./node_modules/onnxruntime-web/dist/ort-wasm-simd-threaded.jsep.wasm":(e,A,t)=>{e.exports=t.p+"ort-wasm-simd-threaded.jsep.wasm"},"./node_modules/onnxruntime-web/dist/ort.bundle.min.mjs?46eb":(e,A,t)=>
...

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module:
./pages/worker.js
./pages/index.tsx
AMP bind syntax [0-9]='' is not supported in JSX, use 'data-amp-bind-0-9' instead. https://nextjs.org/docs/messages/amp-bind-jsx-alt
Warning: data for page "/_error" (path "/") is 6.45 MB which exceeds the threshold of 128 kB, this amount of data can reduce performance.
See more info here: https://nextjs.org/docs/messages/large-page-data
 GET / 500 in 4905ms

[xenova]

Hi there 👋 This was an issue with webpack (which causes issues with next.js) that we resolved in Transformers.js, but we haven't put out a new version of kokoro-js. Will do soon!