Webpack issue/question

Hi. Need some help from JS/Webpack experts.

I am building a plugin and in the dist folder I get not only index.js but also 1.index.js.
When Joplin starts with this plugin it complaints that the 2nd script is missing:

Error: Cannot find module './1.index.js'
Require stack:
- C:\dev\joplin\packages\app-desktop\services\plugins\plugin_index.html
    at Module._resolveFilename (internal/modules/cjs/loader.js:961)
    at Function.i._resolveFilename (electron/js2c/renderer_init.js:39)
    at Module._load (internal/modules/cjs/loader.js:844)
    at Function.Module._load (electron/js2c/asar.js:769)
    at Module.require (internal/modules/cjs/loader.js:1023)
    at require (internal/modules/cjs/helpers.js:77)
    at Function.u.e (/C:/Users/MRR/.config/joplindev-desktop/tmp/plugin_com.whatever.wasm-exp.js:1)
    at onStart (/C:/Users/MRR/.config/joplindev-desktop/tmp/plugin_com.whatever.wasm-exp.js:1)
    at EventEmitter.<anonymous> (services/plugins/plugin_index.js:92)
    at EventEmitter.emit (events.js:310)
output.<computed> @ main-html.js:48
log @ C:\dev\joplin\packages\lib\Logger.js:181
error @ C:\dev\joplin\packages\lib\Logger.js:57
(anonymous) @ C:\dev\joplin\packages\lib\services\plugins\api\JoplinPlugins.js:47
Promise.catch (async)
(anonymous) @ C:\dev\joplin\packages\lib\services\plugins\api\JoplinPlugins.js:41
(anonymous) @ C:\dev\joplin\packages\lib\services\plugins\api\JoplinPlugins.js:8
__awaiter @ C:\dev\joplin\packages\lib\services\plugins\api\JoplinPlugins.js:4
register @ C:\dev\joplin\packages\lib\services\plugins\api\JoplinPlugins.js:34
(anonymous) @ C:\dev\joplin\packages\lib\services\plugins\utils\executeSandboxCall.js:50
(anonymous) @ C:\dev\joplin\packages\lib\services\plugins\utils\executeSandboxCall.js:8
__awaiter @ C:\dev\joplin\packages\lib\services\plugins\utils\executeSandboxCall.js:4
executeSandboxCall @ C:\dev\joplin\packages\lib\services\plugins\utils\executeSandboxCall.js:37
(anonymous) @ C:\dev\joplin\packages\app-desktop\services\plugins\PluginRunner.js:135
(anonymous) @ C:\dev\joplin\packages\app-desktop\services\plugins\PluginRunner.js:8
__awaiter @ C:\dev\joplin\packages\app-desktop\services\plugins\PluginRunner.js:4
(anonymous) @ C:\dev\joplin\packages\app-desktop\services\plugins\PluginRunner.js:108
emit @ events.js:310
EventEmitter.emit @ domain.js:482
onMessage @ electron/js2c/renderer_init.js:91

I checked the code and it seems that Joplin does not expect a plugin to have any scripts other than index.js. Can this be changed?

While we're at it, I think it'd also be useful for a plugin to contain some other non-js assets (for instance an icon), at the moment this does not seem possible either.

Just to test this I commented out the line that deletes the temp dir and copied missing files there manually before starting Joplin again.
Alas, this didn't help much because when index.js tries to import ./1.index.js the current dir (./) is not the one where the script is located and the import fails with the same error.

It's hard to tell without an example, but if there are additional scripts you need to compile, you would need to add them to the extraScript array:

joplin/README.md at dev · laurent22/joplin · GitHub

And by default everything under /src except .ts(x) files are copied to the .jpl, or at least should be.

I can share an example tomorrow but the gist of it is I have 3 js files in src and they get converted into 2 files under dist. I don't think extraScripts is going to help here.

Yes, this isn't an issue.

The issue is that, at least when loading a plugin from source dir, only the manifest and the main script are being read and copied to the temp dir wherethe script is then executed. Everything else is left behind either in plugin's source dir or in a temp dir where the jpl was unpacked.

To give a contrete example I have these files in my plugin's dist:


They all are included in .jpl. However when I run (dev) Joplin in .config/joplindev-desktop/tmp/ I only see index.js (renamed to <pluginId>.js) and no other files.

Ok I see what the issue is. The files are there (in the cache directory), but the path where they are located is not exposed to the plugin. To fix this, I've added a joplin.plugins.installationDir function that returns this path.

Thanks, though I am not sure how this is going to help.
If the main script is in .config/joplindev-desktop/tmp and it calls require(./1.index.js) it's going to fail anyway.

Also, you might want to consider unpacking each plugin into its own subfolder under cache to avoid name collisions when multiple plugins have e.g. 1.index.js or some other file with the same name.

This is a different issue - if you require 1.index.js from another index.js file, you need to compile index.js so that everything is packaged within one file. Dynamic import of JS files won't be supported by the plugin system.

Also, you might want to consider unpacking each plugin into its own subfolder under cache to avoid name collisions when multiple plugins have e.g. 1.index.js or some other file with the same name.

Yes that's how it already works.

Will the webpack config provided by the plugin generator be updated to enforce this?

Enforce what?

Right now if I create a new plugin from the template, add as a dependedncy for instance pdfjs-dist, and build the plugin, I get not only index.js and 1.index.js but also 2.index.js, 3.index.js, 4.index.js.
You're saying this isn't going to be supported and everything should be in one file. I presume there must be an option to get Weback to do so.
My question is, since I am using webpack config provided by the template, is this option going to be included in the template?

If you add a script that needs to be compiled separately from index.ts, you need to add it to the extraScripts array, there's not much more than that. When you do that you create a new entry point that's compiled down to one JS file with all the dependencies included.

If you mean the compiler should guess what's an entry point and what's a dependency, then no it won't do that because it's not possible to make such a guess.

I get the feeling that whatever you want to do already works, or if it doesn't it would be useful to see an example, otherwise we are discussing how to implement something that's already implemented.

I'll try providing an example.

But just to clarify - in my example with pdfjs-dist above there is only one index.ts initially. It's after I ran npm i I get 5 of them in dist.