Debugging a plugin that can't be enabled

Developers: Plugin & API
1

Hello there, so I am new at developing obsidian plugins and I face an error trying to enable mine. (Be ready for a lot of newby questions).

Context and problem

I want to contribute to the obdisidian-annotator plugin. Since I never contributed to obsidian plugins before I followed the build a plugin tutorial and it works just fine.
So then I forked and cloned the annotator plugin into my .obsidian\plugins, ran npm install and npm run dev. No errors just a warning about a circular dependency. But when I open my test vault and try to enable it, it does not work and there is a pop up with “failed to load plugin obsidian-annotator”.
Following this post I tried to debug. When opening the console with ctrl-shift-i I see this error:

app.js:1 Plugin failure: obsidian-annotator TypeError: Cannot read properties of undefined (reading 'split')
    at anonymous (VM323 plugin:obsidian-annotator:22:407134)
    at e.<anonymous> (app.js:1:2267896)
    at app.js:1:239667
    at Object.next (app.js:1:239772)
    at a (app.js:1:238490)

In the source code it refers to the line , [O1,U1] = Jq.versions.node.split(".").map((e => Number(e))); and yes Jq.versions has no attribute node.

What I understood about plugin development and my problem

I am not familiar with react development (I just had one class un Uni) and even less with obsidian plugins. But i understood that when I run npm run dev it creates a main.js file and that it is this file that is used by obsidian. So this is this file that I can see in the inspector of obsidian and not my files.
I have seen that I can see my code in the inspector if I run app.plugins.plugins["[Plugin ID]"].constructorin the console but my app.plugins.plugins only contains the sample plugin and not the annotator plugin that I can’t enable. Will I see my plugin in here once enabled or am I already supposed to see it ?
I tried to debug from VSCode but it never triggers my breakpoints.

My problem here is that I can’t even understand where is my problem since I fail to debug. I think that this problem might come from a dependency since this project has not been updated since a year or so but I’m not even sure about that.

My environment

Obsidian 1.8.9
Node 18.20.4
NPM 10.7.0
Yarn 1.22.22
React 19.0.0

So do you have any tips on how to develop / debug an obsidian plugin ? I’ll take anything.
I am sorry if I just missed something in the documentation but I can’t find any post about problems for enabling plugins.

2

You can set breakpoints directly in the Obsidian dev tools instead of VSCode which might help you debug the issue?

3

Are you talking about this kind of debug ?

image
image1917Ă—343 78.3 KB

Because I already tried it and this is how I saw that Jq.versions.node is undefined.
It is just that this code isn’t mine, but the one generated (if I understood correctly how obsidian plugins are developed), so I don’t understand the error and don’t know where/how to act on it.

4

Ah, never mind then :sweat_smile:.

I took a look at the plugin, and it looks like they didn’t commit their package-lock.json which could be causing some issues if the dependencies have changed since the last release. I was able to get obsidian-annotator to build and run on my linux desktop with this:

git clone [email protected]:elias-sundqvist/obsidian-annotator.git
cd obsidian-annotator
git submodule init
git submodule update
nvm use 16
npm instal -g yarn
# npm "time travel" option, install dependencies as it would have at the time of the last commit
npm install --before 2024-01-09T00:00:00Z
npm run build
5

Oh wow it works ! Thank you so much for your time.
May I add another question, how did you find out that it needed Node 16 and installation from 2024-01-09 ?

6

You’re welcome!

They have a GitHub workflow setup here That uses node 16 so I took it from there.

You’ll probably want to remove package-lock.json from .gitignore and commit package-lock.json so you don’t have to keep doing the --before thing.

1 Like
7

Ok, yes, I’ll do that. Thanks again !