Issues with vite dev server

[kvndrsslr]

So I tried to get this component to work for a couple hours now, finally realized that vite (in a fresh project initialized with pnpm create vite) dev server does in fact not play well with it.

Have not yet figured out what exactly is stopping it from working, but wanna leave this issue here in the meantime so others are aware.
If you're using vite, the awkward but possible workaround is to vite build --watch and vite preview, then this component will work as expected.

[FrancescoCoding]

Steps to replicate this fix:

Ensure you have these in your package.json scripts:
"build-watch": "tsc && npx vite build --watch",
"preview": "vite preview"

Ensure you have a key-value pair for the preview in your vite.config.ts:
export default defineConfig({ plugins: [react()], preview: { port: 8085,| }, });

Open terminal in your src folder and run npm run build-watch
Open another terminal in your src folder and run npm run preview

Now the project will be built on save, in my case, I have to reload the page as well after each build.

[TomYeoman]

I have this problem also

[kvndrsslr]

@TomYeoman
I haven't had the time to dig into the reasons this doesn't work with the dev server as an npm dependency.
However if you just copy the code in this repo and the chengsokdara/async-hook repo into your project and fix a few references, it will work also with the dev server.

[TomYeoman]

Thanks for the info @kvndrsslr, may do this just to get development flow working. I'm using https://crxjs.dev/vite-plugin for extension development, and running in watch mode doesn't work at all for content scripts.

[jcdogo]

Yes, this is definitely a Vite dev server problem. Running the same exact code in a fresh create-react-app typescript template project worked just fine.

[sudhakar29495]

@kvndrsslr - I was experiencing the same issue in vitejs, I implemented a workaround by installing the required dependency lamejs and imported that into my component without using it.

const { Mp3Encoder } = await import('lamejs'); or import { Mp3Encoder } from 'lamejs';

Not sure about the issue with Vitejs or lamejs.

[Ami777]

kvndrsslr

Thank you for your reply. It literally saved my day!