Could not find files on devDependencies - node.js

I have a package.json file that looks as following:
{
"name": "basics",
"version": "0.1.0",
"private": true,
"devDependencies": {
"concurrently": "3.4.0",
"react-scripts": "1.0.14",
"fsr-helpers": "file:../../fsr-helpers"
},
"dependencies": {
"history": "4.3.0",
"prop-types": "15.6.0",
"react": "16.0.0",
"react-dom": "16.0.0",
"react-router-dom": "4.2.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"eject": "react-scripts eject",
"e2e": "nightwatch",
"run-e2e": "./node_modules/.bin/concurrently -k 'npm start' 'npm run e2e'"
}
}
During the installation of packages, I've got the following error message:
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: core-js#2.4.1 (node_modules/fsr-helpers/node_modules/babel-polyfill/node_modules/core-js):
npm WARN enoent SKIPPING OPTIONAL DEPENDENCY: ENOENT: no such file or directory, rename '/home/developer/Desktop/fullstack-react-code/routing/basics/node_modules/.staging/core-js-4f416826' -> '/home/developer/Desktop/fullstack-react-code/fsr-helpers/node_modules/babel-polyfill/node_modules/core-js'
npm ERR! Maximum call stack size exceeded
npm ERR! A complete log of this run can be found in:
npm ERR! /home/developer/.npm/_logs/2018-03-01T21_00_59_918Z-debug.log
I suppose, that the error occurs, because of:
"fsr-helpers": "file:../../fsr-helpers"
in the devDependencies. The structure of the folder looks like:
and the content of the package.json is:
{
"name": "fsr-helpers",
"version": "1.0.0",
"private": true,
"main": "dist/index.js",
"dependencies": {
"react": "15.5.4",
"react-dom": "15.5.4"
},
"scripts": {
"test": "jest src --watch",
"compile": "./node_modules/.bin/babel -d dist/ src/"
},
"devDependencies": {
"babel-cli": "6.24.0",
"babel-core": "6.24.0",
"babel-jest": "19.0.0",
"babel-plugin-transform-es2015-modules-commonjs": "6.24.0",
"babel-preset-es2016": "6.22.0",
"babel-preset-react": "6.23.0",
"babel-preset-stage-2": "6.22.0",
"enzyme": "2.8.2",
"jest": "19.0.2",
"react-test-renderer": "16.0.0"
}
}
Why do I get the error:
Maximum call stack size exceeded
What does "fsr-helpers": "file:../../fsr-helpers" mean?

The "file:" syntax is a way to use local path to a package: https://docs.npmjs.com/files/package.json#local-paths
In your case it is looking for package the 2 levels up from the package.json (../../)
It should be file:./fsr-helpers instead if I read your folder structure correctly (in a folder directly inside your project).

Related

Can't resolve dependency, refering to root project - next#"^9.5.6-canary.13, next-routes#"^1.4.2"

I am trying for hours to resolve this issue, running from one error to the next one…
Trying everything from --legacy-peer-deps, --force npm audit fix, at this point I am not even able to install my packages without running into errors, and I don't understand what that error is saying:
npm ERR! Found: next#9.5.6-canary.18
npm ERR! node_modules/next
npm ERR! next#"^9.5.6-canary.13" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer next#">=2" from next-routes#1.4.2
npm ERR! node_modules/next-routes
npm ERR! next-routes#"^1.4.2" from the root project
My package.json:
{
"name": "project-name",
"version": "0.1.0",
"private": true,
"main": "index.js",
"scripts": {
"test": "next dev",
"dev": "node server.js",
"build": "next build",
"start": "next start"
},
"dependencies": {
"#apollo/client": "^3.3.19",
"apollo-boost": "^0.4.9",
"babel-loader": "^8.2.2",
"babel-register": "^6.26.0",
"dotenv": "^8.2.0",
"framer-motion": "^4.0.0",
"fs": "0.0.1-security",
"graphql": "^15.5.0",
"https": "^1.0.0",
"ignore-loader": "^0.1.2",
"lazysizes": "^5.3.2",
"next": "^9.5.6-canary.13",
"next-routes": "^1.4.2",
"node-webvtt": "^1.9.3",
"path": "^0.12.7",
"react": "^16.14.0",
"react-dom": "^16.14.0",
"sass": "^1.32.6",
"storyblok-js-client": "^4.0.5",
"url": "^0.11.0"
},
"devDependencies": {
"#babel/register": "^7.12.13",
"#types/node": "^14.14.37",
"#types/react": "^17.0.3",
"dotenv-webpack": "^6.0.0",
"typescript": "^4.2.4"
}
}
I am guessing some of the longer list of packages are not playing along with each other, but how can I investigate this further? The error is not very helpful. Also the similar combinations of packages and version seem to work fine in other projects …
The error originally complained about graphql packages I am using, after updating some versions it is now complaining about the next and next-routes packages …
Any ideas?

React Electron ffmpeg-extract-frames build error

I am using the npm module ffmpeg-extract-frames for splitting video frames. It works completely fine when I am testing the module in a vanilla node environment. However, when I import the module in my Electron React desktop app component, it gives me a error when building.
This is how I am importing it:
const extractFrames = require("ffmpeg-extract-frames");
This is the error I am getting when building in my React Electron component:
> expedition-hacks-project#0.1.0 build /home/taylorallen/Desktop/expedition-hacks-project
> set "FLUENTFFMPEG_COV=false" && react-scripts build
Creating an optimized production build...
Failed to compile.
./node_modules/fluent-ffmpeg/index.js
Cannot find module: './lib-cov/fluent-ffmpeg'. Make sure this package is installed.
You can install this package by running: npm install ./lib-cov/fluent-ffmpeg.
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! expedition-hacks-project#0.1.0 build: `set "FLUENTFFMPEG_COV=false" && react-scripts build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the expedition-hacks-project#0.1.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/taylorallen/.npm/_logs/2020-03-28T22_36_18_100Z-debug.log
My package.json:
{
"name": "expedition-hacks-project",
"version": "0.1.0",
"private": true,
"dependencies": {
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.5.0",
"#testing-library/user-event": "^7.2.1",
"bootstrap": "^4.4.1",
"bootstrap-fileinput": "^5.0.8",
"ffmpeg-extract-frames": "^2.0.2",
"fluent-ffmpeg": "^2.1.2",
"jquery": "^3.4.1",
"popper.js": "^1.16.1",
"react": "^16.13.1",
"react-bootstrap": "^1.0.0",
"react-dom": "^16.13.1",
"react-dropzone": "^10.2.2",
"react-icons": "^3.9.0",
"react-router-dom": "^5.1.2",
"react-scripts": "3.4.1"
},
"homepage": "./",
"main": "src/main.js",
"scripts": {
"start": "react-scripts start",
"build": "set \"FLUENTFFMPEG_COV=false\" && react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"electron": "electron ."
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"electron": "^8.2.0",
"electron-log": "^4.1.0",
"react-app-rewired": "^2.1.5"
}
}
I found a github issue https://github.com/fluent-ffmpeg/node-fluent-ffmpeg/issues/573#issuecomment-305408048 addressing this error, and I set FLUENTFFMPEG_COV=0 on in my build script
My scripts:
"scripts": {
"start": "react-scripts start",
"build": "set \"FLUENTFFMPEG_COV=false\" && react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"electron": "electron ."
},
Setting the env variable seems to not do anything, I still get the same error.

Unable to run Gatsby application using npm run develop command

I am developing my first project with Gatsby and prismic. Today when i tried to start my development server i faced this error. I searched but i couldn't find similar errors anywhere. I am completely blocked on this one and have no clue what's causing this error.
extract from package.json :
"scripts": {
"build-dev": "env-cmd -f .env gatsby build",
"develop-dev": "env-cmd -f .env gatsby develop",
....
},
The error
ERROR
UNHANDLED REJECTION Union type PrismicAllDocumentTypes must define one or more member types.
Error: Union type PrismicAllDocumentTypes must define one or more member types.
- query-compiler.js:202 extractOperations
[site]/[gatsby]/dist/query/query-compiler.js:202:20
- query-compiler.js:176 processQueries
[site]/[gatsby]/dist/query/query-compiler.js:176:7
- query-compiler.js:96 compile
[vav_site]/[gatsby]/dist/query/query-compiler.js:96:19
- index.js:484 async module.exports
[site]/[gatsby]/dist/bootstrap/index.js:484:3
- develop.js:446 async module.exports
[site]/[gatsby]/dist/commands/develop.js:446:7
not finished extract queries from components - 0.675s
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! gatsby-starter-default#0.1.0 develop-dev: `env-cmd -f .env gatsby develop`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the gatsby-starter-default#0.1.0 develop-dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Internal\AppData\Roaming\npm-cache\_logs\2020-03-10T07_36_38_243Z-debug.log
The terminal process terminated with exit code: 1
gatsby version : 2.19.34
react version : 16.13.0
prismic-reactjs version :1.2.0
Have you installed npm install -g gatsby-cli.
[Update] Prismic is not longer recommending the gatsby-source-prismic-graphql plugin.
Here's an article that'll help you migrating to the other one:
How to migrate a project from 'gatsby-source-prismic' to 'gatsby-source-prismic-graphql'
Error says that PrismicAllDocumentTypes has no children. You need to check that your prismic repo has at least one content type and, most important, you have at least one schema added to your codebase and gatsby-config.js:
module.exports = {
plugins: [
{
resolve: `gatsby-source-prismic`,
options: {
repositoryName: `repositoryName`,
accessToken: `accessToken`,
linkResolver: ({ node, key, value }) => post => `/${post.uid}`,
schemas: {
page: require("./src/schemas/page.json"),
},
},
},
],
}
using my own prismic source gatsby package.json file:
{
"name": "gatsby-VARIABLE-prismic",
"description": "YOUR DESCRIPTION",
"private": true,
"license": "MIT",
"version": "0.0.0",
"author": "YOURNAME <YOUR#EMAIL.ADDRESS> (#USERNAME)",
"scripts": {
"build": "gatsby build",
"dev": "gatsby develop -o",
"develop": "gatsby develop",
"serve": "gatsby serve",
"lint": "eslint . --ext .js,.jsx --ignore-path .gitignore",
"lint:fix": "eslint . --ext .js,.jsx --fix --ignore-path .gitignore",
"lint:ci": "yarn lint --format junit -o results/eslint/result.xml",
"format": "prettier \"**/*.md \" --write",
"cy:open": "cypress open",
"cy:run": "cypress run",
"cy:run:ci": "cypress run --browser chrome --reporter junit --reporter-options 'mochaFile=results/cypress/result.xml'",
"test:e2e:dev": "cross-env CYPRESS_SUPPORT=y start-server-and-test dev http://localhost:8000 cy:open",
"test:e2e:run": "cross-env CYPRESS_SUPPORT=y start-server-and-test develop http://localhost:8000 cy:run",
"test:e2e:ci": "cross-env CYPRESS_SUPPORT=y start-server-and-test develop http://localhost:8000 cy:run:ci"
},
"dependencies": {
"#emotion/core": "^10.0.28",
"#emotion/styled": "^10.0.27",
"#emotion/styled-base": "^10.0.28",
"#reach/skip-nav": "^0.8.5",
"emotion": "^10.0.27",
"emotion-server": "^10.0.27",
"emotion-theming": "^10.0.27",
"gatsby": "^2.19.23",
"gatsby-image": "^2.2.41",
"gatsby-plugin-emotion": "^4.1.22",
"gatsby-plugin-google-analytics": "^2.1.36",
"gatsby-plugin-lodash": "^3.1.20",
"gatsby-plugin-manifest": "^2.2.42",
"gatsby-plugin-netlify": "^2.1.33",
"gatsby-plugin-offline": "^3.0.35",
"gatsby-plugin-react-helmet": "^3.1.22",
"gatsby-plugin-sharp": "^2.4.5",
"gatsby-plugin-sitemap": "^2.2.27",
"gatsby-plugin-typography": "^2.3.22",
"gatsby-source-prismic": "^2.2.0",
"gatsby-transformer-sharp": "^2.3.16",
"lodash": "^4.17.15",
"prismic-dom": "^2.1.0",
"prismjs": "^1.19.0",
"prop-types": "^15.7.2",
"react": "^16.13.0",
"react-dom": "^16.13.0",
"react-helmet": "^5.2.1",
"react-typography": "^0.16.19",
"typeface-lora": "^0.0.72",
"typeface-source-sans-pro": "^1.1.5",
"typography": "^0.16.19"
},
"devDependencies": {
"#testing-library/cypress": "^5.1.2",
"babel-eslint": "^10.1.0",
"cross-env": "^7.0.0",
"cypress": "^3.8.3",
"eslint": "^6.8.0",
"eslint-config-airbnb": "^18.0.1",
"eslint-config-prettier": "^6.10.0",
"eslint-plugin-cypress": "^2.10.3",
"eslint-plugin-import": "^2.20.1",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-prettier": "^3.1.2",
"eslint-plugin-react": "^7.18.3",
"eslint-plugin-react-hooks": "^2.5.0",
"gatsby-cypress": "^0.2.22",
"prettier": "^1.19.1",
"start-server-and-test": "^1.10.9"
},
"keywords": [
"gatsby",
"starter",
"prismic",
"typography",
"minimal",
"gatsby-starter"
]
}
in your gatsby-condig.js:
resolve: 'gatsby-source-prismic',
options: {
repositoryName: 'gatsby-starter-prismic',
accessToken: `${process.env.API_KEY}`,
// Get the correct URLs in blog posts
linkResolver: () => post => `/${post.uid}`,
// PrismJS highlighting for labels and slices
htmlSerializer: () => prismicHtmlSerializer,
// Remove this config option if you only have one language in your Prismic repository
lang: 'en-gb',
},
},
you are probbly using .dotenv - a way to pass secret keys outside of publc ic repo's.
in your root directory create a file named " .env.develop " and a second: ".env.prod "
.env.develop file content:
API_KEY = COPYPASE YOUR API KEY HERE

Gulp failed after push

So I did this tutorial,(The basic Azure Cosmos DB (MongoDB) with Node.js)
https://learn.microsoft.com/en-us/azure/app-service-web/app-service-web-tutorial-nodejs-mongodb-app
I didn't changed anything in the code just what tutorial says and after
git push azure master I get
gulp failed(link to image)
Does anyone have any clues from what comes this error?
Edit: deploy.sh Gulp part
if [ -e "$DEPLOYMENT_TARGET/gulpfile.js" ]; then
cd "$DEPLOYMENT_TARGET"
eval ./node_modules/.bin/gulp imagemin
eval ./node_modules/.bin/gulp prod <----I added this line and still fails
exitWithMessageOnError "gulp failed"
cd - > /dev/null
fi
package.json only Gulp part
{
"name": "meanjs",
"description": "Full-Stack JavaScript with MongoDB, Express, AngularJS, and Node.js.",
"version": "0.5.0",
"meanjs-version": "0.5.0",
"private": false,
"author": "https://github.com/meanjs/mean/graphs/contributors",
"license": "MIT",
"repository": {
"type": "git",
"url": "https://github.com/meanjs/mean.git"
},
"engines": {
"node": "6.9.1",
"npm": "3.10.8"
},
"scripts": {
"update": "npm update && npm prune && npm run bower",
"clean": "rm -rf node_modules/ public/lib/",
"reinstall": "npm cache clean && npm run clean && npm install",
"start": "gulp",
"start:prod": "gulp prod",
"start:debug": "node-debug --web-host 0.0.0.0 server.js & gulp debug",
"gulp": "gulp",
"bower": "bower install --allow-root && bower prune --allow-root",
"lint": "gulp lint",
"test": "gulp test",
"test:server": "gulp test:server",
"test:server:watch": "gulp test:server:watch",
"test:client": "gulp test:client",
"test:e2e": "gulp test:e2e",
"test:coverage": "gulp test:coverage",
"postinstall": "npm run bower",
"generate-ssl-certs": "scripts/generate-ssl-certs.sh"
},
"dependencies": {
"passport-google-oauth": "~1.0.0",
"passport-linkedin": "~1.0.0",
"passport-local": "~1.0.0",
"passport-paypal-openidconnect": "~0.1.1",
"passport-twitter": "~1.0.4",
"serve-favicon": "~2.4.2",
"socket.io": "^2.0.2",
"validator": "~7.0.0",
"winston": "^2.3.1",
"wiredep": "~4.0.0"
},
"devDependencies": {
"gulp": "^3.9.1",
"gulp-angular-templatecache": "~2.0.0",
"gulp-autoprefixer": "~3.1.0",
"gulp-concat": "~2.6.0",
"gulp-csslint": "~1.0.0",
"gulp-csso": "~3.0.0",
"gulp-eslint": "~3.0.1",
"gulp-imagemin": "~3.2.0",
"gulp-istanbul": "~1.1.1",
"gulp-less": "~3.3.0",
"gulp-load-plugins": "~1.5.0",
"gulp-mocha": "~3.0.1",
"gulp-ng-annotate": "~2.0.0",
"gulp-nodemon": "~2.2.1",
"gulp-protractor": "^4.0.0",
"gulp-refresh": "~1.1.0",
"gulp-rename": "~1.2.2",
"gulp-rev": "^7.1.2",
"gulp-sass": "~3.1.0",
"gulp-uglify": "~2.1.2",
"gulp-util": "~3.0.7",
}
}
I also get this error on the begin of the push logs
remote: glob error { Error: ENOTSUP: operation not supported on socket, scandir 'D:\home\site\wwwroot\node_modules\phant
omjs-prebuilt\node_modules\request\node_modules\http-signature\node_modules\sshpk\bin\sshpk-conv'
remote: at Error (native)
Edit2: The error changed a bit
remote: An error has occurred during web site deployment.
remote: throw err;
remote: gulp failed
remote: ^
remote: Error: Cannot find module 'readable-stream/transform'
You did install gulp. Make sure you have installed gulp-cli.
And, as mentioned in "no command 'gulp' found - after installation"
Also, node_modules/.bin/ isn't in your %PATH%.
But it is automatically added by npm when running npm scripts (see this blog post for reference).

How to have npm run <script> delegate to child package.json?

I've got 2 levels of package.json files.
Example is here:
https://github.com/justin808/react-webpack-rails-tutorial
The reason is that the top level is a Rails App, and I'm putting all node tools under a directory called client, with it's own package.json file. The top level package.json file is a convenience as well as a hook for the node buildpack to run the npm install script.
I've got an example of forwarding the gulp command. Any way to generically forward anything not found from the top level package.json to the child one?
Top Level package.json.
{
"name": "react-webpack-rails-tutorial",
"version": "1.1.1",
"description": "Code from the React Webpack tutorial.",
"main": "server.js",
"engines": {
"node": "0.10.32"
},
"scripts": {
"postinstall": "cd ./client && npm install",
"gulp": "cd ./client && npm run gulp"
},
"repository": {
"type": "git",
"url": "https://github.com/justin808/react-webpack-rails-tutorial.git"
},
"keywords": [
"react",
"tutorial",
"comment",
"example"
],
"author": "justin808",
"license": "MIT",
"bugs": {
"url": "https://github.com/justin808/react-webpack-rails-tutorial/issues"
},
"homepage": "https://github.com/justin808/react-webpack-rails-tutorial"
}
Subdirectory package.json
{
"name": "react-webpack-rails-tutorial",
"version": "1.1.0",
"description": "Code from the React Webpack tutorial.",
"main": "server.js",
"engines": {
"node": "0.10.32"
},
"repository": {
"type": "git",
"url": "https://github.com/justin808/react-webpack-rails-tutorial.git"
},
"keywords": [
"react",
"tutorial",
"comment",
"example"
],
"author": "justin808",
"license": "MIT",
"bugs": {
"url": "https://github.com/justin808/react-webpack-rails-tutorial/issues"
},
"homepage": "https://github.com/justin808/react-webpack-rails-tutorial",
"dependencies": {
"babel-core": "^5.0.8",
"babel-loader": "^5.0.0",
"body-parser": "^1.12.2",
"es5-shim": "^4.1.0",
"imports-loader": "^0.6.3",
"jquery": "^2.1.3",
"loader-utils": "^0.2.6",
"marked": "^0.3.3",
"react": "^0.13.1",
"react-bootstrap": "^0.20.1",
"sleep": "^2.0.0",
"webpack": "^1.7.3"
},
"devDependencies": {
"babel-eslint": "^2.0.2",
"bootstrap-sass": "^3.3.4",
"bootstrap-sass-loader": "^1.0.3",
"css-loader": "^0.9.1",
"eslint": "^0.18.0",
"eslint-plugin-react": "^2.0.2",
"expose-loader": "^0.6.0",
"express": "^4.12.3",
"file-loader": "^0.8.1",
"gulp": "^3.8.11",
"gulp-eslint": "^0.8.0",
"node-sass": "^2.1.1",
"react-hot-loader": "^1.2.4",
"sass-loader": "^0.6.0",
"style-loader": "^0.9.0",
"url-loader": "^0.5.5",
"webpack-dev-server": "^1.8.0"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node server.js",
"gulp": "gulp"
}
}
You can use npm run scripts to simplify the transaction (see npm-scripts). In the parent package.json:
"scripts": {
...
"client-build": "cd client && npm run build"
}
Where the client has a package.json with the npm run build command for building the client-side code.
Then invoke npm run client-build as part of the shell command of other tasks. For instance:
"scripts": {
"start": "npm run client-build && gulp some-task",
...
}
It may help to break the child project out into a separate module with its own git repo and building it through a postinstall script. In that case, when running npm install on the parent project, the child will have a chance to build itself.
you could write a batch file where you put the gulp-command. Then you have to check the errorstate. That could look like this:
#echo off
:RUN_GULP
echo Running Gulp...
gulp
goto END
:END
if %ERRORLEVEL% neq 0 goto PROCESS_ERROR
exit
:PROCESS_ERROR
cd ./client
gulp
exit;
Then you just have to call the script in your package.json like this:
"gulp": "call ./path/to/batfile.bat"
Did the same on my project....
EDIT: For all scripts.... you could create one batchfile that takes the script name as parameter. the script does the same like above, but it should work for every command.
NOTE: You have to use something like start path/to/batchfile.bat gulp instead of npm run gulp. Errorhandling do not work for npm errors!
This could look like this:
#echo off
:: Check if script is defined
set _script=%1
if "%_script%"=="" goto NO_SCRIPT_DEFINED
:START_APP
npm run %_script%
goto END
:NO_SCRIPT_DEFINED
echo ERROR: script was not defined
pause
exit
:END
if %ERRORLEVEL% neq 0 goto NO_PARENT_SCRIPT
exit
:NO_PARENT_SCRIPT
echo searching in ./client ...
cd ./client
npm run %_script%
exit

Resources