Since my package.json and .git are not on the same level, I referred to the custom directory of the docs.
error
yarn run v1.22.17
error Couldn't find a package.json file in "/Users/home/project"
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
husky - pre-commit hook exited with code 1 (error)
directory structure
project
│ .git
│
└─── admin
│ │
│ └───frontend(using js and React)
│ │ package.json
│ └─── .husky
│ │
│ └───backend(using js and Node.js)
└─── engine(using Rust)
package.json
"devDependencies": {
...
"husky": "^8.0.1",
"lint-staged": "^13.0.3",
},
"scripts": {
"start": "webpack serve --progress --mode development",
"build": "webpack --progress --mode production",
"prepare": "cd ../.. && husky install admin/frontend/.husky && husky add admin/frontend/.husky/pre-commit \"yarn run lint-staged\""
},
"lint-staged": {
"**/*.{js, jsx, ts, tsx}": [
"prettier --write",
"eslint --fix"
]
}
But when I git commit, I get the above error. how can i fix it?
Related
I am a newbie learning Vue.js and I am using it with Laravel. I have decent experience with Laravel. Previously, without any frontend setup, I simply used to go to http://localhost/my-project/public and my Laravel homepage would display as everything used to be in the public directory.
Now I am using Vue with Vite as my build tool. After running npm run build, the build assets by Vite are placed inside public/build directory. I run the dev environment using npm run dev and php artisan server and I can access the app on http://localhost:8000 but how do I access my app without using Artisa or without any dev servers running?
This is my /public directory structure:
│ .htaccess
│ favicon.ico
│ index.php
│ robots.txt
│
├───build
│ │ manifest.json
│ │
│ └───assets
│ app.5bcb0e65.js
│ app.dd96aa6d.css
..other images, fonts
Currently, When I go to the URL http://localhost/my-project/public/dashboard, I see nothing but a blank white screen and an error in the console saying [Vue Router warn]: No match found for location with path "/my-project/public/dashboard" but with php artisan server, I can access http://localhost:8000/dashboard without any issues.
This is my routes\web.php file contents:
...
Route::any('/', function () {
return view('welcome');
});
Route::any('/{slug}', function () {
return view('welcome');
})->where('slug', '([A-z\d\-\/_.]+)?');
I'm trying to upgrade my angular 13 NX workspaces to angular 14, but somehow I can't get my jest unit tests to work properly. I tried the following from zero:
Install #angular/cli and nx globally:
npm install --global #angular/cli#latest
npm install --global nx#latest
Open and cmd in a path without spaces
npx create-nx-workspace
> test
> angular
> demo
> scss
Result:
Nx is creating your v13.10.5 workspace
So now I could migrate to the latest NX workspace version
cd test
nx migrate latest
The #angular/cli version is still on 13, so I changed this in the root package.json to 14.0.1 (nx removes the version annotations ~ and ^...)
npm install doesn't work out. jest-preset-angular#11.1.2 requires #angular-devkit/build-angular#">=0.1002.4" while in the workspace this is a dependency fixed at #angular-devkit/build-angular#"14.0.1":
npm ERR! Found: #angular-devkit/build-angular#13.3.7
npm ERR! node_modules/#angular-devkit/build-angular
npm ERR! dev #angular-devkit/build-angular#"14.0.1" from the root project
npm ERR! peer #angular-devkit/build-angular#">=0.1002.4" from jest-preset-angular#11.1.1
npm ERR! node_modules/jest-preset-angular
npm ERR! dev jest-preset-angular#"11.1.2" from the root project
So I run update instead:
npm update
npx nx migrate --run-migrations
I'm able to run the project
npm start -- --open
Before we can run the command for the unit tests, add the following script under the root package.json scripts section:
{
...,
"scripts: {
...,
"nx": "nx"
}
}
Now I'm unable to run the unit tests:
npm run nx run-many -- --target=test --projects=demo --watch=false --browsers=ChromeHeadless
FAIL demo apps/demo/src/app/app.component.spec.ts
● Test suite failed to run
Cannot find module '#angular/core/testing' from '../../node_modules/jest-preset-angular/build/config/setup-jest.js'
Require stack:
C:/repos/b/test/node_modules/jest-preset-angular/build/config/setup-jest.js
C:/repos/b/test/node_modules/jest-preset-angular/setup-jest.js
src/test-setup.ts
at Resolver.resolveModule (../../node_modules/jest-resolve/build/resolver.js:324:11)
Note that the module is definitely installed:
Other Q&A's suggest updating jest-preset-angular, so I did. I changed it to 12.1.0 in the package.json. This requires jest#28.1.1, so changed that too. And ts-jest should be at 28.0.5.
Running npm update succeeds now. But running the unit tests
npm run nx run-many -- --target=test --projects=demo --watch=false --browsers=ChromeHeadless
now gives the following errors:
ReferenceError: document is not defined
NG0200: Circular dependency in DI detected for TestComponentRenderer. Find more at https://angular.io/errors/NG0200
NG0200: Circular dependency in DI detected for InjectionToken DocumentToken. Find more at https://angular.io/errors/NG0200
...
It litterally suggests the following:
The error below may be caused by using the wrong test environment, see https://jestjs.io/docs/configuration#testenvironment-string.
Consider using the "jsdom" test environment.
So I installed it:
npm i --save-dev jest-environment-jsdom
And updated the root jest.config.js:
module.exports = {
projects: getJestProjects(),
testEnvironment: 'jest-environment-jsdom'
};
This still gives me the same error. I also tried with testEnvironment: 'jsdom' without success. So how can I fix this? Or do I have to wait until the NX developers release a new stable version?
As of today (like just now...) I was able to upgrade to 14.
nx migrate latest
Open the root package.json file
restore the ~ and ^
remove the #angular/eslint packages which are still on 13
manually change #angular/cli to 14.0.0
Then npm update and npx nx migrate --run-migrations were working as expected. You'll see warnings about the tsconfig. You need to open each library's project.json and add
"targets:build:options:tsConfig": "libs/my-lib/tsconfig.lib.json"
The test section doesn't need modifications, it would say that the tsconfig field there is deprecated.
This is my final root package.json
{
"name": "mintplayer-ng-bootstrap",
"version": "0.0.0",
"license": "MIT",
"scripts": {
"ng": "nx",
"nx": "nx",
"postinstall": "node ./decorate-angular-cli.js && ngcc --properties es2020 browser module main",
"start": "nx serve",
"build": "nx build",
"test": "nx test"
},
"private": true,
"dependencies": {
"#angular/animations": "~14.0.2",
"#angular/cdk": "~14.0.1",
"#angular/common": "~14.0.2",
"#angular/compiler": "~14.0.2",
"#angular/core": "~14.0.2",
"#angular/forms": "~14.0.2",
"#angular/platform-browser": "~14.0.2",
"#angular/platform-browser-dynamic": "~14.0.2",
"#angular/router": "~14.0.2",
"#mintplayer/ng-pagination": "~14.0.0",
"#nrwl/angular": "14.3.5",
"bootstrap": "^5.1.3",
"bootstrap-icons": "^1.7.2",
"ngx-highlightjs": "~6.1.1",
"qrcode": "^1.5.0",
"rxjs": "~7.4.0",
"tslib": "^2.0.0",
"zone.js": "~0.11.4"
},
"devDependencies": {
"#angular-devkit/build-angular": "~14.0.2",
"#angular/cli": "~14.0.0",
"#angular/compiler-cli": "~14.0.2",
"#angular/language-service": "~14.0.2",
"#nrwl/cli": "14.3.5",
"#nrwl/cypress": "14.3.5",
"#nrwl/eslint-plugin-nx": "14.3.5",
"#nrwl/jest": "14.3.5",
"#nrwl/linter": "14.3.5",
"#nrwl/workspace": "14.3.5",
"#types/jest": "27.4.1",
"#types/node": "16.11.7",
"#types/qrcode": "^1.4.2",
"#typescript-eslint/eslint-plugin": "~5.24.0",
"#typescript-eslint/parser": "~5.24.0",
"cypress": "^9.1.0",
"eslint": "~8.15.0",
"eslint-config-prettier": "8.1.0",
"eslint-plugin-cypress": "^2.10.3",
"jest": "27.5.1",
"jest-preset-angular": "11.1.2",
"ng-packagr": "^14.0.2",
"postcss": "^8.4.5",
"postcss-import": "^14.1.0",
"postcss-preset-env": "^7.5.0",
"postcss-url": "^10.1.3",
"prettier": "^2.6.2",
"ts-jest": "27.1.4",
"typescript": "~4.7.3",
"nx": "14.3.5"
}
}
The related project is hosted here
I tried to deploy my app to Heroku, but it is not working correctly. (using create-react-app for frontend and node.js in the backend)
My full app structure looks like this:
my-app
|
| ____ backend
| └── ...
| ____ frontend
└── ...
In the package.json I've added --dest ../backend/public to the build script:
scripts": {
"start": "react-scripts start",
"build": "react-scripts build --dest ../backend/public",
},
Then I've ran these commands in the CMD on my backend folder:
> git init
> heroku create <my-app-name>
And this command on my frontend folder:
npm run build
Then, in the CMD on my backend folder:
> git add .
> git commit -m “<commit-messgae>”
> git push heroku master
When I go the my heroku app link I see the "Hello Backend!" message that I wrote in my server.js file:
app.get('/', (req, res) => {
res.send('Hello Backend!')
})
Please let me know what am I doing wrong. Thanks.
I'm pretty new in Sails.
I've created a new web-app from the Sails template and tried to upload it to Heroku. Everything was fine except for the assets, none of the assets are found (js, css, images, etc).
I've found out that Sails uses Grunt for copying the files to a .tmp folder. I've checked and I have Grunt added to my package.json file. I've also added a Procfile wit the web: node app.js command and the NODE_ENV variable it's pointing to production in Heroku.
I didn't changed any of the Grunt tasks, the Gruntfile.js file and the /tasks directory are by default.
Any ideas of what else I could check?
I solved this issue through a different mean. On top of including some of the grunt deps in the OP's answer, I added postinstall in the scripts section of package.json:
"scripts": {
"start": "NODE_ENV=production node app.js",
"test": "npm run lint && npm run custom-tests && echo 'Done.'",
"lint": "eslint . --max-warnings=0 --report-unused-disable-directives && echo '✔ Your .js files look so good.' && htmlhint -c ./.htmlhintrc views/*.ejs && htmlhint -c ./.htmlhintrc views/**/*.ejs && htmlhint -c ./.htmlhintrc views/**/**/*.ejs && htmlhint -c ./.htmlhintrc views/**/**/**/*.ejs && htmlhint -c ./.htmlhintrc views/**/**/**/**/*.ejs && htmlhint -c ./.htmlhintrc views/**/**/**/**/**/*.ejs && htmlhint -c ./.htmlhintrc views/**/**/**/**/**/**/*.ejs && echo '✔ So do your .ejs files.' && lesshint assets/styles/ --max-warnings=0 && echo '✔ Your .less files look good, too.'",
"custom-tests": "echo \"(No other custom tests yet.)\" && echo",
"postinstall": "grunt build", // added this
...
The effect of this on heroku is the required running of the grunt task build, which compile and copy the assets to the appropriately referenced location (i.e.: .tmp)
The solution was pretty easy. Turns out that I didn't had the Grunt dependencies added for production env, only for development env in my package.json. I've added them and worked perfectly.
"dependencies": {
"#sailshq/connect-redis": "^3.2.1",
"#sailshq/lodash": "^3.10.3",
"#sailshq/socket.io-redis": "^5.2.0",
"async": "2.0.1",
"sails": "^1.0.2",
"sails-hook-apianalytics": "^2.0.0",
"sails-hook-organics": "^0.13.0",
"sails-hook-orm": "^2.0.0-16",
"sails-hook-sockets": "^1.4.0",
"sails-postgresql": "^1.0.1",
"grunt": "1.0.1", // I've added these two lines
"sails-hook-grunt": "^3.0.2" // I've added these two lines
},
"devDependencies": {
"#sailshq/eslint": "^4.19.3",
"#sailshq/htmlhint": "^0.9.16",
"#sailshq/lesshint": "^4.6.6",
"grunt": "1.0.1",
"sails-hook-grunt": "^3.0.2"
},
I've installed a fresh laravel app on my VPS and am trying to build it, but it hangs whenever webpack tries to build node_modules/vue/dist/vue.common.js.
Here's the output in the terminal (project name omitted):
root#driima:/var/www/html/PROJECT# npm run dev
> # dev /var/www/html/PROJECT
> node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules
10% building modules 8/9 modules 1 active ...T/node_modules/vue/dist/vue.common.js
And my package.json file:
{
"private": true,
"scripts": {
"dev": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules",
"watch": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules",
"hot": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot",
"production": "node node_modules/cross-env/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --progress --hide-modules"
},
"devDependencies": {
"axios": "^0.15.2",
"laravel-mix": "^0.6.1",
"vue": "^2.0.1"
}
}
Could it be a file permissions issue? And if so, what should they be?
EDIT:
I have a file resources/assets/js/app.js which calls import './bootstrap';, and inside bootstrap.js is the following:
import Vue from 'vue';
import axios from 'axios';
window.Vue = Vue;
window.axios = axios;
window.axios.defaults.headers.common = {
'X-CSRF-TOKEN': window.Laravel.csrfToken,
'X-Requested-With': 'XMLHttpRequest'
};
It appears to be hanging when importing Vue, as when I skip importing my bootstrap file, everything compiles successfully.
Go ahead and update your deps. This was an issue caused by a minor patch from one of our webpack deps acorn. Since yesterday they have published a new patch fixing the issue.
Here's relevant issue: Webpack 2 hangs on all projects after update