I downloaded a pre-made react app I want to add features to, ran npm install and upon npm start I receive an error related to a hash of which I do not know how to solve:
[noah@Qyain widgets]$ npm start
> [email protected] start
> webpack --mode=development --watch
webpack is watching the files…
node:internal/crypto/hash:67
this[kHandle] = new _Hash(algorithm, xofLen);
^
Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:67:19)
at Object.createHash (node:crypto:130:10)
at module.exports (/home/noah/Documents/JS-ark/aA/widgets/node_modules/webpack/lib/util/createHash.js:135:53)
at NormalModule._initBuildHash (/home/noah/Documents/JS-ark/aA/widgets/node_modules/webpack/lib/NormalModule.js:417:16)
at handleParseError (/home/noah/Documents/JS-ark/aA/widgets/node_modules/webpack/lib/NormalModule.js:471:10)
at /home/noah/Documents/JS-ark/aA/widgets/node_modules/webpack/lib/NormalModule.js:503:5
at /home/noah/Documents/JS-ark/aA/widgets/node_modules/webpack/lib/NormalModule.js:358:12
at /home/noah/Documents/JS-ark/aA/widgets/node_modules/loader-runner/lib/LoaderRunner.js:373:3
at iterateNormalLoaders (/home/noah/Documents/JS-ark/aA/widgets/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
at iterateNormalLoaders (/home/noah/Documents/JS-ark/aA/widgets/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
at /home/noah/Documents/JS-ark/aA/widgets/node_modules/loader-runner/lib/LoaderRunner.js:236:3
at context.callback (/home/noah/Documents/JS-ark/aA/widgets/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
at /home/noah/Documents/JS-ark/aA/widgets/node_modules/babel-loader/lib/index.js:51:71
at processTicksAndRejections (node:internal/process/task_queues:96:5) {
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'
}
I tried looking into the web.config file but to no avail. Html where the root is rendered is as such:
<!DOCTYPE html>
<html>
<head>
<title>React Widgets</title>
<link href="stylesheets/application.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="stylesheets/index.css"/>
<link href=':700' rel='stylesheet' type='text/css'>
<link href='+Sans:400,700' rel='stylesheet' type='text/css'>
<script src="bundle.js"></script>
</head>
<body>
<div id="main"></div>
</body>
</html>
I have several widgets in a fronted folder, below is the weather widget:
import React from 'react';
const toQueryString = (obj) => {
const parts = [];
for (let i in obj) {
if (obj.hasOwnProperty(i)) {
parts.push(`${encodeURIComponent(i)}=${encodeURIComponent(obj[i])}`);
}
}
return parts.join('&');
}
export default class Weather extends React.Component {
constructor(props) {
super(props);
this.state = {
weather: null
};
this.pollWeather = this.pollWeather.bind(this);
}
ponentDidMount() {
navigator.geolocation.getCurrentPosition(this.pollWeather);
}
pollWeather(location) {
let url = '.5/weather?';
const params = {
lat: location.coords.latitude,
lon: location.coords.longitude
};
url += toQueryString(params);
const apiKey = 'f816d7f39052e3a98b21952097a43076';
// This is our API key; please use your own!
url += `&APPID=${apiKey}`; // make url to make API calls via .open
const xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = () => {
//ready state of DONE means this is plete
if (xmlhttp.status === 200 && xmlhttp.readyState === XMLHttpRequest.DONE) {
const data = JSON.parse(xmlhttp.responseText);
this.setState({weather: data});
}
};
xmlhttp.open('GET', url, true);
xmlhttp.send();
}
render() {
let content = <div> </div>; // this content is gonna be populated.
if (this.state.weather) {
const weather = this.state.weather;
const temp = (weather.main.temp - 273.15) * 1.8 + 32;
content = <div>
<p>{weather.name}</p>
<p>{weather.rain} </p>
<p>{weather.humidity}</p>
<p>{temp.toFixed(1)} degrees</p>
</div>;
} else {
content = <div className='loading'>loading weather...</div>;
}
return (
<div>
<h1>Weather</h1>
<div className='weather'>
{content}
</div>
</div>
);
}
}
Along with a package-json:
{
"name": "widgets",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack --mode=development --watch"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@babel/core": "^7.1.2",
"@babel/preset-env": "^7.1.0",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.4",
"react": "^16.4.1",
"react-addons-css-transition-group": "^15.6.2",
"react-dom": "^16.4.1",
"webpack": "^4.20.2",
"webpack-cli": "^3.1.2"
},
"devDependencies": {}
}
auto.jsx:
import React from 'react';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
export default class AutoComplete extends React.Component {
constructor(props) {
super(props);
this.state = {
inputVal: ''
};
this.selectName = this.selectName.bind(this);
this.handleInput = this.handleInput.bind(this);
}
handleInput(event) {
this.setState({inputVal: event.currentTarget.value});
}
matches() {
const matches = [];
if (this.state.inputVal.length === 0) {
return this.props.names;
}
this.props.names.forEach(name => {
const sub = name.slice(0, this.state.inputVal.length);
if (sub.toLowerCase() === this.state.inputVal.toLowerCase()) {
matches.push(name);
}
});
if (matches.length === 0) {
matches.push('No matches');
}
return matches;
}
selectName(event) {
const name = event.currentTarget.innerText;
this.setState({inputVal: name});
}
render() {
const results = this.matches().map((result, i) => {
return (
<li key={i} onClick={this.selectName}>{result}</li>
);
});
return(
<div>
<h1>Autoplete</h1>
<div className='auto'>
<input
onChange={this.handleInput}
value={this.state.inputVal}
placeholder='Search...'/>
<ul>
<ReactCSSTransitionGroup
transitionName='auto'
transitionEnterTimeout={500}
transitionLeaveTimeout={500}>
{results}
</ReactCSSTransitionGroup>
</ul>
</div>
</div>
);
}
};
Of which all tie together to widgets.jsx:
import React from 'react';
import ReactDOM from 'react-dom';
import AutoComplete from './auto';
import Clock from './clock';
import Weather from './weather';
import Tabs from './tabs';
const names = [
'Abba',
'Barney',
'Barbara',
'Jeff',
'Jenny',
'Sarah',
'Sally',
'Xander'
];
const panes = [
{title: 'one', content: 'I am the first'},
{title: 'two', content: 'Second pane here'},
{title: 'three', content: 'Third pane here'}
];
function Root() {
return(
<div>
<Clock />
<Weather />
<div className='interactive'>
<Tabs panes={panes} />
<AutoComplete names={names} />
</div>
</div>
);
}
document.addEventListener('DOMContentLoaded', () => {
ReactDOM.render(<Root/>, document.getElementById('main'));
});
I keep running this problem and I think it has something to do with webpack but I am unsure, please help.
I downloaded a pre-made react app I want to add features to, ran npm install and upon npm start I receive an error related to a hash of which I do not know how to solve:
[noah@Qyain widgets]$ npm start
> [email protected] start
> webpack --mode=development --watch
webpack is watching the files…
node:internal/crypto/hash:67
this[kHandle] = new _Hash(algorithm, xofLen);
^
Error: error:0308010C:digital envelope routines::unsupported
at new Hash (node:internal/crypto/hash:67:19)
at Object.createHash (node:crypto:130:10)
at module.exports (/home/noah/Documents/JS-ark/aA/widgets/node_modules/webpack/lib/util/createHash.js:135:53)
at NormalModule._initBuildHash (/home/noah/Documents/JS-ark/aA/widgets/node_modules/webpack/lib/NormalModule.js:417:16)
at handleParseError (/home/noah/Documents/JS-ark/aA/widgets/node_modules/webpack/lib/NormalModule.js:471:10)
at /home/noah/Documents/JS-ark/aA/widgets/node_modules/webpack/lib/NormalModule.js:503:5
at /home/noah/Documents/JS-ark/aA/widgets/node_modules/webpack/lib/NormalModule.js:358:12
at /home/noah/Documents/JS-ark/aA/widgets/node_modules/loader-runner/lib/LoaderRunner.js:373:3
at iterateNormalLoaders (/home/noah/Documents/JS-ark/aA/widgets/node_modules/loader-runner/lib/LoaderRunner.js:214:10)
at iterateNormalLoaders (/home/noah/Documents/JS-ark/aA/widgets/node_modules/loader-runner/lib/LoaderRunner.js:221:10)
at /home/noah/Documents/JS-ark/aA/widgets/node_modules/loader-runner/lib/LoaderRunner.js:236:3
at context.callback (/home/noah/Documents/JS-ark/aA/widgets/node_modules/loader-runner/lib/LoaderRunner.js:111:13)
at /home/noah/Documents/JS-ark/aA/widgets/node_modules/babel-loader/lib/index.js:51:71
at processTicksAndRejections (node:internal/process/task_queues:96:5) {
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'
}
I tried looking into the web.config file but to no avail. Html where the root is rendered is as such:
<!DOCTYPE html>
<html>
<head>
<title>React Widgets</title>
<link href="stylesheets/application.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="stylesheets/index.css"/>
<link href='https://fonts.googleapis./css?family=Orbitron:700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis./css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<script src="bundle.js"></script>
</head>
<body>
<div id="main"></div>
</body>
</html>
I have several widgets in a fronted folder, below is the weather widget:
import React from 'react';
const toQueryString = (obj) => {
const parts = [];
for (let i in obj) {
if (obj.hasOwnProperty(i)) {
parts.push(`${encodeURIComponent(i)}=${encodeURIComponent(obj[i])}`);
}
}
return parts.join('&');
}
export default class Weather extends React.Component {
constructor(props) {
super(props);
this.state = {
weather: null
};
this.pollWeather = this.pollWeather.bind(this);
}
ponentDidMount() {
navigator.geolocation.getCurrentPosition(this.pollWeather);
}
pollWeather(location) {
let url = 'http://api.openweathermap/data/2.5/weather?';
const params = {
lat: location.coords.latitude,
lon: location.coords.longitude
};
url += toQueryString(params);
const apiKey = 'f816d7f39052e3a98b21952097a43076';
// This is our API key; please use your own!
url += `&APPID=${apiKey}`; // make url to make API calls via .open
const xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = () => {
//ready state of DONE means this is plete
if (xmlhttp.status === 200 && xmlhttp.readyState === XMLHttpRequest.DONE) {
const data = JSON.parse(xmlhttp.responseText);
this.setState({weather: data});
}
};
xmlhttp.open('GET', url, true);
xmlhttp.send();
}
render() {
let content = <div> </div>; // this content is gonna be populated.
if (this.state.weather) {
const weather = this.state.weather;
const temp = (weather.main.temp - 273.15) * 1.8 + 32;
content = <div>
<p>{weather.name}</p>
<p>{weather.rain} </p>
<p>{weather.humidity}</p>
<p>{temp.toFixed(1)} degrees</p>
</div>;
} else {
content = <div className='loading'>loading weather...</div>;
}
return (
<div>
<h1>Weather</h1>
<div className='weather'>
{content}
</div>
</div>
);
}
}
Along with a package-json:
{
"name": "widgets",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack --mode=development --watch"
},
"keywords": [],
"author": "",
"license": "ISC",
"dependencies": {
"@babel/core": "^7.1.2",
"@babel/preset-env": "^7.1.0",
"@babel/preset-react": "^7.0.0",
"babel-loader": "^8.0.4",
"react": "^16.4.1",
"react-addons-css-transition-group": "^15.6.2",
"react-dom": "^16.4.1",
"webpack": "^4.20.2",
"webpack-cli": "^3.1.2"
},
"devDependencies": {}
}
auto.jsx:
import React from 'react';
import ReactCSSTransitionGroup from 'react-addons-css-transition-group';
export default class AutoComplete extends React.Component {
constructor(props) {
super(props);
this.state = {
inputVal: ''
};
this.selectName = this.selectName.bind(this);
this.handleInput = this.handleInput.bind(this);
}
handleInput(event) {
this.setState({inputVal: event.currentTarget.value});
}
matches() {
const matches = [];
if (this.state.inputVal.length === 0) {
return this.props.names;
}
this.props.names.forEach(name => {
const sub = name.slice(0, this.state.inputVal.length);
if (sub.toLowerCase() === this.state.inputVal.toLowerCase()) {
matches.push(name);
}
});
if (matches.length === 0) {
matches.push('No matches');
}
return matches;
}
selectName(event) {
const name = event.currentTarget.innerText;
this.setState({inputVal: name});
}
render() {
const results = this.matches().map((result, i) => {
return (
<li key={i} onClick={this.selectName}>{result}</li>
);
});
return(
<div>
<h1>Autoplete</h1>
<div className='auto'>
<input
onChange={this.handleInput}
value={this.state.inputVal}
placeholder='Search...'/>
<ul>
<ReactCSSTransitionGroup
transitionName='auto'
transitionEnterTimeout={500}
transitionLeaveTimeout={500}>
{results}
</ReactCSSTransitionGroup>
</ul>
</div>
</div>
);
}
};
Of which all tie together to widgets.jsx:
import React from 'react';
import ReactDOM from 'react-dom';
import AutoComplete from './auto';
import Clock from './clock';
import Weather from './weather';
import Tabs from './tabs';
const names = [
'Abba',
'Barney',
'Barbara',
'Jeff',
'Jenny',
'Sarah',
'Sally',
'Xander'
];
const panes = [
{title: 'one', content: 'I am the first'},
{title: 'two', content: 'Second pane here'},
{title: 'three', content: 'Third pane here'}
];
function Root() {
return(
<div>
<Clock />
<Weather />
<div className='interactive'>
<Tabs panes={panes} />
<AutoComplete names={names} />
</div>
</div>
);
}
document.addEventListener('DOMContentLoaded', () => {
ReactDOM.render(<Root/>, document.getElementById('main'));
});
I keep running this problem and I think it has something to do with webpack but I am unsure, please help.
Share Improve this question asked Jul 8, 2022 at 13:30 noah_chazzannoah_chazzan 731 silver badge7 bronze badges2 Answers
Reset to default 5In your package.json: change this line
"start": "react-scripts start"
to
"start": "react-scripts --openssl-legacy-provider start"
I am running into this issue with v18.7.0 but I am using nx and storybook.
I worked around the issue by specifying node options
NODE_OPTIONS='--openssl-legacy-provider' nx storybook core
# NODE_OPTIONS='--openssl-legacy-provider' my_custom_node_script