Unexpected token error on axios import on a nativescript-vue project

Question

I have a nativescript & vue project and I am trying to do axios calls.

As soon as I install axios package via npm and import it to my project, tns run ios command gives this errors:

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:

In main.js I import it like this:

import axios from 'axios'

and do a post call in a component like this:

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

It's very strange, but I couldn't figure it out. The error is gone if I remove axios completely. How can I fix it?

Project dependencies in 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"

Looks like your response is not JSON, try setting responseType to text. If still facing issue, share a Playground sample. — Manoj
I don't think it is related to response, because I also tried to use jsonplaceholder.typicode.com/todos/1 -which is a JSON endpoint-. — Koray Küpe
I'll check, but I think it will be hard to move whole setup to playground. — Koray Küpe
You don't have to move anything, all you need is to install Axios and adjust your require statement (relative path), hit the API. — Manoj

Koray Küpe Koray Küpe · Accepted Answer · 2019-10-24T08:20:13

It seems like axios has problems on NativeScript + Vue. It worked when I change import axios from 'axios' to import axios from 'axios/dist/axios'

Unexpected token error on axios import on a nativescript-vue project

1 Answers