Can't use Dante2 with react or nextjs at all?

[kaloraat]

This is a great project however you can't even install in your react project (create-react-app) or nextjs. Not only that, even the Github repo of this project cant run locally (used git clone). Has the author even tried to use it with create-react-app, nextjs or even run the project locally using git clone?

Here I have started a bare bone react/nextjs app and import Dante2. I just cant get it running, countless errors window is not defined, @emotion/cache module not found, @emotion/core module not found ...

Can you please have a look at my repo and suggest me how to get going with Dante2? You can clone the repo and run using

npm install
npm run dev

Cheers!

[michelson]

please check your dependences, if they are missing you have to install them also this example could help https://github.com/zeit/next.js/blob/canary/examples/with-draft-js/pages/index.js in order to give more details please paste the console output if you want to report error messages

[kaloraat]

I tried next.js examples. That's for draft.js. That works but I like your editor Dante :)

So First thing i do is import :

import Dante from 'Dante2'

I get greetings with this error:

So as the error says module not found, I installed them:

npm i @emotion/styled

Then I get this error:

So I tried installing that too:

npm i @emotion/core

Then I got this error:

So I installed that too:

npm i emotion-theming

Ok so no more errors. I tried Dante

return (
    <div>
      <Dante />
    </div>
  )

Then I get the following error:

Now that's a dead end. So any suggestions?

This is my package.json

{
  "name": "with-draft-js",
  "version": "1.0.0",
  "author": "Asten Mies",
  "license": "ISC",
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "@emotion/core": "^10.0.22",
    "@emotion/styled": "^10.0.23",
    "Dante2": "^0.5.0-rc21",
    "draft-js": "0.10.5",
    "emotion-theming": "^10.0.19",
    "next": "latest",
    "react": "^16.7.0",
    "react-dom": "^16.7.0"
  }
}

[michelson]

I think we need to handle all the window definitions with something like this:

if (typeof window !== 'undefined') {

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

On Sun, Nov 24, 2019 at 7:56 PM Ryan (Narayan) Dhungel < notifications@github.com> wrote:

I tried next.js examples. That's for draft.js. That works but I like your editor Dante :) So First thing i do is import : import Dante from 'Dante2' I get greetings with this error: [image: Screen Shot 2019-11-25 at 7 47 40 AM] https://user-images.githubusercontent.com/15702617/69503002-6a711500-0f69-11ea-908d-62888a6b78b9.png So as the error says module not found, I installed them: npm i @emotion/styled Then I get this error: [image: Screen Shot 2019-11-25 at 9 37 07 AM] https://user-images.githubusercontent.com/15702617/69503006-78269a80-0f69-11ea-852a-1bf6a566a21d.png So I tried installing that too: npm i @emotion/core Then I got this error: [image: Screen Shot 2019-11-25 at 9 46 19 AM] https://user-images.githubusercontent.com/15702617/69503028-b6bc5500-0f69-11ea-84a8-31764f9b3d7d.png So I installed that too: npm i emotion-theming Ok so no more errors. I tried Dante

return (

)

Then I get the following error: [image: Screen Shot 2019-11-25 at 9 50 26 AM] https://user-images.githubusercontent.com/15702617/69503042-d5bae700-0f69-11ea-96bd-eeef30ac8a35.png Now that's a dead end. So any suggestions?

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/michelson/dante2/issues/188?email_source=notifications&email_token=AAAC5SBY4PVWSVBAHSM4BRTQVMBCTA5CNFSM4JQYSIX2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEFAXDJI#issuecomment-557937061, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAC5SCS7JAH72SXB7SWRQDQVMBCTANCNFSM4JQYSIXQ .

[miguelangeltorresfp]

Hi, this is a really great project. The demo works amazing. But as @kaloraat I'm trying to make it work in next.js. I'm rendering it only on client-browser.

Here are the errors I get:

react-dom.development.js:14773 Uncaught Invariant Violation: Element ref was specified as a string (editor) but no owner was set. . . .

react-dom.development.js:14773 Uncaught Invariant Violation: Element ref was specified as a string (image_popover) but no owner was set. . . .

The above error occurred in the <div> component: in div in div in div in DanteEditor in div in Dante . . .

Thank you for your time. Kind regards !

[kaloraat]

@miguelangeltorresfp Works completely in the client side only, not only to create blog but to render blog too because you need Dante to render the content so pretty useless if you are planning on SSR/SEO

import Dante from 'Dante2';

const Home = () => process.browser && <Dante />;

export default Home;

[michelson]

Hi @kaloraat , you can implement a draft renderer from redraft library.

here is an example for render draft content content , without the need initialize Dante editor. It implements the markup of dante components though

https://gist.github.com/michelson/904e1a6a2e49762437606cb22a77fcfe

hope it helps

[michelson]

example:

import { ThemeProvider } from 'emotion-theming'
import DraftRenderer from './draftRenderer' // <-- the one from the gist
import theme from 'Dante2/package/es/editor/components/Dante/themes/default'
import EditorStyles from 'Dante2/package/es/styled/base'

          <ThemeProvider 
            theme={ theme }>
              <EditorStyles>
                <DraftRenderer
                  raw={JSON.parse(serialized_content)}
                />
              </EditorStyles>
          </ThemeProvider> 

[kaloraat]

@michelson thanks but i can't use theme. This throws an error: import theme from 'Dante2/package/es/components/Dante/themes/default';

[kaloraat]

[michelson]

hi @kaloraat , maybe you could use the files built at lib instead the files build at es, So. your imports like Dante2/package/es/... modify it to Dante2/package/lib/...

hope it helps

[SHUBHAM-SAHUS]

• [ ] i cant create react app plzx help us

[cesarodriguez4]

I ran in nextjs using this approach:

  "dependencies": {
    "@emotion/core": "^10.0.28",
    "@emotion/styled": "^10.0.27",
    "Dante2": "^0.5.0-rc26",
    "emotion-theming": "^10.0.27",
    "mongodb": "^3.5.9",
    "next": "9.3.5",
    "next-connect": "^0.8.1",
    "next-on-netlify": "^2.3.1",
    "postcss-preset-env": "^6.7.0",
    "pure-react-carousel": "^1.27.1",
    "react": "16.13.1",
    "react-dom": "16.13.1",
    "tailwindcss": "^1.5.2"
  }
}

When you need to render in nextjs you can try with:

{(typeof window !== 'undefined') ? <Dante  onChange={(d) => console.log('state', d)} /> : null }

As this library runs only in the client side.

[jerome-diver]

I'm trying to use Dante2@next with a React SSR project by including this simple code part (use of loadable lib):

import loadable from '@loadable/component'
const Dante = loadable(() => import('Dante2'))
const ContentMode = { target, mode, data }) => {
  switch (mode) {
    case 'edit':
      if (target == 'title') return <h1><Dante content={data.title}/></h1>
  }
}

and i get an error: Uncaught Invariant Violation: invalid RawDraftContentState

why is this happening ?