React Electron ffmpeg-extract-frames build error - node.js

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.

Related

how to fix this npm start not working ( after npx create-react-app )

npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! todos-clone-app#0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the todos-clone-app#0.1.0 start 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/josh/.npm/_logs/2020-08-21T19_28_35_521Z-debug.log
Edit:
package.json
{
"name": "todos-clone-app",
"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",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.3",
"webpack-dev-server": "^3.11.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"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" ]
}
}
Try deleting your node_modules directory and package-lock.json file. Then run npm install.
In my case, it was because of not being in the right folder.
Generally, I create a folder and go to Vs code to open it for typing create-react-app "folder name" to the console.
The problem was I was trying to npm start in parent folder instead of "folder name".
All you have to do is:
cd folder_name
npm start
Try:
npx create-react-app ./
It worked for me.

How to make npm start work on a cloned React repository?

I have created a new github repository with files from a working project I downloaded from another github repository of mine. I have run npm install. When I try npm start, I get the following error:
npm ERR! missing script: start
npm ERR! A complete log of this run can be found in:
npm ERR! /home/mycomputername/.npm/_logs/2020-03-22T17_16_37_070Z-debug.log
I have read in other posts that the problem might be in the 'scripts', 'start' package.json file. This is what mine looks like:
{
"name": "myproject",
"version": "0.1.0",
"private": true,
"dependencies": {
"bootstrap-4-grid": "^3.2.0",
"formik": "^2.1.4",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-router-dom": "^5.1.2",
"react-scripts": "3.2.0",
"react-spring": "^8.0.27",
"use-places-autocomplete": "^0.5.4",
"yup": "^0.28.1"
},
"scripts": {
"start": "react-scripts start", //supposedly problematic
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"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"
]
}
}
I have tried changing the start script to "start": "index.js" or "start": "App.js" as they're my main file but I have no clue whether I am doing the right thing.
If I run npm run this is what I get
Lifecycle scripts included in mycomputername:
test
echo "Error: no test specified" && exit 1
| npm update check failed │
│ Try running with sudo or get access │
│ to the local update config store via │
│ sudo chown -R $USER:$(id -gn $USER) /home/mycomputername/.config |
Moreover, this repository will be shared with other people -- will they have the same problem when they clone from my repository?

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

npm start and other scripts do nothing [duplicate]

This question already has answers here:
NPM run * doesn't do anything
(2 answers)
Closed 3 years ago.
Until starting up my computer this morning the following worked:
npm run start
which would run my custom script in package.json and essentially boot up electron with react.
However now running the same command does absolutely nothing. The terminal just returns.
~/myapp > npm run start
~/myapp >
I have tried the following with and without step 3 and it didn't work.
Delete node_modules
Delete package-lock.json
Run npm cache clean -f
Run npm i
Try again.
I have uninstalled and reinstalled node.
My setup is:
~/myapp > node -v
v13.5.0
~/myapp > npm -v
6.13.4
and my package.json is as follows:
{
"name": "...",
"version": "...",
"description": "...",
"author": "...",
"build": {
"appId": "appname.app",
"mac": {
"icon": "build/icon.png"
},
"extraResources": [
"./public/**"
]
},
"homepage": "./",
"main": "public/electron.js",
"dependencies": {
"#babel/runtime": "^7.7.7",
"#material-ui/core": "^4.8.2",
"#material-ui/icons": "^4.5.1",
"#testing-library/jest-dom": "^4.2.4",
"#testing-library/react": "^9.3.2",
"#testing-library/user-event": "^7.1.2",
"array-move": "^2.2.1",
"cross-env": "^6.0.3",
"electron-context-menu": "^0.15.2",
"electron-is-dev": "^1.1.0",
"electron-window-state": "^5.0.3",
"react": "^16.12.0",
"react-dom": "^16.12.0",
"react-dropzone": "^10.2.1",
"react-pdf": "^4.1.0",
"react-scripts": "3.3.0",
"react-smooth-dnd": "^0.11.1",
"typeface-roboto": "0.0.75"
},
"scripts": {
"react-start": "GENERATE_SOURCEMAP=false react-scripts start ",
"react-build": "GENERATE_SOURCEMAP=false react-scripts build",
"react-test": "GENERATE_SOURCEMAP=false react-scripts test",
"react-eject": "GENERATE_SOURCEMAP=false react-scripts eject",
"electron-build": "electron-builder",
"build": "npm run react-build && npm run electron-build",
"start": "concurrently \"cross-env BROWSER=none npm run react-start\" \"wait-on http://localhost:3000 && 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": {
"concurrently": "^5.0.2",
"electron": "^7.1.7",
"electron-builder": "^21.2.0",
"wait-on": "^3.3.0"
}
}
Note: I had to add GENERATE_SOURCEMAP=false to the scripts to fix a bug in a dependency.
Can anyone please help?
EDIT:
I just created a completely new project to test the problem as follows:
npm init react-app testapp
cd testapp
npm start
and the problem persists.
Probably ignore-scripts=true was set in .npmrc
Run: npm config set ignore-scripts false

Could not find files on devDependencies

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

Resources