search

michelson / dante2

A complete rewrite of dante editor in draft-js
https://michelson.github.io/dante2/
Other
910 stars 121 forks source link

https://gist.github.com/FinnFrotscher/6deea36f845a52e8b2a11295b014101 #75

Closed LazerJesus closed 6 years ago

LazerJesus commented 6 years ago

I did multiple iterations on this file. each leading to the same error. they are all variations to your https://github.com/michelson/dante2-tests/blob/master/index.js

the files

gist

the error


Uncaught (in promise) Error: addComponentAsRefTo(...): Only a ReactOwner can have refs. 
You might be adding a ref to a component that was not created inside a component's `render` method, 
or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner).

behaviour

when text is selected, no tooltip appears

possible cause

I use the /lib/ version instead of the /es/ #73

zcmgyu commented 6 years ago

Same here

michelson commented 6 years ago

hi , you have a custom implementation , I really don't know as as far I can see where the problem could be. take a look at how https://github.com/michelson/dante2-tests is made

zcmgyu commented 6 years ago

Hi, Michelson. I release that dante-tests also doesn't t work at all. And I can't see react & react-dom in your package.json. Maybe it's main problem. Your project needn't react & react-dom dependence. If we add react in my package, it becomes multiples copies. (Verify here: https://github.com/zcmgyu/dante2-editor-demo)

dante2-tests build error: NPM BUILD:

  1.  Have some error in your import. 
    
ERROR in ./index.js
Module not found: Error: Can't resolve 'Dante2/src/model/index.js' in '/Users/zcmgyu/Desktop/Aptech i13/React/React/RichEditor/dante2-tests'
@ ./index.js 55:13-49
@ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./index.js

ERROR in ./index.js Module not found: Error: Can't resolve 'Dante2/es/components/popovers/image.js' in '/Users/zcmgyu/Desktop/Aptech i13/React/React/RichEditor/dante2-tests' @ ./index.js 23:13-62 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./index.js

ERROR in ./index.js Module not found: Error: Can't resolve 'Dante2/es/components/popovers/link.js' in '/Users/zcmgyu/Desktop/Aptech i13/React/React/RichEditor/dante2-tests' @ ./index.js 27:12-60 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./index.js

ERROR in ./index.js Module not found: Error: Can't resolve 'Dante2/es/components/popovers/addButton.js' in '/Users/zcmgyu/Desktop/Aptech i13/React/React/RichEditor/dante2-tests' @ ./index.js 31:17-70 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./index.js

ERROR in ./index.js Module not found: Error: Can't resolve 'Dante2/es/components/popovers/toolTip.js' in '/Users/zcmgyu/Desktop/Aptech i13/React/React/RichEditor/dante2-tests' @ ./index.js 35:15-66 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./index.js

ERROR in ./index.js Module not found: Error: Can't resolve 'Dante2/es/components/blocks/image.js' in '/Users/zcmgyu/Desktop/Aptech i13/React/React/RichEditor/dante2-tests' @ ./index.js 39:14-61 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./index.js

ERROR in ./index.js Module not found: Error: Can't resolve 'Dante2/es/components/blocks/embed.js' in '/Users/zcmgyu/Desktop/Aptech i13/React/React/RichEditor/dante2-tests' @ ./index.js 43:13-60 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./index.js

ERROR in ./index.js Module not found: Error: Can't resolve 'Dante2/es/components/blocks/video.js' in '/Users/zcmgyu/Desktop/Aptech i13/React/React/RichEditor/dante2-tests' @ ./index.js 47:13-60 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./index.js

ERROR in ./index.js Module not found: Error: Can't resolve 'Dante2/es/components/blocks/placeholder.js' in '/Users/zcmgyu/Desktop/Aptech i13/React/React/RichEditor/dante2-tests' @ ./index.js 51:19-72 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./index.js



2. I've changed it like below.

> import DanteImagePopover from 'Dante2/dist/Dante2';
> import DanteAnchorPopover from 'Dante2/dist/Dante2';
> import DanteInlineTooltip from 'Dante2/dist/Dante2';
> import DanteTooltip from 'Dante2/dist/Dante2';
> import ImageBlock from 'Dante2/dist/Dante2';
> import EmbedBlock from 'Dante2/dist/Dante2';
> import VideoBlock from 'Dante2/dist/Dante2';
> import PlaceholderBlock from 'Dante2/dist/Dante2';
> import { 
>     resetBlockWithType, 
>     addNewBlockAt } from 'Dante2/dist/Dante2';

3. New exception's been thrown.

> Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

**YARN BUILD:**
ERROR in ./~/Dante2/src/components/popovers/image.js
Module parse failed: /Users/zcmgyu/Desktop/Aptech i13/React/React/RichEditor/dante2-tests/node_modules/Dante2/src/components/popovers/image.js Unexpected token (139:6)
You may need an appropriate loader to handle this file type.
|   render() {
|     return (
|       <div
|         ref="image_popover"
|         className={ `dante-popover popover--Aligntooltip popover--top popover--animated ${ this.state.show ? 'is-active' : undefined }` }
 @ ./index.js 33:13-63
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./index.js

ERROR in ./~/Dante2/src/components/popovers/link.js
Module parse failed: /Users/zcmgyu/Desktop/Aptech i13/React/React/RichEditor/dante2-tests/node_modules/Dante2/src/components/popovers/link.js Unexpected token (88:6)
You may need an appropriate loader to handle this file type.
|     }
|     return (
|       <div
|         ref="dante_popover"
|         className='dante-popover popover--tooltip popover--Linktooltip popover--bottom is-active'
 @ ./index.js 37:12-61
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./index.js

ERROR in ./~/Dante2/src/components/popovers/addButton.js
Module parse failed: /Users/zcmgyu/Desktop/Aptech i13/React/React/RichEditor/dante2-tests/node_modules/Dante2/src/components/popovers/addButton.js Unexpected token (255:6)
You may need an appropriate loader to handle this file type.
|   render() {
|     return (
|       <div
|         className={ `inlineTooltip ${ this.activeClass() } ${ this.scaledClass() }` }
|         style={ this.state.position }
 @ ./index.js 41:17-71
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./index.js

ERROR in ./~/Dante2/src/components/popovers/toolTip.js
Module parse failed: /Users/zcmgyu/Desktop/Aptech i13/React/React/RichEditor/dante2-tests/node_modules/Dante2/src/components/popovers/toolTip.js Unexpected token (271:6)
You may need an appropriate loader to handle this file type.
|   render() {
|     return (
|       <div
|         id="dante-menu"
|         ref="dante_menu"
 @ ./index.js 45:15-67
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./index.js

ERROR in ./~/Dante2/src/components/blocks/image.js
Module parse failed: /Users/zcmgyu/Desktop/Aptech i13/React/React/RichEditor/dante2-tests/node_modules/Dante2/src/components/blocks/image.js Unexpected token (337:6)
You may need an appropriate loader to handle this file type.
|
|     return (
|       <div ref="image_tag2" suppressContentEditableWarning={true}>
|         <div className="aspectRatioPlaceholder is-locked"
|           style={this.coords()}
 @ ./index.js 49:14-62
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./index.js

ERROR in ./~/Dante2/src/components/blocks/embed.js
Module parse failed: /Users/zcmgyu/Desktop/Aptech i13/React/React/RichEditor/dante2-tests/node_modules/Dante2/src/components/blocks/embed.js Unexpected token (96:6)
You may need an appropriate loader to handle this file type.
|     console.log("ERROR", this.state.error)
|     return (
|       <span>
|         { this.picture()
|           ? <a
 @ ./index.js 53:13-61
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./index.js

ERROR in ./~/Dante2/src/components/blocks/video.js
Module parse failed: /Users/zcmgyu/Desktop/Aptech i13/React/React/RichEditor/dante2-tests/node_modules/Dante2/src/components/blocks/video.js Unexpected token (70:6)
You may need an appropriate loader to handle this file type.
|   render() {
|     return (
|       <figure className='graf--figure graf--iframe graf--first' tabIndex='0'>
|         <div className='iframeContainer'
|           dangerouslySetInnerHTML={ { __html: this.state.embed_data.html } } />
 @ ./index.js 57:13-61
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./index.js

ERROR in ./~/Dante2/src/components/blocks/placeholder.js
Module parse failed: /Users/zcmgyu/Desktop/Aptech i13/React/React/RichEditor/dante2-tests/node_modules/Dante2/src/components/blocks/placeholder.js Unexpected token (58:6)
You may need an appropriate loader to handle this file type.
|   render() {
|     return (
|       <span className={this.classForDefault()} onMouseDown={this.handleFocus}>
|         {this.placeholderText()}
|         <EditorBlock {...Object.assign({}, this.props, {
 @ ./index.js 61:19-73
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./index.js

ERROR in ./~/Dante2/src/components/dante.js
Module parse failed: /Users/zcmgyu/Desktop/Aptech i13/React/React/RichEditor/dante2-tests/node_modules/Dante2/src/components/dante.js Unexpected token (290:6)
You may need an appropriate loader to handle this file type.
|   render() {
|     return this.editor = ReactDOM.render(
|       <DanteEditor content={this.getContent()} config={this.options} />,
|       document.getElementById(this.options.el)
|     )
 @ ./~/Dante2/src/index.js 2:0-38
 @ ./index.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./index.js

ERROR in ./~/Dante2/src/components/dante_editor.js
Module parse failed: /Users/zcmgyu/Desktop/Aptech i13/React/React/RichEditor/dante2-tests/node_modules/Dante2/src/components/dante_editor.js Unexpected token (863:6)
You may need an appropriate loader to handle this file type.
|   render() {
|     return (
|       <div id="content" suppressContentEditableWarning={ true }>
|         <article className="postArticle">
|           <div className="postContent">
 @ ./~/Dante2/src/index.js 3:0-51
 @ ./index.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./index.js
michelson commented 6 years ago

it seems you are using a version from git ? if it's so you will need to build the modules yourself, so: cd ./node_modules/Dante2 then yarn build

I've released a new version 0.4.0 with some fixes on how modules are exported along with dante2-tests. please try it out, if something is wrong please reopen this issue

best!