实习期间前端报错以及解决方案汇总1(乱序)
Q1:JS stack trace,JavaScript堆内存不足,导致内存分配失败
<--- Last few GCs --->
[18536:0000012952B2F250] 94786 ms: Mark-sweep 839.0 (1398.1) -> 838.7 (1388.6) MB, 238.5 / 0.0 ms allocation failure GC in old space requested
[18536:0000012952B2F250] 95008 ms: Mark-sweep 838.7 (1388.6) -> 837.2 (1322.7) MB, 221.7 / 0.0 ms last resort GC in old space requested
[18536:0000012952B2F250] 95228 ms: Mark-sweep 837.2 (1322.7) -> 837.2 (1288.7) MB, 219.8 / 0.0 ms last resort GC in old space requested
<--- JS stacktrace --->
==== JS stack trace =========================================
Security context: 000002F2457A5891 <JSObject>
1: fromString(aka fromString) [buffer.js:~298] [pc=00000352FDCC27C9](this=000000FA400022D1 <undefined>,string=0000024386CDDC89 <Very long string[179109870]>,encoding=000002F2457B5279 <String[4]: utf8>)
2: from [buffer.js:177] [bytecode=0000018D3AD63EA1 offset=11](this=0000026EE0E35D89 <JSFunction Buffer (sfi = 000002F2457FE081)>,value=0000024386CDDC89 <Very long string[179109870]>,enco...
FATAL ERROR: CALL_AND_RETRY_LAST Allocation failed - JavaScript heap out of memory
1: node_module_register
2: v8::internal::FatalProcessOutOfMemory
3: v8::internal::FatalProcessOutOfMemory
4: v8::internal::Factory::NewRawTwoByteString
5: v8::internal::Smi::SmiPrint
6: v8::internal::StackGuard::HandleInterrupts
7: v8::String::WriteUtf8
8: v8::internal::wasm::AsmType::Extern
9: node::Buffer::New
10: node::Buffer::New
11: 00000352FDDB2826
npm ERR! code ELIFECYCLE
npm ERR! errno 3
npm ERR! pimp-frontend@1.2.1 dev: `webpack-dev-server --inline --progress --config build/webpack.dev.conf.js`
npm ERR! Exit status 3
npm ERR!
npm ERR! Failed at the pimp-frontend@1.2.1 dev script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\Administrator\AppData\Roaming\npm-cache\_logs\2023-10-07T01_42_27_035Z-debug.log
A1:默认情况下给的内存比较小,解决方法就是自行扩大内存,更改项目名\node_modules.bin\webpack-dev-server.cmd内容为:
@IF EXIST "%~dp0\node.exe" (
"%~dp0\node.exe" "--max_old_space_size=8192" "%~dp0\..\webpack-dev-server\bin\webpack-dev-server.js" %*
) ELSE (
@SETLOCAL
@SET PATHEXT=%PATHEXT:;.JS;=;%
node "--max_old_space_size=8192" "%~dp0\..\webpack-dev-server\bin\webpack-dev-server.js" %*
)
8192表示新设置的大小,可自行根据情况更改
Q2:npm -v直接报错
C:\Users\Administrator>npm -v
#
# Fatal process OOM in insufficient memory to create an Isolate
#
<--- Last few GCs --->
<--- JS stacktrace --->
#
# Fatal process OOM in insufficient memory to create an Isolate
#
A2:npm玩烂了。。。重装解决
Q3:vue编译的时候报错后缀报错
vueNo parser and no filepath given, using 'babel' the parser now but this will throw an error in the future. Please specify a parser or a filepath so one can be inferred.
A3:这个错可能原因是vue-loader的版本没跟上其他包的版本导致解析器不运行,我最后选择了更改node_modules\vue-loader\lib\template-compiler\index.js 的80行为
if (!isProduction) {
code = prettier.format(code, { semi: false ,parser: "babel" })
}
参考:
Q4:编译时.mjs文件报错
ERROR Failed to compile with 5 errors 2:32:54 PM
error in ./node_modules/minio/dist/esm/helpers.mjs
Module parse failed: D:\program\front\sst-manager\BosManagerFrontend\node_modules\minio\dist\esm\helpers.mjs Unexpected token (102:34)
You may need an appropriate loader to handle this file type.
| this.Bucket = Bucket;
| this.Object = Object;
| this.Encryption = Encryption ?? undefined; // null input will become undefined, easy for runtime assert
| this.UserMetadata = UserMetadata;
| this.UserTags = UserTags;
(部分错误展示)
A4:查询很多后发现可能原因是缺少适当的加载器来处理文件类型,项目对ES6语法不支持,最终结合chatgpt首先在\build\webpack.base.conf.js文件的rules中添加
{
test: /\.mjs$/,
loader: 'babel-loader'
},
然后我项目只剩下了 ?? 这个运算符无法识别,然后我手动使用三目运算符来替换??以达到相同效果
如\node_modules\minio\dist\esm\internal\client.mjs文件中:
//替换前
// this.accessKey = params.accessKey ?? '';
// this.secretKey = params.secretKey ?? '';
//替换后
this.accessKey = (params.accessKey !== null && params.accessKey !== undefined) ? params.accessKey : '';
this.secretKey = (params.secretKey !== null && params.secretKey !== undefined) ? params.secretKey : '';
Q5:python2.7环境缺失
npm ERR! gyp verb could not find "C:\Python".
A5:首先根据网上教程,安装windows-build-tools,结果卡半天,卡在卡在Successfully installed Python 2.7,又搜寻教程,最后找到解决方案: