实习期间前端报错以及解决方案汇总1（乱序）

实习期间前端报错以及解决方案汇总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" })
    }

参考：

No parser and no filepath given, using ‘babel’ the parser now but this will throw an error in t he f-CSDN博客

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，又搜寻教程，最后找到解决方案：

npm安装windows-build-tools时卡在Successfully installed Python 2.7_npm install -global -production windows-build-tool-CSDN博客