Netlify and yarn not finding Github package - yarnpkg

I'm building a site with yarn and hosting it on Netlify. I want to integrate another repo as a package, but I'd rather not put that package on the npm registry because it's very limited use. I hosted the package publicly via GitHub here and added it to my package.json:
"dependencies": {
"#ourjapanlife/findadoc-localization": "^1.0.0",
.
.
.
}
I can build the site locally and everything runs fine. However, when I deploy to Netlify, I get the following error:
10:38:06 PM: [1/4] Resolving packages...
10:38:06 PM: error Couldn't find package "#ourjapanlife/findadoc-localization" on the "npm" registry.
info Visit https://yarnpkg.com/en/docs/cli/install for documentation about this command.
10:38:06 PM: Error during Yarn install
I've created a .yarnrc file as follows and added it to the root of my project:
#ourjapanlife:registry" "https://npm.pkg.github.com"
I've researched this a lot, but most of the advice relates to private GitHub repos. I'm fine with this package being public, but I don't want it centrally hosted because it's just some i18n files of little use to the wider community. This answer also looked promising, but switching from .npmrc to .yarnrc did not solve my issue.

A collaborator helped me resolve this by running:
yarn add https://github.com/ourjapanlife/findadoc-localization
And the resulting entry in package.json looks like this:
"dependencies": {
"#ourjapanlife/findadoc-localization": "https://github.com/ourjapanlife/findadoc-localization",
.
.
.
}
At this point I could delete the .npmrc / .yarnrc and remove the prenetlify step.
It builds successfully on Netlify and resolved to the latest package via yarn.lock.
It turns out in experimenting, I had switched between the npm and github registries and manually edited package.json. It's better to re-install via the command line.

Related

yarn not installing packages from workspace but instead tries pulling down from npmjs with turborepo

Version:
"packageManager": "yarn#1.22.19"
I have based my project off of the npx create-turbo#latest command.
I have eslint-config-custom and tsconfig projects inside my /packages folder which I reference in my three nodejs apps with:
"tsconfig": "workspace:*",
"eslint-config-custom": "workspace:*",
and in my root package.json workspaces are defined:
"workspaces": [
"apps/*",
"packages/*"
],
Unfortunately, when I run yarn or yarn install in the root folder, yarn pops up telling me to select a matching version:
yarn install v1.22.19
info No lockfile found.
[1/5] Validating package.json...
[2/5] Resolving packages...
Couldn't find any versions for "eslint-config-custom" that matches "workspace:0.0.0"
? Please choose a version of "eslint-config-custom" from this list: (Use arrow keys)
> 0.0.0
Same for the tsconfig dependency, then it only lists versions available for the packages with the same name on the main npmjs.com registry.
How do I get yarn to use the dependency from a workspace?
Additionally, how could I deal with them with a scope, and instead of tsconfig to install from #myOrg/tsconfig?
In your app's package.json, try these
"tsconfig": "*",
"eslint-config-custom": "*",
In pnpm, packages are installed by workspaces:*, but in other package managers you can do it by only *. We are using yarn, so * would be work.
Take a look at Offical Example.
If I understand it correctly, answer for the additional question is posted in github
discussions.
In package.json's name field, include your organization scope.
(#myOrg/package-name)
But don't change your folder's structure or it's name.

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

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.
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.
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.

Why can't I run yarn start?

For a few days I have been getting these messages:
*> yarn run v1.21.1 $ react-scripts start
There might be a problem with the project dependency tree. It is
likely not a bug in Create React App, but something you need to fix
locally.
The react-scripts package provided by Create React App requires a
dependency:
"eslint": "^6.6.0"
Don't try to install it manually: your package manager does it
automatically. However, a different version of eslint was detected
higher up in the tree:
/home/sol/Repository/node_modules/eslint (version: 6.3.0)
Manually installing incompatible versions is known to cause
hard-to-debug issues.
If you would prefer to ignore this check, add
SKIP_PREFLIGHT_CHECK=true to an .env file in your project. That will
permanently disable this message but you might encounter other issues.
To fix the dependency tree, try following the steps below in the exact
order:
Delete package-lock.json (not package.json!) and/or yarn.lock in your project folder.
Delete node_modules in your project folder.
Remove "eslint" from dependencies and/or devDependencies in the package.json file in your project folder.
Run npm install or yarn, depending on the package manager you use.
In most cases, this should be enough to fix the problem. If this has
not helped, there are a few other things you can try:
If you used npm, install yarn (http://yarnpkg.com/) and repeat the above steps with it instead.
This may help because npm has known issues with package hoisting which may get resolved in future versions.
Check if /home/sol/Repository/node_modules/eslint is outside your project directory.
For example, you might have accidentally installed something in your home folder.
Try running npm ls eslint in your project folder.
This will tell you which other package (apart from the expected react-scripts) installed eslint.
If nothing else helps, add SKIP_PREFLIGHT_CHECK=true to an .env file
in your project. That would permanently disable this preflight check
in case you want to proceed anyway.
P.S. We know this message is long but please read the steps above :-)
We hope you find them helpful!
error Command failed with exit code 1. info Visit
https://yarnpkg.com/en/docs/cli/run for documentation about this
command.*
I tried everything above, but nothing helps and I'm really upset about this situation because I can't get my code to work.
Can someone help me with easy instructions because I don't have time anymore to try and find a solution to the problem.
I could not solve the problem:
There might be a problem with the project dependency tree.
It is likely not a bug in Create React App, but something you need to fix locally.
The react-scripts package provided by Create React App requires a dependency:
"eslint": "^6.6.0"
Don't try to install it manually: your package manager does it automatically.
However, a different version of eslint was detected higher up in the tree:
/Users/elvestrindade/node_modules/eslint (version: 6.2.2)

How do I install vuetify directly from github?

When I try with
npm install vuetifyjs/vuetify#v1.5.2
I get "Cannot find package".
UPDATE:
There is a packages folder under which there is a vuetify directory.
I tried npm installing that folder. Everything appeared to go well until I started the dev server.
Now in the console log I see:
[Vuetify] Multiple instances of Vue detected
Seems to be related to https://github.com/vuetifyjs/vuetify/issues/4068 but I cannot tell what the solution is at this point.
I had the same issue to use my own version of Vuetify, waiting for my pull request being accepted.
Here what I did:
I build the vuetify project with my fix.
yarn
yarn build
Then I took the content of 'packages/vuetify' and put it in a new git repository. I remove the .gitignore to be able to commit built files (/es5, /lib, /lib-temp, /dist)
Finally I add this git repository to my project to replace my vuetify version:
npm install git+https://gitlab.com/GITLABUSERNAME/REPOSITORYNAME.git
Looking at the package.json file, the package doesn't have a name property, which it would need to have for you to be able to install it from GitHub.
So the short answer is that you can't install vuetify directly from GitHub via npm.
However, you can install it directly from npm:
npm install vuetify#1.5.2
You can't install vuetify directly from GitHub but you can edit code in 1 component node_modules/vuetify/lib/components/VSlider/VSlider.js Then, you install patch-package and execute path package vuetify Delete node modules and execute yarn to create new node modules Last, yarn serve, you see your code is work
https://www.npmjs.com/package/patch-package

Adding git repository with yarn results in error

I am just learning about yarn and npm.
I want to use a particular package that crashes my app. I found a project issue which looks like fix has been implemented and merged with master. A comment says npm package has not been updated yet.
I have added the package to my project:
yarn add react-widgets
I thought I could use yarn to add the package via git repository to get fixed version.
The package I want is
https://github.com/jquense/react-widgets
So I tried
yarn add https://github.com/jquense/react-widgets.git
I get error:
error Package "undefined#undefined" doesn't have a "name".
Firstly, is this error a problem with my use of yarn or a problem with react-widgets repository? I am assuming it should work to add it like this so please correct me if I am wrong.
Also, can I assume that if there is an updated npm package, that I will be able to update with yarn at that time?
I'm afraid it is impossible to do now. This git repo is actually several packages inside(main package is here) one repo and root package.json is not valid one - it doesn't have name description and this is fail reason. There is discussion about supporting this in yarn, but it hasn't been implemented yet(in npm too).

Resources