Erreur React avec Visual Editor

charlie404
Javascript

Bonjour,

Je tente d'installer le module Visual Editor de Jonathan sur mon projet Symfony mais j'obtiens une erreur React.

J'utilise Webpack et je n'y connais pas grand chose en React.

Mon fichier visual-editor.js

import { VisualEditor } from '@boxraiser/visual-editor'

const editor = new VisualEditor()

editor.defineElement();

Mon fichier twig : 

{% extends 'admin/base.html.twig' %}

{% block title %}{{title}}{% endblock %}

{% block body %}

<div class="card card-info">
    <div class="card-header">
        <div class="d-flex justify-content-between align-items-center">
            <h3 class="card-title">
                <i class="fas fa-info-circle mr-1"></i>                        
                Informations
            </h3>            
        </div>
    </div>
    <div class="card-body">        
        {{form(form)}}

        <visual-editor name="content"></visual-editor>
    </div>
</div>
{% endblock %}

Voici l'erreur :

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.
    React 2
    Provider context.js:10
    React 11
    workLoop scheduler.development.js:266
    flushWork scheduler.development.js:239
    performWorkUntilDeadline scheduler.development.js:533
    node_modules vendors-node_modules_grafikart_drop-files-element_dist_drop-files-element_js-node_modules_sym-332d4b.js:33027
    node_modules vendors-node_modules_grafikart_drop-files-element_dist_drop-files-element_js-node_modules_sym-332d4b.js:33089
    Webpack 20
react.development.js:1476
    React 2
    Provider context.js:10
    React 11
    performConcurrentWorkOnRoot self-hosted:1168
    workLoop scheduler.development.js:266
    flushWork scheduler.development.js:239
    performWorkUntilDeadline scheduler.development.js:533
    (Asynchrone : EventHandlerNonNull)
    js scheduler.development.js:571
    js scheduler.development.js:633
    Webpack 21

Je précise que lorsque j'utilise la version standalone, l'éditeur apparait bien.

Quelqu'un aurait une idée du problème ?

Merci d'avance

Aucune réponse