我使用Tailwind构建了一个简单的React应用程序。我使用了create-react-app
,然后安装了顺风。我以前做过很多次。
为了安装Tailwind,我还必须安装craco
并更改package.json"脚本";使用craco
,就像这样:
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
}
然而,这一次,当我运行npm start
时,我遇到了一个以前从未遇到过的错误:
Error: error:0308010C:digital envelope routines::unsupported
所以我在StackOverflow上搜索了,有人建议将--openssl-legacy-provider
添加到我的";"开始";脚本如下:
"scripts": {
"start": "craco --openssl-legacy-provider start",
"build": "craco build",
"test": "craco test",
"eject": "react-scripts eject"
}
现在它正在发挥作用。但有人能向我解释一下--openssl-legacy-provider
到底是什么以及它是如何工作的吗?
由于Node.js v17的更改,添加了--openssl-legacy-provider
以处理OpenSSL v3上的密钥大小。您以某种方式安装了最新版本的节点。
- 恢复您以前版本的nodejs
- 转到并手动从package.json中删除节点依赖项(例如"node":17.4.3(和packagelock.json
- 删除node_modules文件夹并使用
npm install
重新安装node_module
我已经看到了许多关于OpenSSL问题的答案,这些问题是由于Node.js v17上的更改而引起的。就我个人而言,在切换到带有M1芯片的新款MacBook后,我在vue.js/electron应用程序中遇到了这个问题。
此GitHub问题列出了适用于不同用户的多个选项。在我的场景中,调整package.json文件中的脚本命令起到了作用:
"serve": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
"build": "export NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build"
我看到用户用run命令替换导出。请记住,其他O的语法可能有所不同。例如:
Set and set
完整的问题和所有可能的答案。
我在Nuxt 2.15中遇到了这个错误我通过以下方式修复了错误。
package.json
编辑
我有Ubuntu,所以这个方法对我有效
"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"
},
我的合作伙伴有Windows,但上面的方法对它不起作用,然后这个方法对起作用
"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"
},
最有趣的是,它在Ubuntu和Windows 中以其他方式工作
我在这个GitHub问题上找到了解决方案它适用于我的情况。
对于Node.js v17+,您需要在命令后面放置openssl-legacy-provider
标志,例如:
- 从
npm --openssl-legacy-provider start
到npm start --openssl-legacy-provider start
- 从
npm --openssl-legacy-provider build
到npm start --openssl-legacy-provider build
。。。等等
在package.json
中添加--openssl-legacy-provider
确实有效,但如果您不想使用传统的SSL提供程序,您可以升级您的webpack和react脚本版本。
我必须首先删除package_lock.json和node_modules/。然后我跑了:
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
在此之后,我测试了:
npm start
我还必须解决其他一些问题,但最终还是成功了。
编辑:我最终发现更新CCD_;热重新加载";停止在我的项目中工作。我的后端是一个ASP.NET Core 3.1
项目,它使用了Microsoft.SpaProxy
的.NET Core 3.1版本。此版本的SpaProxy
似乎与最新的react-scripts
版本不兼容。我最终恢复到较旧的react-scripts
版本,并将--openssl-legacy-provider
添加到package.json
中的启动命令中(正如这里已经建议的那样(。现在热重新加载再次工作。另一种选择是将我的后端项目移动到.NET Core 5
(或更高版本(,以便在最新的react-scripts
版本中再次进行热重新加载。
我在Angular上遇到了同样的问题,我有以下版本:
node -v => v18.16.1
npm -v => 9.5.1
我找到的解决方案是更新Package.json中的脚本,如下所示:
- 运行:
npm config set legacy-peer-deps true
- 更新:
"start": "ng serve"
至"start": "set NODE_OPTIONS=--openssl-legacy-provider && ng serve"
Me sirvio para node v18
(set NODE_OPTIONS=--openssl-legacy-provider) -and (npm run start)
ó
($env:NODE_OPTIONS = "--openssl-legacy-provider") -and (npm run start)
翻毛皮。