How to import a forked npm package of Github in Laravel Mix?

Question

In package.json, I have:

"vue-search-select": "github:my-github-account/vue-search-select"

And then run npm install, no error.

In app.js, I try to import the forked package:

import { ModelSelect } from 'vue-search-select';

When I run npm run watch, got the below message:

Module not found: Error: Can't resolve 'vue-search-select'

UPDATE:

I compared the original version and forked version in node_modules: Original contains dist folder but forked version don't have. In github, the original one also don't have this folder. And dist is included in .gitignore.

VonC · Accepted Answer · 2022-03-22T14:25:50.967

2

I understand that, for package.json GitHub URL, As of version 1.1.65, you can refer to GitHub URLs as just foo:user/foo-project, as seen here.

But I would still recommend a more complete URL instead:

git+ssh://user@hostname:project.git#commit-ish
git+ssh://user@hostname/project.git#commit-ish
git+http://user@hostname/project/blah.git#commit-ish
git+https://user@hostname/project/blah.git#commit-ish

That way, you control the scheme (HTTPS or SSH) and can check which credentials (cached username/password for HTTPS or private key for SSH) is used.

The OP Wilson comments in the discussion that adding dist/ to the repo could be an option, as in here.
A prepare script can be declared in the package.json, such as this one.

  "scripts": {
    "build": "tsc",
    "prepare": "npm run build"
  },

As noted in Wilson's answer

the important thing is that the prepare script is added in forked package, not in the project that using the package.

edited Mar 22 '22 at 14:25

answered Mar 22 '22 at 08:17

VonC

1,262,500
529
4,410
5,250

Thanks. But I ran `npm install` with no errors. And I can check the code in `node_modules/vue-multiselect` is match with the forked version. Seems `foo:user/foo-project` work fine? – Wilson Mar 22 '22 at 08:30
@Wilson Strange, if the installation works, something else must trigger the `Module not found` error – VonC Mar 22 '22 at 08:36
I compared the original version and forked version in `node_modules`: Original contains `dist` folder but forked version don't have. In github, the original one also don't have this folder. And `dist` is included in `.gitignore`. – Wilson Mar 22 '22 at 08:47
Should I remove `dist` in `.gitignore`? – Wilson Mar 22 '22 at 08:49
@Wilson dist is usually ignored (https://github.com/github/gitignore/blob/ce5da10a3a43c4dd8bd9572eda17c0a37ee0eac1/Node.gitignore#L92), so you should leave it ignored. – VonC Mar 22 '22 at 08:51
But I don't know how to solve this issue.I think the reason is that the `dist` folder is only in npm but not in github. – Wilson Mar 22 '22 at 08:57
@Wilson dist content is supposed to be regenerated, which is why it is not versioned (plus, a Git repository is not a good fit for large binaries) – VonC Mar 22 '22 at 09:14
But it doesn't regenerated when I run `npm run watch` / `npm install` – Wilson Mar 22 '22 at 09:17
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/243177/discussion-between-vonc-and-wilson). – VonC Mar 22 '22 at 09:26

Wilson · Answer 2 · 2022-03-22T14:02:24.457

1

Finally, I found a solution:

Add "prepare": "npm run lib:build" (or something else depends on the package how to build, can check it in package.json) to scripts of package.json to the forked package. And push to github.

Then, in the project that using the forked package, just keep "package-name": "github:my-github-account/package-name" in package.json and run npm install again. No other changes.

edited Mar 22 '22 at 14:02

answered Mar 22 '22 at 13:57

Wilson

755
4
12

Yes, I did mention the prepare script in my own edited answer – VonC Mar 22 '22 at 14:17
@VonC Thanks, I think the important thing is that the `prepare` script is add in forked package not in the project that using the package. I got it wrong at first. – Wilson Mar 22 '22 at 14:24

How to import a forked npm package of Github in Laravel Mix?

2 Answers2