bounty还有5天到期。回答此问题可获得+50声望奖励。Tony正在寻找一个答案从一个有信誉的来源:直接聊天也很好与我来解决这个问题.
我的应用(不是create-reat-app CRA)是react和typescript项目,在Node 14中运行良好,但Node 16以外的任何版本都会导致以下错误:尝试了所有的解决方案从internnet但没有工作了。请检查并让我知道这个问题,谢谢。
遵循以下文章解决问题,但失败:https://www.freecodecamp.org/news/error-error-0308010c-digital-envelope-routines-unsupported-node-error-solved/的
x1c 0d1x的数据
Package.JSON
{
"name": "@testApp/testApp-react",
"version": "0.22.0-test",
"description": "testApp React",
"main": "./build/index.js",
"types": "./build/index.d.ts",
"files": [
"src",
"!src/**/__tests__/**",
"lib",
"tsconfig.json",
"typings/**",
"rn-cli.config.js"
],
"scripts": {
"build:src": "tsc",
"build:lib": "tsc -p lib",
"build:web:dev": "npm run build:lib && webpack --config web/webpack.config.dev.js",
"build:web:prod": "npm run build:lib && webpack --define process.env.NODE_ENV=\"'production'\" --config web/webpack.config.prod.js",
"lint:eslint:html": "eslint src scripts -f html -o ./reports/lint.html",
"lint": "eslint src scripts && cd tslint-rules && tsc noRawTextRule.ts && cd .. && ./run-tslint.sh",
"run:web:dev": "npm run build:lib && webpack-dev-server --port 3000 --host 0.0.0.0 --config web/webpack.config.dev.js --inline --hot --colors",
"setup:ios": "npm run build:lib && bundle install --deployment && cd ios && bundle exec pod cache clean IDZSwiftCommonCrypto --all && bundle exec pod install --repo-update --verbose",
"start": "npm run build:lib && node node_modules/react-native/local-cli/cli.js start",
"test:src": "cross-env NODE_ICU_DATA=node_modules/full-icu jest --forceExit --detectOpenHandles",
"tsc": "tsc"
},
"repository": {
"type": "git",
"url": "https://stash.testApp.com/scm/dxp/testApp-react.git"
},
"publishConfig": {
"registry": "https://test-bnk.testApp.com/repo/repository/npm-internal/"
},
"author": "testApp Technology Pty Ltd",
"license": "UNLICENSED",
"dependencies": {
"@babel/preset-env": "7.3.4",
"@testApp/lottie-react-native": "3.3.2-testApp.0",
"@testApp/react-native-calendars": "1.19.3-testApp.1",
"@testApp/react-native-interactable": "0.1.3-testApp.12",
"@testApp/react-native-sortable-list": "0.0.22-testApp.0",
"@testApp/react-slot-fill": "2.0.0-testApp.0",
"@types/app-root-path": "1.2.4",
"@types/babel-core": "6.25.3",
"@types/babel-types": "7.0.4",
"@types/babel__core": "7.1.0",
"@types/babel__traverse": "7.0.6",
"@types/big.js": "4.0.0",
"@types/bluebird": "3.5.14",
"@types/chroma-js": "1.3.5",
"@types/d3-scale": "1.0.10",
"@types/d3-shape": "1.3.1",
"@types/d3-time": "1.0.6",
"@types/geojson": "7946.0.8",
"@types/glob": "5.0.33",
"@types/hoist-non-react-statics": "3.3.0",
"@types/image-size": "0.0.29",
"@types/lodash": "4.14.116",
"@types/minimatch": "3.0.3",
"@types/mkdirp": "0.5.1",
"@types/moment-timezone": "0.5.4",
"@types/mustache": "0.8.30",
"@types/node": "10.12.11",
"@types/numeral": "0.0.20",
"@types/opentype.js": "0.0.0",
"@types/pdfkit": "0.7.36",
"@types/pluralize": "0.0.28",
"@types/react": "17.0.0",
"@types/react-beautiful-dnd": "2.3.1",
"@types/react-dom": "^18.2.7",
"@types/read-chunk": "2.1.0",
"@types/redux-logger": "2.6.34",
"@types/remote-redux-devtools": "0.5.1",
"@types/rev-hash": "2.0.0",
"@types/source-map": "0.5.2",
"app-root-path": "2.0.1",
"appcenter-cli": "2.3.0",
"archiver": "1.0.1",
"art": "0.10.1",
"awesome-typescript-loader": "5.2.1",
"babel-eslint": "7.1.1",
"babel-loader": "8.0.5",
"babel-plugin-module-resolver": "3.0.0",
"babel-plugin-react-native-web": "0.16.0",
"babel-polyfill": "6.23.0",
"babel-traverse": "6.26.0",
"big.js": "5.0.3",
"bluebird": "3.4.1",
"chroma-js": "1.3.7",
"commander": "2.19.0",
"cross-spawn": "5.1.0",
"css-loader": "0.28.7",
"d3": "4.5.0",
"d3-scale": "1.0.4",
"d3-shape": "1.0.4",
"d3-time": "1.0.4",
"del": "2.2.2",
"es6-promise": "4.1.1",
"file-loader": "0.10.1",
"full-icu": "1.3.0",
"glob": "7.0.5",
"hoist-non-react-statics": "3.3.0",
"html-webpack-plugin": "3.2.0",
"i18next": "10.0.7",
"image-size": "0.6.1",
"intl": "1.2.5",
"is-png": "1.1.0",
"is-svg": "2.1.0",
"isomorphic-fetch": "2.2.1",
"jest-diff": "24.5.0",
"jju": "1.3.0",
"lodash": "4.17.15",
"map-stream": "0.0.6",
"merge2": "1.0.2",
"metro": "0.53.0",
"metro-core": "0.53.0",
"metro-react-native-babel-preset": "^0.69.0",
"metro-react-native-babel-transformer": "0.53.0",
"metrohash": "^2.8.0",
"mkdirp": "0.5.1",
"moment": "2.22.2",
"moment-timezone": "0.5.14",
"mustache": "2.2.1",
"node-xml-lite": "0.0.7",
"numeral": "2.0.4",
"opentype.js": "0.7.3",
"pdfkit": "0.9.0",
"pluralize": "7.0.0",
"prop-types": "15.6.0",
"react": "18.2.0",
"react-art": "16.8.3",
"react-beautiful-dnd": "2.5.0",
"react-dom": "18.2.0",
"react-grid-layout": "1.3.4",
"react-i18next": "12.3.1",
"react-native": "0.71.0",
"react-native-animatable": "1.3.0",
"react-native-maps": "1.7.0",
"react-native-modal-datetime-picker": "4.11.0",
"react-native-render-html": "4.1.2",
"react-native-safe-module": "1.2.0",
"react-native-svg": "5.4.1",
"react-native-typescript-transformer": "1.2.13",
"react-native-web": "0.18.10",
"react-redux": "7.2.8",
"react-resizable": "1.6.0",
"read-chunk": "2.1.0",
"redux": "3.7.2",
"redux-logger": "2.6.1",
"redux-thunk": "2.2.0",
"remote-redux-devtools": "0.5.16",
"reselect": "3.0.1",
"rev-hash": "2.0.0",
"rxjs": "5.4.3",
"style-loader": "0.19.1",
"svg-to-pdfkit": "0.1.4",
"svg2vectordrawable": "1.1.10",
"through2": "2.0.1",
"traverse": "0.6.6",
"ts-node": "8.0.2",
"tsconfig-paths": "3.8.0",
"tsconfig-paths-webpack-plugin": "1.2.0",
"tslib": "1.8.0",
"tslint": "5.10.0",
"typescript": "4.0.2",
"typescript-json-schema": "0.19.0",
"url-loader": "1.1.2",
"uuid": "3.0.1",
"vinyl": "1.2.0",
"webpack-merge": "4.1.0",
"xlsx": "0.14.1"
},
"devDependencies": {
"@babel/runtime": "^7.15.4",
"@types/cheerio": "0.22.2",
"@types/intl": "1.2.0",
"@types/jest": "24.0.11",
"@types/mockdate": "2.0.0",
"@types/redux-mock-store": "0.0.8",
"babel-jest": "24.4.0",
"babel-plugin-jest-hoist": "24.3.0",
"babel-plugin-transform-react-remove-prop-types": "0.4.6",
"concurrently": "3.4.0",
"cross-env": "5.2.0",
"enzyme": "3.9.0",
"enzyme-adapter-react-16": "1.11.2",
"eslint": "3.16.1",
"eslint-config-airbnb": "12.0.0",
"eslint-plugin-import": "1.16.0",
"eslint-plugin-jsx-a11y": "2.2.2",
"eslint-plugin-react": "6.3.0",
"git-revision-webpack-plugin": "3.0.3",
"jest": "24.4.0",
"mockdate": "2.0.2",
"react-native-mock": "0.3.1",
"react-test-renderer": "16.8.3",
"redux-mock-store": "1.2.2",
"ts-jest": "24.0.0",
"typescript-tslint-plugin": "0.1.0",
"webpack": "4.44.2",
"webpack-cli": "3.3.12",
"webpack-dev-server": "3.11.3"
}
}
字符串
Webpack.config.common.js和webpack.config.dev.js
const appRootPath = require('app-root-path');
const customizationTransformer = require('../lib/customizationTransformer').default;
const fs = require('fs');
const glob = require('glob');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const jju = require('jju');
const os = require('os');
const process = require('process');
const revHash = require('rev-hash');
const ts = require('typescript');
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
function loadJsonFile(jsonFilename) {
if (!fs.existsSync(jsonFilename)) {
throw new Error('Input file not found: ' + jsonFilename);
}
const buffer = fs.readFileSync(jsonFilename);
try {
return jju.parse(buffer.toString());
} catch (error) {
throw new Error('Error reading "' + jsonFilename + '":'+os.EOL + ' ' + error.message);
}
}
const tsConfig = (() => {
const tsConfigPath = appRootPath.resolve('tsconfig.json');
if (fs.existsSync(tsConfigPath)) {
return loadJsonFile(tsConfigPath);
}
throw new Error('Unable to find tsconfig.json at ' + tsConfigPath);
})();
const compilerOptions = ts.convertCompilerOptionsFromJson((Object.assign(tsConfig.compilerOptions, {
sourceMap: true,
inlineSources: true,
})), process.cwd());
const rootFileNames = [
...glob.sync(appRootPath.resolve('src/**/*.ts*')),
...glob.sync(appRootPath.resolve('node_modules/@test/abc-front-end/src/**/*.ts*')),
];
module.exports = {
devtool: 'cheap-module-source-map',
entry: [
'babel-polyfill',
'./src/index.web.tsx',
],
module: {
rules: [
{
test: /\.(ts)x?$/,
exclude: /node_modules|\.d\.ts$/, // this line as well
use: {
loader: 'ts-loader',
options: {
compilerOptions: {
noEmit: false, // this option will solve the issue
},
},
},
},
{
test: /\.(js|ts|tsx?)$/,
use: {
loader: 'babel-loader',
options: {
cacheDirectory: true,
plugins: ['react-native-web'],
presets: ['@babel/preset-env'],
exclude: [/node_modules+.(?!(punycode))/],
},
},
},
{
test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
loader: 'url-loader',
},
{
test: /\.css$/,
use: [
{ loader: 'style-loader', options: { debug: true } },
{ loader: 'css-loader', options: { debug: true } },
],
},
],
},
plugins: [
new NodePolyfillPlugin(),
new HtmlWebpackPlugin({
inject: true,
template: 'web/src/index.html',
}),
new webpack.ProvidePlugin({
process: 'process/browser',
Buffer: ['buffer', 'Buffer'],
})
],
resolve: {
extensions: ['.web.js', '.js', '.json', '.web.ts', '.web.tsx', '.ts', '.tsx'],
plugins: [new TsconfigPathsPlugin(),
new NodePolyfillPlugin(),
new webpack.ProvidePlugin({
process: 'process/browser',
Buffer: ['buffer', 'Buffer'],
})],
alias: {
'react-native': 'react-native-web',
'react/lib/ReactInstanceMap': 'react-dom/lib/ReactInstanceMap',
'react/lib/ReactMultiChild': 'react-dom/lib/ReactMultiChild',
'react/lib/ReactUpdates': 'react-dom/lib/ReactUpdates',
},
},
stats: {
errorDetails: true
}
};
const path = require('path');
const webpack = require('webpack');
const merge = require('webpack-merge');
const common = require('./webpack.config.common.js');
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin');
module.exports = merge(common, {
mode: 'development',
devServer: {
port: 3000,
host: '0.0.0.0',
inline: true,
colors: true,
hot:true,
contentBase: path.join(__dirname, 'src'),
proxy: {
'/customers': {
target: 'http://localhost:8801',
secure: false,
},
},
},
output: {
path: path.join(__dirname, '../build'),
filename: 'react/bundleDev.js',
},
resolve: {
fallback: {
assert: require.resolve('assert'),
buffer: require.resolve('buffer'),
console: require.resolve('console-browserify'),
constants: require.resolve('constants-browserify'),
crypto: require.resolve('crypto-browserify'),
domain: require.resolve('domain-browser'),
events: require.resolve('events'),
http: require.resolve('stream-http'),
https: require.resolve('https-browserify'),
os: require.resolve('os-browserify/browser'),
path: require.resolve('path-browserify'),
punycode: require.resolve('punycode'),
process: require.resolve('process/browser'),
querystring: require.resolve('querystring-es3'),
stream: require.resolve('stream-browserify'),
string_decoder: require.resolve('string_decoder'),
sys: require.resolve('util'),
timers: require.resolve('timers-browserify'),
tty: require.resolve('tty-browserify'),
url: require.resolve('url'),
util: require.resolve('util'),
vm: require.resolve('vm-browserify'),
zlib: require.resolve('browserify-zlib'),
},
}
});
型
TSCONFIG.JSON
{
"compilerOptions": {
"allowJs": true,
"allowSyntheticDefaultImports": true,
"baseUrl": ".",
"experimentalDecorators": true,
"forceConsistentCasingInFileNames": true,
"importHelpers": false,
"isolatedModules": true,
"jsx": "react",
"module": "es2015",
"moduleResolution": "node",
"noEmit": false,
"noEmitHelpers": false,
"noErrorTruncation": true,
"noFallthroughCasesInSwitch": true,
"noImplicitAny": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"outDir": "build",
"preserveConstEnums": true,
"pretty": true,
"skipLibCheck": true,
"sourceMap": true,
"strict": true,
"strictNullChecks": true,
"target": "es2015",
"paths": {
"react": [ "./node_modules/@types/react" ],
"dbfe/*": [
"src/*",
"src/*.ios",
"src/*.android",
"node_modules/@test/TEST-front-end/src/*",
"node_modules/@test/TEST-front-end/src/*.ios",
"node_modules/@test/TEST-front-end/src/*.android"
]
},
"typeRoots":[
"./typings",
"./node_modules/@types"
]
},
"exclude": [
"*.js",
"android",
"coverage",
"scripts",
"sub-resources",
"web",
"ios",
"build",
"node_modules",
"vendor",
"lib"
],
"filesGlob": [
"src/**/*.ts",
"src/**/*.tsx",
"node_modules/@test/TEST-front-end/src/**/*.ts",
"node_modules/@test/TEST-front-end/src/**/*.tsx"
],
"types": [
"react",
"react-native",
"jest"
],
"plugins": [
{
"name": "typescript-tslint-plugin"
}
]
}
型
1条答案
按热度按时间bogh5gae1#
你使用了
node-polyfill-webpack-plugin
,这导致了这个问题,因为webpack 5默认情况下不再包含Node.js核心模块的polyfills。代替通过此插件为Node.js核心模块添加polyfill,您可以使用webpack配置的resolve
部分中的fallback
选项。字符串
并将回退函数替换为
型
通过进行此更改,我们告诉Webpack在捆绑代码时为Node.js核心模块使用指定的浏览器兼容模块(polyfills)。
另外,在webpack.config.dev.js中,plugins部分有两个
new NodePolyfillPlugin()
示例。在通用配置中只需要它的一个示例。您可以从webpack.config.dev.js中删除额外的一个。