VanillaJS example not working - Javascript error

[mohammedfaisal]

I have tried the image-editor using the VanillaJS approach by creating a vite project using vanilla template and installed the following dependency as mentioned in the github documentation.

npm install --save filerobot-image-editor react-filerobot-image-editor

Then I copy & pasted the VanillaJs Example provided in the github documentation. It produces javascript errors on page load - image editor not rendered at all.

Uncaught TypeError: Cannot read properties of null (reading 'useMemo')
    at useMemo30 (filerobot-image-editor.js?v=bab60865:24602:29)
    at ThemeProvider2 (filerobot-image-editor.js?v=bab60865:66163:46)
    at renderWithHooks (filerobot-image-editor.js?v=bab60865:14079:26)
    at mountIndeterminateComponent (filerobot-image-editor.js?v=bab60865:16829:21)
    at beginWork (filerobot-image-editor.js?v=bab60865:17810:22)
    at HTMLUnknownElement.callCallback2 (filerobot-image-editor.js?v=bab60865:5582:22)
    at Object.invokeGuardedCallbackDev (filerobot-image-editor.js?v=bab60865:5607:24)
    at invokeGuardedCallback (filerobot-image-editor.js?v=bab60865:5641:39)
    at beginWork$1 (filerobot-image-editor.js?v=bab60865:21669:15)
    at performUnitOfWork (filerobot-image-editor.js?v=bab60865:21105:20)

The above error occurred in the <ThemeProvider2> component:

    at ThemeProvider2 (http://localhost:5173/node_modules/.vite/deps/filerobot-image-editor.js?v=bab60865:66161:23)
    at AssemblyPoint (http://localhost:5173/node_modules/.vite/deps/filerobot-image-editor.js?v=bab60865:106273:15)

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries.

The same code works fine when I used VanillaJs CDN : <script src="https://scaleflex.cloudimg.io/v7/plugins/filerobot-image-editor/latest/filerobot-image-editor.min.js"></script>

The react example mentioned in the documentation also works fine.

Any idea about Javascript errors and what is wrong with the VanillaJS example ?

[AhmeeedMostafa]

@mohammedfaisal there is maybe some react versions conflict in your project, could u please check that?

[mohammedfaisal]

@AhmeeedMostafa See the repo https://github.com/mohammedfaisal/image-editor-vanilla for an example of the issue described.

[AhmeeedMostafa]

@mohammedfaisal I see in your package-lock.json you have more than react version, this might be the issue. please run npm list react in your project's path terminal and see what packages have the different versions, and try to align the versions 1 version or remove that other packages and check if the lib. working good then this might be the reason.

[mohammedfaisal]

@AhmeeedMostafa As you can see in the README.md of the repo: https://github.com/mohammedfaisal/image-editor-vanilla, I just executed the command that is specified in the documentation for using the VanillaJs version. I'm NOT using React at all; only the filerobot-image-editor library is using React. I'm not a React developer, that's why I'm interested in the VanillaJs variant of library.

Here is the output of npm list react

image-editor-vanilla@0.0.0 /home/faisal/dev/git/external/image-editor-vanilla
+-- filerobot-image-editor@4.8.0
| +-- react-dom@18.2.0
| | `-- react@18.2.0 deduped
| +-- react-konva@18.2.10
| | +-- its-fine@1.2.5
| | | `-- react@18.3.1 deduped
| | +-- react-reconciler@0.29.2
| | | `-- react@18.3.1 deduped
| | `-- react@18.3.1 deduped
| +-- react@18.2.0
| `-- styled-components@5.3.5
|   `-- react@18.2.0 deduped
`-- react-filerobot-image-editor@4.8.0
  +-- @scaleflex/icons@2.6.3
  | `-- react@18.3.1 deduped
  +-- @scaleflex/ui@2.7.0
  | +-- @tippyjs/react@4.2.6
  | | `-- react@18.3.1 deduped
  | `-- react@18.3.1 deduped
  +-- react-dom@18.3.1
  | `-- react@18.3.1 deduped
  +-- react@18.3.1
  `-- styled-components@5.3.11
    `-- react@18.3.1 deduped

[AhmeeedMostafa]

@mohammedfaisal I've updated the versioning of the vanillajs's package.json to avoid such multiple react versions, so you could install the new version v4.8.1

[mohammedfaisal]

That solved the issue. Thank you so much @AhmeeedMostafa