在 nativescript-vue 项目上的 axios 导入时出现意外的令牌错误

Posted 2023-02-22

【中文标题】在 nativescript-vue 项目上的 axios 导入时出现意外的令牌错误

【英文标题】：Unexpected token error on axios import on a nativescript-vue project

【发布时间】：2020-02-18 10:22:49

【问题描述】：

我有一个 nativescript 和 vue 项目，我正在尝试进行 axios 调用。

一旦我通过 npm 安装 axios 包并将其导入到我的项目中，tns run ios 命令就会出现以下错误：

Project successfully built.
The build result is located at: /Users/admin/Desktop/Sites/frontent/platforms/ios/build/Debug-iphonesimulator/frontendnative.app
Installing on device 4B430620-3B24-43CB-B743-705A8E9FB2D7...
Successfully installed on device with identifier '4B430620-3B24-43CB-B743-705A8E9FB2D7'.
Successfully transferred all files on device 4B430620-3B24-43CB-B743-705A8E9FB2D7.
Restarting application on device 4B430620-3B24-43CB-B743-705A8E9FB2D7...
Successfully synced application com.frontend on device 4B430620-3B24-43CB-B743-705A8E9FB2D7.
Successfully transferred bundle.64b9e6405a9a75fb778e.hot-update.js on device 4B430620-3B24-43CB-B743-705A8E9FB2D7.
Successfully transferred 64b9e6405a9a75fb778e.hot-update.json on device 4B430620-3B24-43CB-B743-705A8E9FB2D7.
***** Fatal javascript exception - application has been terminated. *****
Native stack trace:
1   0x10a60371a NativeScript::reportFatalErrorBeforeShutdown(JSC::ExecState*, JSC::Exception*, bool)
2   0x10a64f14c -[TNSRuntime executeModule:referredBy:]
3   0x109f21713 main
4   0x7fff516ecd29 start
5   0x1
JavaScript stack trace:
file:///node_modules/debug/src/node.js:201:2
at promiseReactionJob([native code])
at require([native code])
at anonymous(file:///app/bundle.js:1:102)
at evaluate([native code])
at moduleEvaluation([native code])
at promiseReactionJob([native code])
JavaScript error:
file:///node_modules/debug/src/node.js:201:2: JS ERROR SyntaxError: Unexpected token ':'. Parse error.
(CoreFoundation) *** Terminating app due to uncaught exception 'NativeScript encountered a fatal error: SyntaxError: Unexpected token ':'. Parse error.
at
file:///node_modules/debug/src/node.js:201:2
at promiseReactionJob([native code])
at require([native code])
at anonymous(file:///app/bundle.js:1:102)
at evaluate([native code])
at moduleEvaluation([native code])
at promiseReactionJob([native code])
', reason: '(null)'
*** First throw call stack:
(
0   CoreFoundation                      0x00007fff23baa1ee __exceptionPreprocess + 350
1   libobjc.A.dylib                     0x00007fff50864b20 objc_exception_throw + 48
2   NativeScript                        0x000000010a603bbf _ZN12NativeScript30reportFatalErrorBeforeShutdownEPN3JSC9ExecStateEPNS0_9ExceptionEb + 1455
3   NativeScript                        0x000000010a64f14c -[TNSRuntime executeModule:referredBy:] + 668
4   frontendtest          0x0000000109f21713 main + 179
5   libdyld.dylib                       0x00007fff516ecd29 start + 1
6   ???         <…>
NativeScript caught signal 6.
Native Stack:
1   0x10a64dcb1 sig_handler(int)
2   0x7fff518c9b1d _sigtramp
3   0x1
4   0x7fff517b9a3c abort
5   0x7fff4f6d27f8 __cxa_bad_cast
6   0x7fff4f6d29c7 demangling_unexpected_handler()
7   0x7fff50864d7c _objc_terminate()
8   0x7fff4f6dfe97 std::__terminate(void (*)())
9   0x7fff4f6df8fe __cxa_get_exception_ptr
10  0x7fff4f6df8c5 __cxxabiv1::exception_cleanup_func(_Unwind_Reason_Code, _Unwind_Exception*)
11  0x7fff50864c44 _objc_exception_destructor(void*)
12  0x10a603bbf NativeScript::reportFatalErrorBeforeShutdown(JSC::ExecState*, JSC::Exception*, bool)
13  0x10a64f14c -[TNSRuntime executeModule:referredBy:]
14  0x109f21713 main
15  0x7fff516ecd29 start
16  0x1
JS Stack:
***** Fatal JavaScript exception - application has been terminated. *****
Native stack trace:
1   0x10dd6f71a NativeScript::reportFatalErrorBeforeShutdown(JSC::ExecState*, JSC::Exception*, bool)
2   0x10ddbb14c -[TNSRuntime executeModule:referredBy:]
3   0x10d68d713 main
4   0x7fff516ecd29 start
5   0x1
JavaScript stack trace:
file:///node_modules/debug/src/node.js:201:2
at promiseReactionJob([native code])
at require([native code])
at anonymous(file:///app/bundle.js:1:102)
at evaluate([native code])
at moduleEvaluation([native code])
at promiseReactionJob([native code])
JavaScript error:
file:///node_modules/debug/src/node.js:201:2: JS ERROR SyntaxError: Unexpected token ':'. Parse error.
(CoreFoundation) *** Terminating app due to uncaught exception 'NativeScript encountered a fatal error: SyntaxError: Unexpected token ':'. Parse error.
at
file:///node_modules/debug/src/node.js:201:2
at promiseReactionJob([native code])
at require([native code])
at anonymous(file:///app/bundle.js:1:102)
at evaluate([native code])
at moduleEvaluation([native code])
at promiseReactionJob([native code])
', reason: '(null)'
*** First throw call stack:
(
0   CoreFoundation                      0x00007fff23baa1ee __exceptionPreprocess + 350
1   libobjc.A.dylib                     0x00007fff50864b20 objc_exception_throw + 48
2   NativeScript                        0x000000010dd6fbbf _ZN12NativeScript30reportFatalErrorBeforeShutdownEPN3JSC9ExecStateEPNS0_9ExceptionEb + 1455
3   NativeScript                        0x000000010ddbb14c -[TNSRuntime executeModule:referredBy:] + 668
4   frontendtest          0x000000010d68d713 main + 179
5   libdyld.dylib                       0x00007fff516ecd29 start + 1
6   ???         <…>
NativeScript caught signal 6.
Native Stack:
1   0x10ddb9cb1 sig_handler(int)
2   0x7fff518c9b1d _sigtramp
3   0x1
4   0x7fff517b9a3c abort
5   0x7fff4f6d27f8 __cxa_bad_cast
6   0x7fff4f6d29c7 demangling_unexpected_handler()
7   0x7fff50864d7c _objc_terminate()
8   0x7fff4f6dfe97 std::__terminate(void (*)())
9   0x7fff4f6df8fe __cxa_get_exception_ptr
10  0x7fff4f6df8c5 __cxxabiv1::exception_cleanup_func(_Unwind_Reason_Code, _Unwind_Exception*)
11  0x7fff50864c44 _objc_exception_destructor(void*)
12  0x10dd6fbbf NativeScript::reportFatalErrorBeforeShutdown(JSC::ExecState*, JSC::Exception*, bool)
13  0x10ddbb14c -[TNSRuntime executeModule:referredBy:]
14  0x10d68d713 main
15  0x7fff516ecd29 start
16  0x1
JS Stack:

在 main.js 我这样导入它：

import axios from 'axios'

并在这样的组件中进行后期调用：

return axios.post('/api/v1/auth/login', 
      email,
      password
    ).then(response => 
      console.log(response)
    ).catch((error) => console.log(error))

这很奇怪，但我想不通。如果我完全删除 axios，错误就消失了。 我该如何解决？

package.json 中的项目依赖项

"core-js": "^3.2.1",
"frontend-core": "file:../frontend-core",
"moment": "^2.24.0",
"nativescript-app-sync": "^1.0.7",
"nativescript-carousel": "^6.1.1",
"nativescript-geolocation": "^5.1.0",
"nativescript-localize": "^4.2.0",
"nativescript-theme-core": "^2.0.23",
"nativescript-ui-calendar": "^5.0.0",
"nativescript-ui-dataform": "^5.1.1",
"nativescript-ui-sidedrawer": "^7.0.3",
"nativescript-vue": "^2.4.0",
"nativescript-vue-lifecycle-hooks": "^1.0.0",
"nativescript-vue-navigator": "^0.2.0",
"tns-core-modules": "^6.1.1",
"axios": "^0.19.0",
"vue": "^2.6.10",
"vuex": "^3.1.1"

【问题讨论】：

看起来您的响应不是 JSON，请尝试将 responseType 设置为 text。如果仍然遇到问题，请分享 Playground 示例。

我认为这与响应无关，因为我也尝试使用jsonplaceholder.typicode.com/todos/1 - 这是一个 JSON 端点-。

是用 Playground 复制的吗？

我会检查，但我认为很难将整个设置移动到游乐场。

你不需要移动任何东西，你只需要安装 Axios 并调整你的 require 语句（相对路径），点击 API。

【参考方案1】：

好像 axios 在 NativeScript + Vue 上有问题。当我改变时它起作用了 import axios from 'axios' 到 import axios from 'axios/dist/axios'