Unable to run dev and storybook at the same time after adding `devtools` to vite.config.ts

[junqdu]

TanStack Devtools version

0.3.3

Framework/Library version

react 18

Describe the bug and the steps to reproduce it

Unable to run dev and storybook at the same time after adding devtools to vite.config.ts

getting the following error

  code: 'EADDRINUSE',
  errno: -48,
  syscall: 'listen',
  address: '::',
  port: 42069

Your Minimal, Reproducible Example - (Sandbox Highly Recommended)

n/a

Screenshots or Videos (Optional)

No response

Do you intend to try to help solve this bug with your own PR?

None

Terms & Code of Conduct

• I agree to follow this project's Code of Conduct
• I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[MarkForLoop]

You can change the port number as a work around

    devtools({
      eventBusConfig: {
        port: 42070,
      },
      enhancedLogs: {
        enabled: true,
      },
    }),

which is mentioned here in the docs: https://tanstack.com/devtools/latest/docs/configuration

[junqdu]

Thanks @MarkForLoop that doesn't work, I think it is because both dev and storybook tyring to spin up devtool

[aduduk-altir]

@junqdu
I have devtool spun up by 2 projects at the same time (in a monorepo), it took some time to find eventBusConfig.port option, but it works perfectly fine when each process has own port (not the same port for both).

[AlemTuzlak]

I have added a new config option called enabled on the event bus allowing you to NOT run it, so this should solve all the issues by disabling it in storyblok / vitest / wherever

[junqdu]

Thanks Alem!

[junqdu]

@AlemTuzlak sorry, I am bit confused, is the change released or it is going to be release in future version?

[AlemTuzlak]

Released, although I forgot to add it to the docs, will do it today

[junqdu]

I updated @tanstack/react-devtools to 0.7.7, and the following config is not working as expected.

      eventBusConfig={{
        enabled: false,
      }}

[longzheng]

Since I want to keep the eventBusConfig enabled for my dev server but not for Storybook, I modified my storybook npm script to include an environment variable

{
    "scripts": {
        "storybook": "STORYBOOK=true storybook dev -p 6006",

And then I updated my vite.config.ts to conditionally enable

export default defineConfig(() => {
    return {
        plugins: [
            devtools({
                eventBusConfig: {
                    enabled: env.STORYBOOK ? false : true,
                },