We Keep Coding

What is --openssl-legacy-provider in Node.js v17?

I was building a simple React app using Tailwind. I used create-react-app and then installed tailwind. I have done this many times before.
In order to install Tailwind, I also had to install craco and change package.json "scripts" to use craco, like so:
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
}
However, this time, when I ran npm start, I got an error that I had never encountered before:
Error: error:0308010C:digital envelope routines::unsupported
So I searched on StackOverflow and someone suggested adding --openssl-legacy-provider to my "start" script like this:
"scripts": {
"start": "craco --openssl-legacy-provider start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
}
And it's working now. But can somebody please explain to me what --openssl-legacy-provider actually is and how it works?

Due to changes on Node.js v17, --openssl-legacy-provider was added for handling key size on OpenSSL v3.
You somehow have installed the latest version of node.
Restore your previous version of nodejs.
Go and manually remove the node dependency(e.g. "node":17.4.3) from package.json
and packagelock.json.
Delete node_modules folder and use npm install to reinstall node_modules.

I have seen many answers regarding the OpenSSL issue that people encounter due to the changes on Node.js v17. Personally, I encountered the problem in a vue.js/electron application after switching to my new MacBook with M1 chip.
This GitHub issue lists multiple options that worked for different users.
In my scenario, adjusting the script commands in the package.json file worked:
"serve": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
"build": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build"
I've seen user replacing th export with a run command.
Keep in mind that the syntax might differ on another Os. For example:
Set and set
The full issue with all possible answers.

Adding --openssl-legacy-provider in package.json sure works, but if you don't want to use the legacy SSL provider, you can upgrade your webpack- and react-scripts versions.
I had to first delete package_lock.json and node_modules/. Then I ran:
npm install --save-dev webpack#5.74.0 --legacy-peer-deps
npm install --save-dev react-scripts#5.0.1 --legacy-peer-deps
npm install --legacy-peer-deps
After this, I tested with:
npm start
I also had to fix a few other issues, but eventually got it working.

I have found a solution in this GitHub issue
and it works for my case.
For Node.js v17+, you need to put the openssl-legacy-provider flag after your command, for example:
From npm --openssl-legacy-provider start to npm start --openssl-legacy-provider start
From npm --openssl-legacy-provider build to npm start --openssl-legacy-provider build
... and so on.

I had this error in Nuxt 2.15
I fixed the error in the following way.
package.json edit
I had Ubuntu so this method worked for me
"scripts":{
"dev":"export SET NODE_OPTIONS=--openssl-legacy-provider && nuxt",
"build":"export SET NODE_OPTIONS=--openssl-legacy-provider && nuxt build",
"start":"export SET NODE_OPTIONS=--openssl-legacy-provider && nuxt start",
"generate":"export SET NODE_OPTIONS=--openssl-legacy-provider && nuxt generate"
},
My partner had Windows but the above method didn't work on it, then this method worked
"scripts":{
"dev":"SET NODE_OPTIONS=--openssl-legacy-provider && nuxt",
"build":"SET NODE_OPTIONS=--openssl-legacy-provider && nuxt build",
"start":"SET NODE_OPTIONS=--openssl-legacy-provider && nuxt start",
"generate":"SET NODE_OPTIONS=--openssl-legacy-provider && nuxt generate"
},
The most interesting thing was that it worked in other ways in Ubuntu and Windows

No tests found, exiting with code 0- NPM, YARN

I want to run an application/script which was already developed by someone else. I had installed node js and yarn for executing it. When I execute that test I get something like below:
No tests found, exiting with code 0
Watch Usage
› Press f to run only failed tests.
› Press o to only run tests related to changed files.
› Press q to quit watch mode.
› Press p to filter by a filename regex pattern.
› Press t to filter by a test name regex pattern.
› Press Enter to trigger a test run.
The scripts part of the package Json is:
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"lint": "./node_modules/.bin/eslint src/* --fix"
},
I had managed to solve few dependencies issues that I was previously getting because of ESLint.

The file actually does not have anything after I tried opening it in Eclipse. I executed the command yarn start. There, I found the list of compilation errors that I need to resolve.

While i am trying to open my react app the CMD showing an npm err! Saying 'npm err! missing script:start' can anyone help me?

enter image description here
I've searched in previous answers and tried to solve this for many hours but with no success. I've typed in the terminal npm create-react-app, moved to the correct cd, and it gives me this error:
'npm ERR! missing script: start'

You should ensure that you have package.json in your project and it has the command start registered in it, example
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},

Start by validating that the 'start' script exists inside the package.json. That's where the script gets invoked. It should be under the key "scripts". If it's not there then that's the problem.
Should look something like this (if using react-scripts dependency):
"scripts": {
"start": "react-scripts start",
....
}
And if you're missing dependencies then run the following command inside the project directory to install them:
npm install

What do I put in my package.json file to get "yarn start" to work?

I am currently following a tutorial on how to setup and use toastify, and I have followed the tutorial up to the point where the person in the tutorial inputs yarn start into the terminal, and his code output opens in his browser. but when I do it the terminal outputs this: yarn run v1.22.4
warning package.json: No license field
error Command "start" not found.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command. and nothing happens. I followed the tutorial exactly and the person in the tutorial does not do anything with packag.json and his code still works. Why isn't my code working? and how do I fix it?

You should have a start script defined in your package.json
Ex:
{
"scripts": {
"start": "You should write your start script here"
}
}

npm run start with the definition at the package.json like this:
"start": "react-scripts start",

I've been in the same situation before，
Maybe you'd better check that you're running the command in the right directory.

you should write ‘start’ in package.json
if you have a react-native app,
"scripts": {
"start": "react-native start"
}

How to use jest.config.js with create-react-app

I would like to move my jest config out of my package.json, i am trying to use the --config as suggested here but get the error argv.config.match is not a function
package.json
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --config jest.config.js",
"eject": "react-scripts eject",
},
cli
hutber#hutber-mac:/var/www/management/node$ npm test -u
> management-fresh#0.1.0 test /var/www/management/node
> react-scripts test --config jest.config.js
Usage: test.js [--config=<pathToConfigFile>] [TestPathPattern]
argv.config.match is not a function
npm ERR! Test failed. See above for more details.

For me appending -- --config=jest.config.js worked.
So the whole string react-scripts test -- --config jest.config.js in your case.

TL;DR
Add -- before your options.
"test": "react-scripts test -- --config=jest.config.js",
The problem here is with react-scripts not seeing the options being passed to
it. We can demonstrate this by running it directly.
./node_modules/.bin/react-scripts test --config=jest.config.js
# argv.config.match is not a function
./node_modules/.bin/react-scripts test -- --config=jest.config.js
# This works.
Variations
How you pass options to scripts varies depending on which versions of npm or
Yarn you use. For completeness, here are the results for the variations:
# This runs, but completely ignores the option.
npm test --config=jest.config.js
# These result in "argv.config.match is not a function," indicating that the
# options were not understood.
npm test -- --config=jest.config.js
yarn test -- --config=jest.config.js
yarn test --config=jest.config.js
https://jestjs.io/docs/en/cli#using-with-yarn
https://jestjs.io/docs/en/cli#using-with-npm-scripts
create react app sets up the test script in package.json with
"test": "react-scripts test",
You can set additional options like so.
"test": "react-scripts test -- --config=jest.config.js",
Something like this might work if you want to send options through the CLI.
"test": "react-scripts test --",
yarn test --bail
# comes through as
react-scripts test -- --bail
Resources
Here are a few resources to explain the different usage.
https://medium.com/fhinkel/the-curious-case-of-double-dashes-b5e7711698f

For me adding jest as key in package.json file worked. Added all the required config as object in jest key rather than jest.config.js
"jest": {
"collectCoverageFrom": [
"src/**/*.js",
"!**/node_modules/**"
],
"coverageReporters": [
"text-summary",
"lcov",
"cobertura"
],
"testMatch": [
"**/*.test.js"
]
},

tldr
npm install jest --save-dev (not sure if this is required -- I just did it).
replace
"scripts": {
...
"test": "react-scripts test",
...
},
with
"scripts": {
...
"test": "jest --watch",
...
},
run tests as normal with npm test
Everything
Adding -- --config=jest.config.js sort of work for me: my tests passed, but then I was getting the following error (truncated):
Invalid testPattern --config=jest.config.js|--watch|--config|{"roots":["<rootDir>/src"]
...
Running all tests instead.
This problem is noted in the comment above.
Here's what's going on:
npm test looks in package.json for whatever is in scripts.test and runs that. For create-react-app, that's react-scripts test. This, in turn, runs
/node_modules/react-scripts/scripts/test.js (source) (you can easily print debug this to see what's going on). This script builds up a jest configuration based on your environment. When you add:
"test": "react-scripts test -- --config=jest.config.js",
to package.json, this replaces the jest config that react-scripts test is trying to create (yea!), but it also munges the arguments that "test": "react-scripts test" generates (boo!), so jest thinks you're trying to pass in a test pattern (which is obviously not a valid test pattern).
So, I decided to try running my tests using the jest CLI. At least for me, it worked fine and picked up all of my tests. It automatically looks for jest.config.js, so that works, and you can pass --watch in to get the same behavior as react-scripts test.
Keep in mind that react-scripts test seems to be going through a lot of trouble to build up a 'proper' config; I definitely haven't tried to figure all of that out: YMMV. Here's the full set of options it creates in my env. E.g., for --config the next element in the array is the config.
[
'--watch',
'--config',
'{"roots":["<rootDir>/src"],
"collectCoverageFrom":["src/**/*.{js,jsx,ts,tsx}",
"!src/**/*.d.ts"],
"setupFiles":["<my_root_elided>/node_modules/react-app-polyfill/jsdom.js"],
"setupFilesAfterEnv":["<rootDir>/src/setupTests.js"],
"testMatch":["<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
"<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"],
"testEnvironment":"jsdom",
"testRunner":"<my_root_elided>/node_modules/jest-circus/runner.js",
"transform":{
"^.+\\\\.(js|jsx|mjs|cjs|ts|tsx)$":"<my_root_elided>/node_modules/react-scripts/config/jest/babelTransform.js",
"^.+\\\\.css$":"<my_root_elided>/node_modules/react-scripts/config/jest/cssTransform.js",
"^(?!.*\\\\.(js|jsx|mjs|cjs|ts|tsx|css|json)$)":"<my_root_elided>/node_modules/react-scripts/config/jest/fileTransform.js"},
"transformIgnorePatterns":["[/\\\\\\\\]node_modules[/\\\\\\\\].+\\\\.(js|jsx|mjs|cjs|ts|tsx)$",
"^.+\\\\.module\\\\.(css|sass|scss)$"],
"modulePaths":[],
"moduleNameMapper":{"^react-native$":"react-native-web",
"^.+\\\\.module\\\\.(css|sass|scss)$":"identity-obj-proxy"},
"moduleFileExtensions":["web.js", "js", "web.ts", "ts", "web.tsx", "tsx", "json", "web.jsx", "jsx", "node"],
"watchPlugins":["jest-watch-typeahead/filename", "jest-watch-typeahead/testname"],
"resetMocks":true,
"rootDir":"<my_root_elided>"}',
'--env',
'<my_root_elided>/node_modules/jest-environment-jsdom/build/index.js'
]

This one got me too! create react app is a bit tricky as it already contains jest. I removed the
--config jest.config.js line, and didn't need that extra test.config file.
I also made sure my enzyme file was named setupTests.js. The testing module will be specifically looking to run that file, so it must be named that. Also,I had to have it in my src/ folder, where before I had it in a src/test folder. If you are asking the above question you are probably past this point, but wanted to mention just in case. My setupTests.js looks like:
import Enzyme from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
Enzyme.configure({
adapter: new Adapter()
})

For me, none of the above answers worked. But with the help of documentation, I found out the way around.
For this purpose, place the code you want to configure jest, in your_project_root_folder/src/setupTests.js. My your_project_root_folder/src/setupTests.js looks like this
import Enzyme from 'enzyme'
import Adapter from 'enzyme-adapter-react-16'
Enzyme.configure({
adapter: new Adapter(),
})
And one more important point, you need to use enzyme-adapter-react-16 for react v16 and enzyme-adapter-react-15 for react v15
Moreover, if you want to use enzyme-to-json, you can place the following code in package.json file
"jest": {
"snapshotSerializers": ["enzyme-to-json/serializer"]
}

I would try adding "test": "jest --no-cache -w 2" to your package.json. Then run npm run test