我下载了一个预制的react应用程序，我想添加功能，运行npm install，在npm启动时，我收到一个与我不知道如何解决的哈希相关的错误:
[noah@Qyain widgets]$ npm start
> widgets@1.0.0 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'
}
我试着在网上找。配置文件，但无济于事。呈现根目录的Html如下所示:
<!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.com/css?family=Orbitron:700' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
<script src="bundle.js"></script>
</head>
<body>
<div id="main"></div>
</body>
</html>
我在前面的文件夹中有几个小部件，下面是天气小部件:
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);
}
componentDidMount() {
navigator.geolocation.getCurrentPosition(this.pollWeather);
}
pollWeather(location) {
let url = 'http://api.openweathermap.org/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 complete
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>
);
}
}
随附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>Autocomplete</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>
);
}
};
所有这些都绑定到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'));
});
我一直在运行这个问题，我认为它与webpack有关，但我不确定，请帮助。
在您的包。Json:修改这一行
"start"; "react-scripts start">
start": "react-scripts—openssl-legacy-provider start">
我在使用v18.7.0时遇到了这个问题，但我正在使用nx和storybook。
我通过指定节点选项
解决了这个问题NODE_OPTIONS='--openssl-legacy-provider' nx storybook core
# NODE_OPTIONS='--openssl-legacy-provider' my_custom_node_script