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

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.

Related

Netlify and yarn not finding Github package

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.

Cypress CI vsts not finding binary

Could you please give me some advise on how to deal with this issue.
Build Pipeline
npm install
package.json
"dependencies": {
"cypress": "^3.4.1"
}
Release
Powershell command
npm ./node_modules/.bin/Cypress run
The cypress npm package is installed, but the Cypress binary is missing.
2019-10-07T18:04:59.5720120Z We expected the binary to be installed here:
There are some examples on how to cache ~/.npm but nothing seems to work so far. Examples on how to include cypress.io in your vsts are at the building stage and not after release.
According to the error log, it has provided a solution about this. You should run the cypress install command first and then the error will be fixed.
As my test, since I don't have a cypress.json file, so I need run the open command to
automatic generated get the json file and project sample.
Then the open command run as expected.
But because I run the open command in interactive mode and I don't have the cypress.json file in my artifacts, the taks finally failed.
So if you have cypress.json in your repo or artifacts, you just need to add
.\cypress install
in your powershell command.
And if not, you can add the related json file and folder to your repo or artifacts and then the run command will work as your expected.

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

How do I make changes to the v-slider component and test it in my app?

I tried editing inside node_modules but the files are taken from dist and src seems to be ignored.
I tried npm run build to see if I can push my changes to dist but that doesn't work either as other dependencies seem to be missing.
UPDATE:
I followed the instructions about set up dev env in the Contributing section of the docs.
Made the changes and did yarn and yarn build
But the dist folder is identical to the one without my changes
What gives?
Instructions in the set up dev env in the Contributing section work.
After running "yarn build" in the cloned repository folder, you can copy the contents of the dist folder under packages/vuetify to the dist folder under node_modules/vuetify of the app being developed and your changes can be tested.
You can also do npm run build inside packages/vuetify for subsequent changes.
You can edit code in 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

How can I make Heroku install devDependencies?

I would like to have Heroku build my app after I push it so that I don't have to push the build folder up every time I make a change. However Heroku only installs the dependencies from the package.json and grunt (my build tool) and all of its components are in devDependencies. I would like to keep them there where they belong. What's the workaround here?
UPDATE: as pointed out in the comments this is no more needed because since 2018 heroku changed its default behaviour and dev dependencies are automatically installed
ORIGINAL ANSWER
Heroku by default installs only the production dependencies, ignoring the development dependencies under devDependencies.
Setting the npm production variable to false do the trick:
heroku config:set NPM_CONFIG_PRODUCTION=false
More info are available at the Heroku Node.js Support page.
Keeping NPM_CONFIG_PRODUCTION true, I used Heroku's script hooks:
"scripts": {
...
"heroku-prebuild": "export NPM_CONFIG_PRODUCTION=false; export NODE_ENV=; NPM_CONFIG_PRODUCTION=false NODE_ENV=development npm install --only=dev --dev",
"heroku-postbuild": "export NPM_CONFIG_PRODUCTION=true; export NODE_ENV=production;",
...
},
(Finally) worked for me.
scripts": {
...
"heroku-prebuild": "npm install --only=dev"
}
This was enough for me. Thanks to PixnBits for the hint about heroku-prebuild.
Also - my problem was with babel. I ended up moving babel-preset-es2015 and other presets into dependencies otherwise babel complained about presets.
Update: 8/11/2017 I've been having trouble with this. It seems like things have changed (and npm is on 5.3 now). But what I see is that the heroku-prebuild script is getting run, and then the post-install script is getting run (but I was only trying to install -dev).
So what I have been doing that works is to just run:
heroku config:set NPM_CONFIG_PRODUCTION=false
And just leave it set that way. I'd love a better solution.
you can use this in your build script "build": "npm install --only=dev" should in case you still want to perform more operations e.g transpiling your code with babel you can do something like this "build": "npm install --only=dev && babel src --out-dir dist --copy-files"
To unintall dependencies you need to do these
Update NPM_CONFIG_PRODUCTION
heroku config variable set
NPM_CONFIG_PRODUCTION=false
Add heroku-prebuild:
scripts": {
...
"heroku-prebuild": "npm install"
}
or
scripts": {
...
"heroku-prebuild": "npm install --only=dev"
}
Since 1 March 2018 Heroku installs devDependencies by default, and then prunes them after the build step is done:
By default, Heroku will install all dependencies listed in
package.json under dependencies and devDependencies.
After running the installation and build steps Heroku will strip out
the packages declared under devDependencies before deploying the
application.
Heroku uses the lockfiles, either the package-lock.json or yarn.lock,
to install the expected dependency tree, so be sure to check those
files into git to ensure the same dependency versions across
environments.
Link
I found this highly confusing. Even though Heroku says that their default since 2018 is to install all dependencies, they also set the env var NODE_ENV=production by default. This is good because it causes/allows for pruning, but it is bad because it means NPM will not install devDependencies.
To avoid this without messing with environment variables and their possible side effects, we can append --production=false to npm and it will install dependencies and devDependencies.
In our case, in package.json in scripts we have a line:
"install": "npm i --prefix ... --production=false"
My answer similar to others above with the additional references that seem to explain why it's not actually working by default like Heroku suggests.

Resources