0

Actually, I have read through every stackoverflow question about ReactDOM.render, but I am having trouble using them. Even if createroot was replaced for ReactDOM, ReactDOM.render is still not supported, it tells me.

I'm rendering app.jsx in index.blade.php

app.jsx

import React from 'react';
import { createRoot } from "react-dom/client";
import localforage from 'localforage';
import { createStore } from 'polotno/model/store';
import { unstable_setRemoveBackgroundEnabled } from 'polotno/config';
import './src/components/app.css'
import App from './src/components/App';


unstable_setRemoveBackgroundEnabled(true);

const store = createStore({ key: 'nFA5H9elEytDyPyvKL7T' });

localforage.getItem('polotno-state', function (err, json) {
    if (json) {
        store.loadJSON(json);
    }
    if (!store.pages.length) {
        store.addPage();
    }
});

store.on('change', () => {
    try {
        const json = store.toJSON();
        localforage.setItem('polotno-state', json);
    } catch (e) { }
});

const container = document.getElementById("polotnoApp");
const root = createRoot(container);
    
root.render(
    <App store={store} />
);

package.json

{
    "private": true,
    "scripts": {
        "dev": "vite",
        "build": "vite build"
    },
    "devDependencies": {
        "axios": "^0.27.2",
        "esbuild": "^0.15.12",
        "laravel-vite-plugin": "^0.6.1",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "vite": "^3.1.4"
    },
    "dependencies": {
        "@meronex/icons": "^4.0.0",
        "@vitejs/plugin-react": "^2.1.0",
        "bootstrap": "^5.2.2",
        "dotenv": "^16.0.3",
        "file-saver": "^2.0.5",
        "jszip": "^3.10.1",
        "localforage": "^1.10.0",
        "polotno": "^1.1.1",
        "polotno-node": "^1.0.0",
        "qrcode": "^1.5.1",
        "react": "^18.2.0",
        "react-bootstrap": "^2.5.0",
        "react-dom": "^18.2.0",
        "react-toastify": "^9.0.8"
    }
}

Here in the index.blade.php, I'm rendering my react app index.blade.php

@extends('layouts.app')
@section('content')
    @include('partials.header')
    <div class="app-body">
        @include('partials.left_sidebar')
        <main class="main-content"  >
            <div id="polotnoApp"></div>
        </main>
    </div>
    @include('partials.footer')
@endsection
David-JSON
  • 35
  • 8
  • Have you tried searching for `react-dom` to find some possible other occurrences of `render` in your codebase? – Valentin Oct 25 '22 at 07:16
  • Actually, I'm new to it. I search about the ReactDomServer but can't fix the problem. Is there any way to fix the issue/. I attached the balde.php too – David-JSON Oct 25 '22 at 07:51
  • 1
    Can you troubleshoot the following scenarios: (1) There are 2 versions of react-dom in your codebase (17 and 18). In this case try to delete the node_modules/ folder and package-lock.json, then npm install again. (2) document.getElementById("polotnoApp") could not find an element with that Id. (3) Check out this answer of the similar issue: https://stackoverflow.com/questions/71668256/deprecation-notice-reactdom-render-is-no-longer-supported-in-react-18 – kvooak Oct 25 '22 at 08:17

0 Answers0