search

michelson / Dante

Just another Medium wysiwyg editor clone
https://dante-editor.dev
2k stars 189 forks source link

TypeError: find is not a function #202

Closed jamalabo1 closed 2 years ago

jamalabo1 commented 2 years ago

I have just installed dante 1.0.6-alpha.1, when I try to type (in the editor) It throws this error.

michelson commented 2 years ago

a codesandbox will be appreciated when there is a bug report, thanks. otherwise, try the source code in which the demo is working correctly

jamalabo1 commented 2 years ago

that's part of the problem, It works in codesandbox, but in my environment (local & remote (build)) it does not, I tried complete purge of node_modules& cache, but the problem still persists. I don't know what is affecting the @tiptap packages.

here is my package.json:

{
  "name": "bapp",
  "version": "2.1.0",
  "private": true,
  "scripts": {
    "analyze": "cross-env PORT=9999 ANALYZE=1 npm run build",
    "prebuild": "npm run build-theme",
    "build": "umi build",
    "dev": "npm run start:dev",
    "postinstall": "umi g tmp",
    "lint": "umi g tmp && npm run lint:js && npm run lint:style && npm run lint:prettier",
    "lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx ",
    "lint:fix": "eslint --fix --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src && npm run lint:style",
    "lint:js": "eslint --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src",
    "lint:prettier": "prettier --check \"src/**/*\" --end-of-line auto",
    "lint:style": "stylelint --fix \"src/**/*.less\" --syntax less",
    "prettier": "prettier -c --write \"src/**/*\"",
    "start": "cross-env UMI_ENV=dev umi dev",
    "build-theme": "ts-node ./scripts/prebuild.ts",
    "prestart": "npm run build-theme",
    "prestart:dev": "npm run prestart",
    "start:dev": "cross-env REACT_APP_ENV=dev MOCK=none UMI_ENV=dev umi dev",
    "start:test": "cross-env REACT_APP_ENV=test MOCK=none UMI_ENV=dev umi dev",
    "pretest": "node ./tests/beforeTest",
    "test": "umi test",
    "test:all": "node ./tests/run-tests.js",
    "test:component": "umi test ./src/components",
    "tsc": "tsc --noEmit"
  },
  "lint-staged": {
    "**/*.less": "stylelint --syntax less",
    "**/*.{js,jsx,ts,tsx}": "npm run lint-staged:js",
    "**/*.{js,jsx,tsx,ts,less,md,json}": [
      "prettier --write"
    ]
  },
  "browserslist": [
    "> 1%, not dead"
  ],
  "dependencies": {
    "@ant-design/charts": "^1.1.20",
    "@ant-design/dark-theme": "^2.0.2",
    "@ant-design/icons": "^4.0.0",
    "@ant-design/pro-descriptions": "^1.2.0",
    "@ant-design/pro-form": "^1.3.0",
    "@ant-design/pro-layout": "^6.23.3",
    "@ant-design/pro-table": "^2.17.0",
    "@nivo/bar": "^0.73.1",
    "@nivo/core": "^0.73.0",
    "@nivo/line": "^0.73.0",
    "@nivo/pie": "^0.73.0",
    "@umijs/route-utils": "^1.0.33",
    "antd": "^4.15.0",
    "classnames": "^2.2.6",
    "dante3": "^1.0.6-alpha.1",
    "gsap": "^3.7.1",
    "less": "^4.1.1",
    "lodash": "^4.17.11",
    "moment": "^2.25.3",
    "moment-timezone": "^0.5.33",
    "omit.js": "^2.0.2",
    "react": "^16.14.0",
    "react-dom": "^16.14.0",
    "react-collapsible": "^2.8.3",
    "react-cookie": "^4.0.3",
    "react-dev-inspector": "^1.1.1",
    "react-draggable": "^4.4.4",
    "react-gsap": "^3.2.1",
    "react-helmet-async": "^1.0.4",
    "react-horizontal-scrolling-menu": "^0.7.10",
    "react-inlinesvg": "^2.3.0",
    "react-player": "^2.9.0",
    "react-scroll": "^1.8.2",
    "react-smooth-scrollbar": "^8.0.6",
    "react-spring": "^9.2.4",
    "react-tabs": "^3.2.2",
    "recharts": "^2.0.10",
    "reselect": "^4.0.0",
    "smooth-scrollbar": "^8.6.3",
    "umi": "^3.5.14",
    "umi-plugin-antd-theme": "https://github.com/jamalabo1/umi-plugin-antd-theme.git",
    "umi-request": "^1.0.8",
    "universal-cookie": "^4.0.4",
    "video-react": "^0.14.1"
  },
  "devDependencies": {
    "@types/draft-js": "^0.11.4",
    "@types/draftjs-to-html": "^0.8.1",
    "@ant-design/pro-cli": "^1.0.28",
    "@babel/plugin-transform-typescript": "^7.14.6",
    "@babel/preset-typescript": "^7.14.5",
    "@types/classnames": "^2.2.7",
    "@types/express": "^4.17.0",
    "@types/gsap": "^3.0.0",
    "@types/history": "^4.7.2",
    "@types/jest": "^26.0.0",
    "@types/less": "^3.0.3",
    "@types/lodash": "^4.14.144",
    "@types/react": "^17.0.0",
    "@types/react-dom": "^17.0.0",
    "@types/react-helmet": "^6.1.0",
    "@types/react-infinite-scroller": "^1.2.2",
    "@types/react-scroll": "^1.8.3",
    "@types/react-slick": "^0.23.5",
    "@types/react-tabs": "^2.3.3",
    "@types/redux-saga": "^0.10.5",
    "@umijs/fabric": "^2.6.7",
    "@umijs/plugin-blocks": "^2.0.5",
    "@umijs/plugin-esbuild": "^1.0.1",
    "@umijs/preset-ant-design-pro": "^1.2.0",
    "@umijs/preset-react": "^1.4.8",
    "@umijs/yorkie": "^2.0.3",
    "cross-env": "^7.0.0",
    "cross-port-killer": "^1.1.1",
    "detect-installer": "^1.0.1",
    "enzyme": "^3.11.0",
    "eslint": "^7.32.0",
    "express": "^4.17.1",
    "gh-pages": "^3.0.0",
    "glob": "^7.1.7",
    "jsdom-global": "^3.0.2",
    "lint-staged": "^10.0.0",
    "mockjs": "^1.0.1-beta3",
    "prettier": "^2.0.1",
    "puppeteer-core": "^8.0.0",
    "react-slick": "^0.28.1",
    "slick-carousel": "^1.8.1",
    "stylelint": "^13.0.0",
    "ts-node": "^10.2.0",
    "typescript": "^4.0.3",
    "webpack": "^5.47.0",
    "webpack-cli": "^4.7.2"
  },
  "engines": {
    "node": ">=10.0.0"
  },
  "checkFiles": [
    "src/**/*.js*",
    "src/**/*.ts*",
    "src/**/*.less",
    "config/**/*.js*",
    "scripts/**/*.js"
  ]
}
michelson commented 2 years ago

A codesandbox will be useful. Thanks

jamalabo1 commented 2 years ago

codesandbox

but as I said before, it works in this mock environment but in mine (dev & prod) it does not. I shared my package.json

michelson commented 2 years ago

The probably one of your dependences is breaking your app. Sorry but I can't help there.

El lun., 11 de octubre de 2021 12:08 p. m., Jamal Abo Mokh < @.***> escribió:

codesandbox https://codesandbox.io/s/ecstatic-euler-oydod?file=/src/App.js

but as I said before, it works in this mock environment but in mine (dev & prod) it does not. I shared my package.json

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/michelson/Dante/issues/202#issuecomment-940115477, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAC5SA7XJZHG6FYM5LFTQTUGL4XRANCNFSM5FX4NBWQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

jamalabo1 commented 2 years ago

Can't you point me in the right direction of what might be causing the issue? is it a native react dependency or is it external, for example, in the codesandbox, it wouldn't work if I didn't add prop-types.

michelson commented 2 years ago

Send the entire error with backtrace, it will give us some lights

El lun., 11 de octubre de 2021 12:49 p. m., Jamal Abo Mokh < @.***> escribió:

Can't you point me in the right direction of what might be causing the issue? is it a native react dependency or is it external, for example, in the codesandbox, it wouldn't work if I didn't add prop-types.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/michelson/Dante/issues/202#issuecomment-940147248, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAC5SDPPHG2Z4O7GPLQEBLUGMBQXANCNFSM5FX4NBWQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

LeonFelipeCordero commented 2 years ago

I am getting same error when typing something on the editor, the only message I get is:

InputRule.ts:46 Uncaught TypeError: find is not a function
    at inputRuleMatcherHandler (InputRule.ts:46)
    at InputRule.ts:116
    at Array.forEach (<anonymous>)
    at run$1 (InputRule.ts:111)
    at Plugin.handleTextInput (InputRule.ts:185)
    at domchange.js:230
    at EditorView.someProp (index.js:248)
    at readDOMChange (domchange.js:230)
    at DOMObserver.handleDOMChange (input.js:35)
    at DOMObserver.flush (domobserver.js:176)
    at MutationObserver.DOMObserver.observer (domobserver.js:50)
inputRuleMatcherHandler @ InputRule.ts:46
(anonymous) @ InputRule.ts:116
run$1 @ InputRule.ts:111
handleTextInput @ InputRule.ts:185
(anonymous) @ domchange.js:230
someProp @ index.js:248
readDOMChange @ domchange.js:230
(anonymous) @ input.js:35
flush @ domobserver.js:176
DOMObserver.observer @ domobserver.js:50

I don't provide any codesanbox, there it works.

michelson commented 2 years ago

is the codesandbox using the same version/ dependencies of prosemirror/tiptap?

Atte. Miguel Michelson Martinez www.vadb.org http://vadb.org

El mar, 12 oct 2021 a las 13:14, Leon Felipe Cordero (< @.***>) escribió:

I am getting same error when typing something on the editor, the only message I get is:

InputRule.ts:46 Uncaught TypeError: find is not a function at inputRuleMatcherHandler (InputRule.ts:46) at InputRule.ts:116 at Array.forEach () at run$1 (InputRule.ts:111) at Plugin.handleTextInput (InputRule.ts:185) at domchange.js:230 at EditorView.someProp (index.js:248) at readDOMChange (domchange.js:230) at DOMObserver.handleDOMChange (input.js:35) at DOMObserver.flush (domobserver.js:176) at MutationObserver.DOMObserver.observer (domobserver.js:50) inputRuleMatcherHandler @ InputRule.ts:46 (anonymous) @ InputRule.ts:116 run$1 @ InputRule.ts:111 handleTextInput @ InputRule.ts:185 (anonymous) @ domchange.js:230 someProp @ index.js:248 readDOMChange @ domchange.js:230 (anonymous) @ input.js:35 flush @ domobserver.js:176 DOMObserver.observer @ domobserver.js:50

I don't provide any codesanbox, there it works.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/michelson/Dante/issues/202#issuecomment-941162145, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAC5SH3TNBOS5M6JTLZUMLUGRNIDANCNFSM5FX4NBWQ . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.

jamalabo1 commented 2 years ago

Error stack in my case (same as one provided earlier)

InputRule.ts:46 Uncaught TypeError: find is not a function
    at inputRuleMatcherHandler (InputRule.ts:46)
    at InputRule.ts:116
    at Array.forEach (<anonymous>)
    at run$1 (InputRule.ts:111)
    at Plugin.handleTextInput (InputRule.ts:185)
    at domchange.js:230
    at EditorView.someProp (index.js:248)
    at readDOMChange (domchange.js:230)
    at DOMObserver.handleDOMChange (input.js:35)
    at DOMObserver.flush (domobserver.js:176)
    at MutationObserver.DOMObserver.observer (domobserver.js:50)
LeonFelipeCordero commented 2 years ago

from tiptap it installs 2.0.0-beta.xxx and for prosemirror looks the same

mojombo commented 2 years ago

I'm getting this error too, and have been looking into it. What's odd is that @jamalabo1's codesandbox works, but if you download the same repo locally, then it throws the error. So what makes it work in CodeSandbox, but not locally?

I've tried yarn and npm and the error persists in both cases locally. It seems likely to be a dependency version mismatch, but CodeSandbox does not give you their lockfile when you download, so I can't compare. I tried it on StackBlitz and it also works in-browser there, but they don't give a lockfile on download either. Oddly, I can't get it to import at all on Replit.

Also, @michelson, what appears to be your own CodeSandbox test works there, but downloaded locally fails even to build, because version 1.0.5 doesn't place nicely with tiptap anymore. But it works on CodeSandbox, so there must be a hidden lockfile that's still using some older deps of tiptap.

I will dig a bit more.

michelson commented 2 years ago

hi @mojombo, had you tried yarn dev on the dante repo itself? if it helps for debugging, this is my local yarn.lock https://gist.github.com/michelson/d3b54403600636f2daa5913b0281535e also, I use node v15.4.0 on my system.

mojombo commented 2 years ago

yarn dev in the Dante repo DOES WORK for me locally. This is great news! I will continue to investigate. Super weird.

michelson commented 2 years ago

this could be related: https://github.com/ueberdosis/tiptap/issues/2001 , I was able to reproduce the error by updating some dependences

michelson commented 2 years ago

I think I've fixed, please try dante3@1.0.6-alpha.2

michelson commented 2 years ago

The new version is deployed on https://www.dante-editor.dev/.

mojombo commented 2 years ago

That fixes it, thank you for working on this! Yay!

mojombo commented 2 years ago

@jamalabo1 Does this work for you now?

jamalabo1 commented 2 years ago

@mojombo Yes, upgrading to version 1.0.6-alpha.2 fixes the issue.