[Bug]: tocbot dependency causing ERR_REQUIRE_ESM error on next dev and next build

[bazzyb]

Describe the bug

For a while, we've had cypress tests we use to check each component loads properly via SSR. To simplify this, we use our existing storybook components for rendering. We had been on storybook version 7.5.0 for a while, but have updated to version 8, but in doing so, have encountered an issue with tocbot not being ESM friendly. We can no longer run or build via next to enable the cypress tests.

Reproduction link

https://codesandbox.io/p/devbox/storybook-esm-2lvwcy?file=%2Fapp%2Fpage.tsx%3A10%2C1

Reproduction steps

Visit the code sandbox link, and you should see the ESM error straight away.

System

System:
    OS: macOS 14.4.1
    CPU: (10) arm64 Apple M1 Max
    Shell: 5.9 - /bin/zsh
  Binaries:
    Node: 20.12.2 - ~/.nvm/versions/node/v20.12.2/bin/node
    npm: 10.5.0 - ~/.nvm/versions/node/v20.12.2/bin/npm <----- active
  Browsers:
    Chrome: 126.0.6478.63
    Safari: 17.4.1
  npmPackages:
    @storybook/blocks: ^8.1.10 => 8.1.10

Additional context

No response

[r34son]

Use experimental.esmExternals: 'loose' in your next.config.js

[bazzyb]

So that seems to have made the example in Code Sandbox start working, but has made no difference in our actual code, which is always frustrating!

I'm trying to see what else is in our code that's missing from the sandbox which might keep the issue persistent, but not having much luck.

[shilman]

@bazzyb I released a canary of a potential fix in #28318. Any chance you can try it out and let me know if it solves your problem?

[bazzyb]

@shilman Perfect yeah that's fixed it for us. Had to remove @storybook/addon-docs to test, as I couldn't force it to use the canary release of @storybook/blocks, but I'd assume that issue goes away with the full release of this change?

Edit: Scrap that, only just noticed the npx [email protected] upgrade command. All worked perfectly.