SyntaxError: Unexpected token 'export'

[alanhung317]

Thank you for creating this package!

I ran into this error whenever I refresh/re-render the webpage:

The error leads to this:

My code:

I'm using Next js & the latest tts-react.

It works again when I hide/unhide my TextToSpeech code, but throws the same error when I refresh the page.

Thank you!

[morganney]

Thanks for pointing this issue out.

You are looking for a CJS build which is currently not available, but should be. I'll have to publish a new version of tts-react that includes a CommonJS build.

In the meantime, you can try using transpileModules from Next.js. and add tts-react. Basically you need to convert the import/export's from this package into require/module.exports during your app's build.

[alanhung317]

Ok! thank you so much!

[alanhung317]

Just fyi,

I followed the direction to implementing tts-react via Next.js' Module Transpilation.

It produced an error of "window is undefined"

I then used useEffect and useState to implement the package. It works now. (perhaps there's a better way)

[morganney]

Since tts-react uses the browser's Web Speech API, you need the standard window checks for Next.js before rendering TextToSpeech or calling useTts. It is not possible to render on the server since the necessary API is not implemented in Node as far as I know.

Your approach seems standard for Next.js apps. You could also load this package dynamically.

[alanhung317]

Ok, thank you!