Forums

Start a new topic

iink SDK Web

iinkJS and ReactJS v18.0.0 are not compatible

 In ReactJS v18.0.0, there is a recommendation that ReactDOM.createRoot should be used to create the root container for rendering:

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

I created a local project using the iink web example from CodeSandbox.io to test this recommendation (https://codesandbox.io/s/react-test-3vkn9x9n1m?file=/src/App.js). Here are some code snippets:

package.json:

  "dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "iink-js": "^2.0.2",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },

index.js:

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
reportWebVitals();

App.js:

  useEffect(() => {
    let editor = editorRef.current;
    editor = iink.register(editorRef.current, {
      recognitionParams: {
        type: 'TEXT',
        protocol: 'WEBSOCKET',
        apiVersion: 'V4',
        server: {
          scheme: 'https',
          host: 'cloud.myscript.com',
          applicationKey: 'f2d',
          hmacKey: '646'
        },
      },
    });
    window.addEventListener('resize', () => {
      this.editor.resize()
    });

    return () => {
      window.removeEventListener('resize', () => { editor.resize() });
      this.editor.close(); // causing issue here
    }
  }, []);

After running this project by npm start, an error occurs with this message:

Uncaught TypeError: this is undefined


The "this" object above is referring to the line this.editor.close();

    return () => {
      window.removeEventListener('resize', () => { editor.resize() });
      this.editor.close();
    }

So one would think to remove the this object and fix this problem:

    return () => {
      window.removeEventListener('resize', () => { editor.resize() });
      editor.close();
    }

But after running npm start, as soon as a stroke is created using stylus or mouse in the editor, it causes a new error from iink.js:

Uncaught TypeError: s.currentStroke is undefined


So, either way with or without this object in this.editor.close(), there is always an error when using iink.js under reactJS v18.0.0.

Can you help to resolve this issue?


1 Comment

Hello,


We did not reproduce your issue with your code neither with react 18.0.0 nor with react 18.2.0, neither with iink-js nor with iink-ts 1.0.3.


You can refer to this iink-ts example that works.


Best regards,


Gwenaëlle

Login or Signup to post a comment