Problem with Summernote Lite in Electron apps

Wappler General Bugs
1

Hi,

I’m still very new to Wappler, and still on the trial plan, so I’m still figuring some things out and I’m not sure if I’m missing something here or this is a bug.

I have added the Summernote Lite Textarea to my page, and in the Wappler design tab, it works perfectly fine. But as soon as I run it and it starts in Electron, the textarea is not displayed correctly and the console spits out various javascript errors, which I have attached below.

Capture
Capture1194×713 30.7 KB

2

Bumping this since Summernote is vital for my project. I also tried this on a fresh electron project and has the exact same issue. Is this a bug?

DropdownUI.js:60 Uncaught TypeError: i(...) is not a function
    at Module.51 (DropdownUI.js:60)
    at n (bootstrap:19)
    at 0 (bootstrap:83)
    at summernote-lite.min.js:2
    at 0 (universalModuleDefinition:7)
    at universalModuleDefinition:1
51 @ DropdownUI.js:60
n @ bootstrap:19
0 @ bootstrap:83
(anonymous) @ summernote-lite.min.js:2
0 @ universalModuleDefinition:7
(anonymous) @ universalModuleDefinition:1
BaseComponent.js:38 ReferenceError: $ is not defined
    at n.constructor (summernote.js:13)
    at new n (appConnect.js:534)
    at n.$addChild (BaseComponent.js:218)
    at n.<anonymous> (BaseComponent.js:293)
    at Object.walk (dom.js:180)
    at dom.js:185
    at Array.forEach (<anonymous>)
    at Object.walk (dom.js:184)
    at dom.js:185
    at Array.forEach (<anonymous>)
4

Seeing the errors it looks like jQuery is missing or not loaded before the summernote js.

5

Hi,

Thanks. I specifically double-checked this too since I thought it was the error, but summernote was the last to load, well after JQuery.

6

You use it in an electron project? Then it is probably related to the module loader, it sees some of the includes as a module. Not sure what the best solution is in this case, I know we faced the same problem with electron and required jQuery instead of using the script tag.

7

Yes, that’s correct, in an Electron project. Is there any workaround? For what I plan to make I need an in-depth text editor like Summernote.

8

Perhaps following article helps:

https://ourcodeworld.com/articles/read/202/how-to-include-and-use-jquery-in-electron-framework

https://www.electronjs.org/docs/faq#i-can-not-use-jqueryrequirejsmeteorangularjs-in-electron

9

I’ll give this a go. If not, I guess I’ll have to make this a web project for now until there’s an official fix. Is there a way in wappler to migrate a desktop app to a browser based one? (I can use the browser platform on the Desktop project, but routes are broken, I have another thread about that, and I’d want to use PHP instead)

10

If you don’t use node in the renderer process then simply disable it, then jQuery works, the other way is renaming the require function or using require to load jQuery.

11

This fixed it, amazing, thank you very much! I can crack on with this project now as soon as I can figure out the issue with routes not working on desktop projects. (You wouldn’t have any ideas on this, would you?)

Otherwise, in the meantime, is it possible to migrate over to a PHP based project in Wappler?