Bug with build project after release v2.0.0-beta.212 (lodash/debounce issue)

[Intiligent]

After release v2.0.0-beta.212 corrupt build of my project.
Update all tiptap packages to latest version not solve the problem.

ERROR in ./node_modules/@tiptap/extension-bubble-menu/dist/index.js 11:0-39
Module not found: Error: Can't resolve 'lodash/debounce' in '/Users/vitaliy/Documents/domains/infusemedia.loc/node_modules/@tiptap/extension-bubble-menu/dist'
Did you mean 'debounce.js'?
BREAKING CHANGE: The request 'lodash/debounce' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '.mjs' file, or a '.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

Which browser was this experienced in? Are any special extensions installed?

not depend on browser. error in webpack build or in tiptap dependency

How can we reproduce the bug on our side?

rm -rf node_modules
npm cache clean --force
npm i
// build the project
// in my case
npm run dev

### Can you provide a CodeSandbox?

_No response_

### What did you expect to happen?

expect build the project without error

### Anything to add? (optional)

_No response_

### Did you update your dependencies?

- [X] Yes, I’ve updated my dependencies to use the latest version of all packages.

### Are you sponsoring us?

- [ ] Yes, I’m a sponsor. 💖

[nephew92]

same error here in production
👉 no package have change since last build

👉 specify old versions didn't solve the problem

-- please, don't do big changes affecting all verisons, this is not useful --

[benbowler]

I'm also seeing this.

[Intiligent]

@nephew92 problem with resolve internal package solve as add package to package.json

"@tiptap/pm": "^2.0.0-beta.212",

or install manualy

npm i --save @tiptap/pm

but question with lodash/debounce is open

[nephew92]

thank you @Intiligent

[slax57]

We have the same issue with lodash/debounce 🙁

[Alex-ray]

Same issue with lodash/debounce for me with beta.212. Can't use beta.211 because it throws perf_hooks errors

[lehmat]

The root cause is probably coming from changing dependency that is still used in included code Commit (FYI: @bdbch)

[JohnShahawy]

Same issue with lodash/debounce here

[nephew92]

can someone revert this buggy commit, please

[lehmat]

It would be beneficial to move away from semver (^2.0.0 equals to 2.X.X) which essentially leads to your own pinning of each extension being ignored

[JohnShahawy]

It would be beneficial to move away from semver (^2.0.0 equals to 2.X.X) which essentially leads to your own pinning of each extension being ignored

Agreed, this was extremely annoying to me this morning when my builds started failing due to the ^ + beta naming

[nephew92]

It would be beneficial to move away from semver (^2.0.0 equals to 2.X.X) which essentially leads to your own pinning of each extension being ignored

Would be great!
I'm using the version 2.0.0-beta.194 and I expect have no issue on my build due recent updates.

[Alex-ray]

It would be beneficial to move away from semver (^2.0.0 equals to 2.X.X) which essentially leads to your own pinning of each extension being ignored

Would be great! I'm using the version 2.0.0-beta.194 and I expect have no issue on my build due recent updates.

Yeah this kind of defeats the whole purpose of versions. Future versions should not affect previous versions.

[potts99]

Still not fixed

[nephew92]

@philippkuehn @bdbch @matrei how can we solve fix this issue?

[askprateek]

Suffering from the same issue. Please resolve this!

[lehmat]

I made a dirty workaround for forcing earlier version of extension-bubble-menu that seems to work (no guarantee for it actually work, but if someone else has emergency updates that need to be pushed)

1. Add new npm install command to only install the broken dependency
   npm install --prefix tmp_node_modules @tiptap/extension-bubble-menu@2.0.0-beta.209 (Or whatever version worked for you)
   NOTE: You can only install this package since otherwise it will be upgraded from other depencencies due to semver
2. Add webpack entry to resolve.modules to prioritize the tmp_node_modules folder over node_modules DOC
   modules: ["tmp_node_modules/node_modules", "node_modules"]
3. Once they fix the underlying issue this workaround needs to be removed

[mamlzy]

Same issue with lodash/debounce :)

[bdbch]

Hey guys. Sorry for the inconvenience. I released a quick fix (beta.213) - would be nice if you could see if that works out for you.

[timheerwagen]

Hey guys. Sorry for the inconvenience. I released a quick fix (beta.213) - would be nice if you could see if that works out for you.

Works for me

[vanquanguetk63]

Hey guys. Sorry for the inconvenience. I released a quick fix (beta.213) - would be nice if you could see if that works out for you.

Thanks, worked for me

[mamlzy]

Hey guys. Sorry for the inconvenience. I released a quick fix (beta.213) - would be nice if you could see if that works out for you.

Works too for me, Thanks!

[timheerwagen]

In my tests i have following error now:

Details:

    /home/runner/work/design-system/design-system/node_modules/lodash-es/lodash.js:10
    export { default as add } from './add.js';
    ^^^^^^

    SyntaxError: Unexpected token 'export'

      2 | import Placeholder from "@tiptap/extension-placeholder";
      3 | import Underline from "@tiptap/extension-underline";
    > 4 | import { EditorContent, useEditor } from "@tiptap/react";
        | ^
      5 | import StarterKit from "@tiptap/starter-kit";
      6 | import cn from "classnames";
      7 | import { useState } from "react";

      at Runtime.createScriptFromCode (node_modules/jest-runtime/build/index.js:[159](https://github.com/Neuvernetzung/design-system/actions/runs/4112161964/jobs/7096752133#step:9:160)8:14)
      at Object.<anonymous> (node_modules/@tiptap/extension-bubble-menu/dist/index.cjs:11:17)
      at Object.<anonymous> (node_modules/@tiptap/react/dist/index.cjs:2:28)
      at Object.<anonymous> (src/components/ui/RichText/richText.tsx:4:1)
      at Object.<anonymous> (src/components/ui/RichText/index.ts:2:1)
      at Object.<anonymous> (src/components/ui/RichText/richText.test.tsx:2:1)


Test Suites: 1 failed, 28 passed, 29 total

This may also be related to this update.

[fedescoinc]

Installing with npm install --save @tiptap/react @tiptap/pm @tiptap/starter-kit with the new 2.0.0-beta.213 resolved the Lodash import issue for me.

[bdbch]

Thanks @timheerwagen for reporting - what kind of setup are you using? seems like this is because of the es syntax coming from the lodash import not being handled by your test suite or something. Would like to resolve this issue too.

[timheerwagen]

@bdbch I use a very basic setup.

jest.config.ts

import type { Config } from "@jest/types";

const config: Config.InitialOptions = {
  // The root of your source code, typically /src
  // `<rootDir>` is a token Jest substitutes
  testEnvironment: "jsdom",
  roots: ["<rootDir>/src"],

  // Jest transformations -- this adds support for TypeScript
  // using ts-jest
  transform: {
    "^.+\\.tsx?$": "ts-jest",
  },
  setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
  // Test spec file resolution pattern
  // Matches parent folder `__tests__` and filename
  // should contain `test` or `spec`.
  testRegex: "(/__tests__/.*|(\\.|/)(test|spec))\\.tsx?$",

  // Module file extensions for importing
  moduleFileExtensions: ["ts", "tsx", "js", "jsx", "json", "node"],
};

export default config;

jest.setup.ts

import { toHaveNoViolations } from "jest-axe";

expect.extend(toHaveNoViolations);
jest.mock("next/router", () => ({
  useRouter() {
    return {
      route: "/",
      pathname: "",
      query: "",
      asPath: "",
    };
  },
}));

export default {};

richText.test.tsx

import { render } from "@testing-library/react";
import { axe } from "jest-axe";
import { useForm } from "react-hook-form";

import { RichText } from ".";

const ExtendedForm = () => {
  const { control } = useForm();

  return <RichText control={control} name="richText" label="RichText" />;
};

it("RichText axe", async () => {
  const { container } = render(<ExtendedForm />);

  const results = await axe(container);
  expect(results).toHaveNoViolations();
});

Workaround could be adding:
moduleNameMapper: { "^lodash-es$": "lodash", }, to jest.config.ts

[timheerwagen]

@bdbch Now I am encountering a new error, but I am not sure if it is related to the new version. However, this error did not occur in version 209.

RangeError: Adding different instances of a keyed plugin (plugin$)

[bdbch]

@timheerwagen Just pushed another fix (beta.215) which should fix this issue

[ram-you]

Hi @bdbch ,
Have updated to beta.215 but still have error:

Named export 'debounce' not found. The requested module 'lodash' is a CommonJS module, which may not support all module.exports as named exports. CommonJS modules can always be imported via the default export, for example using: import pkg from 'lodash'; const { debounce } = pkg;

Occurs only when refresh page (server side rendering) .

[timheerwagen]

@bdbch Works like a charm for me

[Ahsan-Ullah1871]

Hi @bdbch ,
I'm also seeing this error in the next js after updating to beta.215.

[zakkempson]

We're also seeing the above lodash issue. Even when pinning to 213 (like "@tiptap/react": "2.0.0-beta.213" - without the ^) , Tiptap will still install at @tiptap/extension-bubble-menu at 2.0.0-beta.215, which for us, has the lodash issue.

We managed to temporarily (using Yarn) get around this by adding a resolution to package.json, which makes sure that no newer version of @tiptap/extension-bubble-menu will get installed.

"resolutions": {
    "@tiptap/extension-bubble-menu": "2.0.0-beta.213"
}

Would be great to find out what's causing it on the newer builds though.

[mastepanoski]

Hi @zakkempson, I managed it using:

"resolutions": {
    "@tiptap/extension-bubble-menu": "2.0.0-beta.209"
}

Because 213 version does not work for me.
I am using NextJS 13.1.6, Typescript 4.9.5 and NodeJS 18.12.1 (LTS)

[bdbch]

I'll release a fix asap

[ram-you]

Hi @bdbch ,
Have updated to beta.216 but have now an another error, this time the error message is:

Cannot find module '/.output/server/node_modules/lodash/debounce' 
imported from /.output/server/node_modules/@tiptap/extension-bubble-menu/dist/index.js

Did you mean to import lodash/debounce.js?

The error occurs only when refresh page (server side rendering on NUXT), and when I put the component inside client-only, the error disappear:

 <client-only> 
   <tiptapEditor  />
 </client-only> 

Thank you.

[fzaninotto]

beta.216 still doesn't let the react-admin simple example compile (see marmelab/react-admin#8622 (comment) for details)

[ghost]

@bdbch I have the same error. I try to use 209-216 versions but always get the error:

ERROR in ./node_modules/@tiptap/extension-bubble-menu/dist/index.js 3:0-39
Module not found: Error: Can't resolve 'lodash/debounce' in '/Users/<user>/.../node_modules/@tiptap/extension-bubble-menu/dist'
Did you mean 'debounce.js'?
BREAKING CHANGE: The request 'lodash/debounce' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.

I need to release my app later today but I can't even do a build as it always crashes on this error. Which older version can I still try to use so that my code works and the build does not crash?

[land0r]

Same for me and it's terrible. Didn't expect that there is no stable version in the releases :)

[vlaczas]

can't work with tiptap since 209, the build crashes because of this lodash. The most intresting thing - I am not even using this bubble menu. It is just included in tiptap/vue package by default

[mamlzy]

no wayy its not working again on v2.0.0-beta.216

[siahgoodwork]

Still unable to use the module. Getting this error on 216.

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/<project>/node_modules/lodash/debounce' imported from /<project>/ttp-website/apps/backend/node_modules/@tiptap/extension-bubble-menu/dist/index.js
Did you mean to import lodash/debounce.js?

[Bt-nine]

I reverted to a previous version and installed @tiptap/pm and it works now

[mattvb91]

Still broken here too on 216. Is there any chance we can revert back to 209 and leave out the commit that introduced this?

[ram-you]

Solved in v2.0.0-beta.217

[bdbch]

Thanks for trying out @ram-you - if some more people could verify that it's working again on 217 would be great!

[fzaninotto]

beta 217 does the trick for us, thanks!

[land0r]

beta 217 resolved the issue, thanks

[si1k]

beta 217 resolved the issue. Thank you!!

[siahgoodwork]

217 resolved the issue for me as well. Thank you!!!

[mamlzy]

217 working finee🥳

[EtanHey]

@Intiligent I think it resolved the issue, closed?
217 works ✅

[bdbch]

I'll close this issue for now. If anyone still has problems feel free to reopen or open a new ticket if it's a new build issue.

Thanks

[Intiligent]

@bdbch @EtanHey it work for me. Problem resolved. Thanks guys.