When I try show slash menu on production, always shows e.fn is not a function error

[nabi-chan]

Describe the bug

When I try showing any menu (slash, Toolbar, SideMenu) on production, this error always shown,
It seems tippyjs issue... but I didn't catch any clue, so I wrote this issue on this repo

(I added some source map for more clue)

To Reproduce

1. clone this GitHub code
2. run pnpm build && pnpm start
3. try slash menu or popup toolbar on browser

Misc

• Node version: v18.16.1
• Package manager: [email protected]
• Browser: chrome [email protected]

[YousefED]

Thanks @nabi-chan for this, and thanks for your sponsorship! Very much appreciated.

We're currently refactoring how the menus / tippy instances get rendered. See #270 . We hope to get this released next week! cc @matthewlipski

[joshua-lawrence]

Just wanted to add that we are also encountering this issue in our production build!

[dlwocks31]

We are also facing this same issue. Looking forward to the rearchitecture!

[matthewlipski]

Hey everyone, new version is up with the changes to menu rendering! @nabi-chan @joshua-lawrence @dlwocks31 could you guys let me know if you're still encountering this issue on 0.8.3?

[dlwocks31]

@matthewlipski Yes, seems like this particular issue is resolved, thanks a lot! Unfortunately, I am still encountering a similar issue in production build. The error message is same, but it occurs only when minification is on (while in v0.8.2 it didn't matter), so I am guessing two issues should have different root cause. I have posted my error reproduction step in #292

[joshua-lawrence]

Running on Next.js 13 and pnpm here, its appears the issue is still present for me:

Behavior is slightly different now though. The page doesn't compile anymore, I'm getting my error page. I'll investigate and see if I can help find a root cause.

[joshua-lawrence]

There is an empty object in the Tippy plugins array:

The particular function above that's throwing the error in @tippyjs/react

Still digging around..

[YousefED]

It seems a very weird bug! My guess at this point is the webpack minifier strips away some essential code. Try disabling it like this:

next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  webpack(webpackConfig) {
    return {
      ...webpackConfig,
      optimization: {
        minimize: false,
      },
    };
  },
};

module.exports = nextConfig;

does that remove the error?

[joshua-lawrence]

@YousefED that didn't seem to work for me. Appears this is also being caused by Next SWC and is a known issue for tippy:

atomiks/tippyjs-react#379 (comment)
vercel/next.js#53151 (comment)

Looks like maybe a temporary fix is to disable SWC minification like this:

module.exports = {
  swcMinify: false,
}

https://nextjs.org/docs/architecture/nextjs-compiler#minification

Sounds like the fix might also be available on the Next canary release, so I'll give that a go first.

[joshua-lawrence]

Oops, realized I set the config incorrectly on webpack. @YousefED
With webpack minification disabled, the JavaScript heap runs out of memory during our build. Given this isn't a BlockNote issue, I'll look elsewhere for solutions that don't completely skirt minification and update if I find a workaround that's working for me. Thanks.

Edit:

Downgrading to Next 13.4.9 is working for us.

[nabi-chan]

@joshua-lawrence It fixed on [email protected]! Also, I think it was fixed. thanks all for support :)

[YousefED]

Great! Thanks for looping back @nabi-chan