dll renderer webpack error on tiptap npm install

[Trofin Sorin]

Prerequisites

• Using npm
• Using an up-to-date main branch
• Using latest version of devtools. Check the docs for how to update
• Tried solutions mentioned in #400
• For issue in production release, add devtools output of DEBUG_PROD=true npm run build && npm start

Expected Behavior

npm install should work when having all these inside dependencies inside package json:

"@tiptap/core": "^2.1.16",
"@tiptap/extension-bold": "^2.1.16",
"@tiptap/extension-bubble-menu": "^2.1.16",
"@tiptap/extension-code": "^2.1.16",
"@tiptap/extension-color": "^2.1.16",
"@tiptap/extension-document": "^2.1.16",
"@tiptap/extension-heading": "^2.1.16",
"@tiptap/extension-highlight": "^2.1.16",
"@tiptap/extension-history": "^2.1.16",
"@tiptap/extension-image": "^2.1.16",
"@tiptap/extension-italic": "^2.1.16",
"@tiptap/extension-link": "^2.1.16",
"@tiptap/extension-paragraph": "^2.1.16",
"@tiptap/extension-strike": "^2.1.16",
"@tiptap/extension-table": "^2.1.16",
"@tiptap/extension-text": "^2.1.16",
"@tiptap/extension-text-align": "^2.1.16",
"@tiptap/extension-text-style": "^2.1.16",
"@tiptap/extension-underline": "^2.1.16",
"@tiptap/pm": "^2.1.16",
"@tiptap/react": "^2.1.16",
"@tiptap/starter-kit": "^2.1.16"

Current Behavior

ERROR in dll renderer renderer[25]
Module not found: Error: Package path . is not exported from package \electron-react-boilerplate-main\node_modules@tiptap\pm (see exports field in \electron-react-boilerplate-main\node_modules@tiptap\pm\package.json)

webpack compiled with 1 error
npm ERR! code 1
npm ERR! path \electron-react-boilerplate-main
npm ERR! command failed
npm ERR! command C:\Windows\system32\cmd.exe /d /s /c ts-node .erb/scripts/check-native-dep.js && electron-builder install-app-deps && npm run build:dll

Steps to Reproduce

Add these @tiptap dependencies into dependencies inside package json and hit npm install.

"@tiptap/core": "^2.1.16",
"@tiptap/extension-bold": "^2.1.16",
"@tiptap/extension-bubble-menu": "^2.1.16",
"@tiptap/extension-code": "^2.1.16",
"@tiptap/extension-color": "^2.1.16",
"@tiptap/extension-document": "^2.1.16",
"@tiptap/extension-heading": "^2.1.16",
"@tiptap/extension-highlight": "^2.1.16",
"@tiptap/extension-history": "^2.1.16",
"@tiptap/extension-image": "^2.1.16",
"@tiptap/extension-italic": "^2.1.16",
"@tiptap/extension-link": "^2.1.16",
"@tiptap/extension-paragraph": "^2.1.16",
"@tiptap/extension-strike": "^2.1.16",
"@tiptap/extension-table": "^2.1.16",
"@tiptap/extension-text": "^2.1.16",
"@tiptap/extension-text-align": "^2.1.16",
"@tiptap/extension-text-style": "^2.1.16",
"@tiptap/extension-underline": "^2.1.16",
"@tiptap/pm": "^2.1.16",
"@tiptap/react": "^2.1.16",
"@tiptap/starter-kit": "^2.1.16"

Your Environment

• Node version : 18.19.0
• electron-react-boilerplate version or branch : newest
• Operating System and version : Windows 10

[ru13r]

The problem occurs, because @tiptap/pm does not have a root module"." export and cannot be used as

import <pm> from "@tiptap/pm"

It is correctly used by tiptap itself as a peer dependency:

import { <package_name> } from "@tiptap/pm/<package_name>"

On the other hand the root @tiptap/pm package is still listed in "dependencies" of package.json and results in build error with build:dll as it cannot be resolved by a module bundler such as Webpack or Vite.

I solved this issue by installing @tiptap/pm as a "devDependency". I think some overrides in package.json will be needed shall I import and use some modules from @tiptap/pm myself.

This is not the only package with this kind of issue. There are many mentions of similar problem with some versions of Firebase.