Errors from `yarn build` following quick start guide

Plugin Development
1

hi, I was working on a plugin couple of months ago and mostly got it working (the docs helped a lot and I was impressed with the plugin architecture, it was pretty easy to get going, so kudos for it). I had some distractions so put it aside for a bit. recently, I had a new idea for a plugin and was going to try building it, but when I pulled the latest from the LipSurf/plugins repo I ran into some build problems. I tried to go back to square one and get the “hello world” example working again, but no luck.

My branch for my plugin was based on a commit around v3.0.0 and that branch still builds and I’m able to load the resulting .ls into LipSurf and use it. But on later versions I get this error in building anything (same error for all plugins in src dir)

Cannot find type definition file for 'lipsurf-types/extension'.

this is all I did to reproduce it:

  • clone LipSurf/plugins
  • checkout v3.4.3 (on latest master I got a different error *)
  • run yarn, no problems
  • run yarn build, see the Cannot find type definition error

I’m using yarn version 1.22.4, node version v13.13.0, on mac OS 10.14, if that matters. But I was working on a Windows PC with Cygwin also and had the same problems there … that was the same yarn version but node v14.0.0. I’m very unfamiliar with this ecosystem so bear with me (I’m usually a backend programmer)

I can obviously use my code on the branch from v3.0.0, the hello world example builds there if I make this change
/// <reference types="lipsurf-types/extension"/>
replaced with
/// <reference types="lipsurf-plugin-types"/>

but I’m worried that code will rot eventually and fail to work, so would like to figure out and use the latest. thanks!!

*this is error on master from yarn:
error Couldn't find match for "e9944eae5af46e2f47072af45578d4d3795807bf" in "refs/heads/master,refs/tags/v3.1.0,refs/tags/v3.2.0,refs/tags/v3.3.0,refs/tags/v3.3.1,refs/tags/v3.3.2,refs/tags/v3.4.0,refs/tags/v3.4.1,refs/tags/v3.4.2,refs/tags/v3.4.3" for "https://github.com/lipsurf/cli".

2

@michiakig
Thanks for the clear diagnosis.

There was a dependency issue (I need to improve the workflow so this doesn’t happen). I checked out your code and got it working with the latest (master).

git remote add official https://github.com/lipsurf/plugins
git fetch official
git rebase official/master
yarn
yarn build (or yarn watch)

Also, I noticed you’re using codepoints instead of utf8 characters directly. That was an issue in an older version. You don’t need to do that anymore. Don’t hesitate to let me know if you run into any other issues, more than happy to help!

3

Thanks for the quick fix, it’s working for me now on my Mac. I did run into some other yarn issues on Windows, but I’m not sure it’s related, there might be something wrong with my node/yarn/etc on that machine. Here’s the error I got if you have a min to look. I’m going to set up my environment there again from scratch and debug again. Out of curiosity should I keep using yarn 1.22.4 or should it work with use yarn 2? And is it sensitive to the node version? Sorry if this is taken care of somewhere in the docs, I didn’t see it…

Yes I had run into an issue and meant to post about it but the codepoints worked so forgot about it. Thanks for the heads up that it’s fixed too. I did have another issue with the regex for matching URLs to start the plugin context, I had to use a simpler regex matching the domain only instead of trying to narrow to a specific path. But that was from a couple months back so might be outdated

1 Like
4

There’s a PR in the plugin repo with some Windows fixes. I haven’t tried it myself but if that works for you I will merge that more quickly. I’m using the same version of yarn. Haven’t looked into yarn 2 yet.

The version of node should be great than 11. That’s specified in package.json and it will error if you’re on an incompatible version.

Hmm, I’m not aware of any issue like that. If you share with me the built plugin I will look into it.

5

ok cool I will take a look and report back

Here is the built plugin

I want it to match a URL like this https://kitsun.io/deck/5ea5a8b9b9a9f8380929a27e/reviews and this regex ( /^https:\/\/kitsun\.io\/deck\/.*\/reviews$/) appears to work in the JS console:

> window.location.href.match(/^https:\/\/kitsun\.io\/deck\/.*\/reviews$/)
["https://kitsun.io/deck/5ea5a8b9b9a9f8380929a27e/reviews", index: 0, input: "https://kitsun.io/deck/5ea5a8b9b9a9f8380929a27e/reviews", groups: undefined]

but maybe something else I am missing

6

I got distracted with some other projects but I’m working on my plugin again, just going to post here in case it’s useful for anyone else. I ended up solving the problems I was having with the build by installing node and yarn inside the Windows subsystem for Linux (just a basic ubuntu from here https://docs.microsoft.com/en-us/windows/wsl/install-win10) and running yarn build there.

I also tried Docker but that actually didn’t work for me, I had other errors. I’m sure there’s a way to build this kind of project natively in Windows, but WSL was pretty easy to set up.

1 Like
7

WSL is a great option! There is another core developer on windows now, so development should be smoother there these days.

1 Like