1. 技术文章
  2. “Error: Cannot read property 'slice' of undefined” when importing apollo-link-ws in nativescript vue?

“Error: Cannot read property 'slice' of undefined” when importing apollo-link-ws in nativescript vue?

由 帅比萌擦擦* 提交于 2020-06-17 09:34:28

问题


My goal is to use subscriptions in GraphQL in a nativescript vue app to avoid google firebase. It works fine using HttpLink, but it doesn't with websockets. The Error: TypeError: Cannot read property 'slice' of undefined occurs on runtime when importing apollo-link-ws or subscription-transport-ws. As soon as I comment both imports out, the code runs again and I can use GraphQL over http. 

const Vue = require('nativescript-vue');
import {
    ApolloClient
} from 'apollo-client'
import {
    HttpLink
} from 'apollo-link-http'
import {
    InMemoryCache
} from 'apollo-cache-inmemory'
import VueApollo from 'vue-apollo'

import  { WebSocketLink }  from "apollo-link-ws";  // Error: TypeError: Cannot read property 'slice' of undefined
import { SubscriptionClient } from "subscriptions-transport-ws"; // Same Error

I've used the current versions on npm, but also attempted downgrading some packages, so this is a section of package.json.

    "apollo-boost": "^0.4.9",
    "apollo-link-ws": "^1.0.7",
    "bufferutil": "^4.0.1",
    "graphql": "^0.12.0",
    "graphql-tag": "^2.10.3",
    "nativescript-vue": "~2.4.0",
    "net": "^1.0.2",
    "subscriptions-transport-ws": "^0.9.5",
    "tls": "0.0.1",
    "tns-core-modules": "~6.5.0",
    "typescript": "^3.9.5",
    "utf-8-validate": "^5.0.2",
    "vue-apollo": "^3.0.3"

The full error I get is

Successfully synced application org.nativescript.apollotest on device emulator-5554.
System.err: An uncaught Exception occurred on "main" thread.
System.err: Unable to create application com.tns.NativeScriptApplication: com.tns.NativeScriptException: Error calling module function 
System.err: TypeError: Cannot read property 'slice' of undefined
System.err: File: (file: node_modules/readable-stream/lib/_stream_writable.js:57:80)
System.err: 
System.err: StackTrace: 
System.err: (file: node_modules/readable-stream/lib/_stream_writable.js:57:80)
System.err:     at ../node_modules/readable-stream/lib/_stream_writable.js(file:///data/data/org.nativescript.apollotest/files/app/vendor.js:127755:30)
System.err:     at __webpack_require__(file: app/webpack/bootstrap:750:0)
System.err:     at fn(file: app/webpack/bootstrap:120:0)
System.err:     at ../node_modules/readable-stream/writable.js(file: node_modules/readable-stream/writable.js:2:15)
System.err:     at __webpack_require__(file: app/webpack/bootstrap:750:0)
System.err:     at fn(file: app/webpack/bootstrap:120:0)
System.err:     at ../node_modules/stream-browserify/index.js(file: node_modules/stream-browserify/index.js:29:18)
System.err:     at __webpack_require__(file: app/webpack/bootstrap:750:0)
System.err:     at fn(file: app/webpack/bootstrap:120:0)
System.err:     at ../node_modules/readable-stream/readable.js(file: node_modules/readable-stream/readable.js:1:13)
System.err:     at __webpack_require__(file: app/webpack/bootstrap:750:0)
System.err:     at fn(file: app/webpack/bootstrap:120:0)
System.err:     at ../node_modules/hash-base/index.js(file: node_modules/hash-base/index.js:3:16)
System.err:     at __webpack_require__(file: app/webpack/bootstrap:750:0)
System.err:     at fn(file: app/webpack/bootstrap:120:0)
System.err:     at ../node_modules/md5.js/index.js(file: node_modules/md5.js/index.js:3:15)
System.err:     at __webpack_require__(file: app/webpack/bootstrap:750:0)
System.err:     at fn(file: app/webpack/bootstrap:120:0)
System.err:     at ../node_modules/evp_bytestokey/index.js(file: node_modules/evp_bytestokey/index.js:2:10)
System.err:     at __webpack_require__(file: app/webpack/bootstrap:750:0)
System.err:     at fn(file: app/webpack/bootstrap:120:0)
System.err:     at ../node_modules/parse-asn1/fixProc.js(file: node_modules/parse-asn1/fixProc.js:5:10)
System.err:     at __webpack_require__(file: app/webpack/bootstrap:750:0)
System.err:     at fn(file: app/webpack/bootstrap:120:0)
System.err:     at ../node_modules/parse-asn1/index.js(file: node_modules/parse-asn1/index.js:3:14)
System.err:     at __webpack_require__(file: app/webpack/bootstrap:750:0)
System.err:     at fn(file: app/webpack/bootstrap:120:0)
System.err:     at ../node_modules/public-encrypt/publicEncrypt.js(file: node_modules/public-encrypt/publicEncrypt.js:1:16)
System.err:     at __webpack_require__(file: app/webpack/bootstrap:750:0)
System.err:     at fn(file: app/webpack/bootstrap:120:0)
System.err:     at ../node_modules/public-encrypt/browser.js(file: node_modules/public-encrypt/browser.js:1:24)
System.err:     at __webpack_require__(file: app/webpack/bootstrap:750:0)
System.err:     at fn(file: app/webpack/bootstrap:120:0)
System.err:     at ../node_modules/public-encrypt/index.js(file: node_modules/public-encrypt/index.js:3:11)
System.err:     at __webpack_require__(file: app/webpack/bootstrap:750:0)
System.err:     at fn(file: app/webpack/bootstrap:120:0)
System.err:     at ../node_modules/crypto-browserify/index.js(file: node_modules/crypto-browserify/index.js:48:20)
System.err:     at __webpack_require__(file: app/webpack/bootstrap:750:0)
System.err:     at fn(file: app/webpack/bootstrap:120:0)
System.err:     at ../node_modules/ws/lib/websocket.js(file: node_modules/ws/lib/websocket.js:4:15)
System.err:     at __webpack_require__(file: app/webpack/bootstrap:750:0)
System.err:     at fn(file: app/webpack/bootstrap:120:0)
System.err:     at ../node_modules/ws/index.js(file: node_modules/ws/index.js:3:18)
System.err:     at __webpack_require__(file: app/webpack/bootstrap:750:0)
System.err:     at fn(file: app/webpack/bootstrap:120:0)
System.err:     at ../node_modules/subscriptions-transport-ws/dist/server.js(file: app/src/server.ts:1:0)
System.err:     at __webpack_require__(file: app/webpack/bootstrap:750:0)
System.err:     at fn(file: app/webpack/bootstrap:120:0)
System.err:     at ../node_modules/subscriptions-transport-ws/dist/index.js(file: app/src/index.ts:2:0)
System.err:     at __webpack_require__(file: app/webpack/bootstrap:750:0)
System.err:     at fn(file: app/webpack/bootstrap:120:0)
System.err:     at ../node_modules/apollo-link-ws/lib/webSocketLink.js(file:///data/data/org.nativescript.apollotest/files/app/vendor.js:54361:84)
System.err:     at __webpack_require__(file: app/webpack/bootstrap:750:0)
System.err:     at fn(file: app/webpack/bootstrap:120:0)
System.err:     at ../node_modules/apollo-link-ws/lib/index.js(file: app/src/index.ts:1:0)
System.err:     at __webpack_require__(file: app/webpack/bootstrap:750:0)
System.err:     at fn(file: app/webpack/bootstrap:120:0)
System.err:     at ./apolloProvider.js(file: app/apolloProvider.js:1:0)
System.err:     at __webpack_require__(file: app/webpack/bootstrap:750:0)
System.err:     at fn(file: app/webpack/bootstrap:120:0)
System.err:     at (file: app/app.js:1:0)
System.err:     at ./app.js(file:///data/data/org.nativescript.apollotest/files/app/bundle.js:335:30)
System.err:     at __webpack_require__(file: app/webpack/bootstrap:750:0)
System.err:     at checkDeferredModules(file: app/webpack/bootstrap:43:0)
System.err:     at webpackJsonpCallback(file: app/webpack/bootstrap:30:0)
System.err:     at (file:///data/data/org.nativescript.apollotest/files/app/bundle.js:2:57)
System.err:     at require(:1:266)
System.err: 
System.err: 
System.err: TypeError: Cannot read property 'slice' of undefined
System.err: 
System.err: StackTrace:
System.err: java.lang.RuntimeException: Unable to create application com.tns.NativeScriptApplication: com.tns.NativeScriptException: Error calling module function 
System.err: TypeError: Cannot read property 'slice' of undefined
System.err: File: (file: node_modules/readable-stream/lib/_stream_writable.js:57:80)
System.err: 
System.err: StackTrace: 
System.err: (file: node_modules/readable-stream/lib/_stream_writable.js:57:80)
System.err:     at ../node_modules/readable-stream/lib/_stream_writable.js(file:///data/data/org.nativescript.apollotest/files/app/vendor.js:127755:30)
System.err:     at __webpack_require__(file: app/webpack/bootstrap:750:0)
System.err:     at fn(file: app/webpack/bootstrap:120:0)
System.err:     at ../node_modules/readable-stream/writable.js(file: node_modules/readable-stream/writable.js:2:15)
System.err:     at __webpack_require__(file: app/webpack/bootstrap:750:0)
System.err:     at fn(file: app/webpack/bootstrap:120:0)
System.err:     at ../node_modules/stream-browserify/index.js(file: node_modules/stream-browserify/index.js:29:18)
System.err:     at __webpack_require__(file: app/webpack/bootstrap:750:0)
System.err:     at fn(file: app/webpack/bootstrap:120:0)
System.err:     at ../node_modules/readable-stream/readable.js(file: node_modules/readable-stream/readable.js:1:13)
System.err:     at __webpack_require__(file: app/webpack/bootstrap:750:0)
System.err:     at fn(file: app/webpack/bootstrap:120:0)
System.err:     at ../node_modules/hash-base/index.js(file: node_modules/hash-base/index.js:3:16)
System.err:     at __webpack_require__(file: app/webpack/bootstrap:750:0)
System.err:     at fn(file: app/webpack/bootstrap:120:0)
System.err:     at ../node_modules/md5.js/index.js(file: node_modules/md5.js/index.js:3:15)
System.err:     at __webpack_require__(file: app/webpack/bootstrap:750:0)
System.err:     at fn(file: app/webpack/bootstrap:120:0)
System.err:     at ../node_modules/evp_bytestokey/index.js(file: node_modules/evp_bytestokey/index.js:2:10)
System.err:     at __webpack_require__(file: app/webpack/bootstrap:750:0)
System.err:     at fn(file: app/webpack/bootstrap:120:0)
System.err:     at ../node_modules/parse-asn1/fixProc.js(file: node_modules/parse-asn1/fixProc.js:5:10)
System.err:     at __webpack_require__(file: app/webpack/bootstrap:750:0)
System.err:     at fn(file: app/webpack/bootstrap:120:0)
System.err:     at ../node_modules/parse-asn1/index.js(file: node_modules/parse-asn1/index.js:3:14)
System.err:     at __webpack_require__(file: app/webpack/bootstrap:750:0)
System.err:     at fn(file: app/webpack/bootstrap:120:0)
System.err:     at ../node_modules/public-encrypt/publicEncrypt.js(file: node_modules/public-encrypt/publicEncrypt.js:1:16)
System.err:     at __webpack_require__(file: app/webpack/bootstrap:750:0)
System.err:     at fn(file: app/webpack/bootstrap:120:0)
System.err:     at ../node_modules/public-encrypt/browser.js(file: node_modules/public-encrypt/browser.js:1:24)
System.err:     at __webpack_require__(file: app/webpack/bootstrap:750:0)
System.err:     at fn(file: app/webpack/bootstrap:120:0)
System.err:     at ../node_modules/public-encrypt/index.js(file: node_modules/public-encrypt/index.js:3:11)
System.err:     at __webpack_require__(file: app/webpack/bootstrap:750:0)
System.err:     at fn(file: app/webpack/bootstrap:120:0)
System.err:     at ../node_modules/crypto-browserify/index.js(file: node_modules/crypto-browserify/index.js:48:20)
System.err:     at __webpack_require__(file: app/webpack/bootstrap:750:0)
System.err:     at fn(file: app/webpack/bootstrap:120:0)
System.err:     at ../node_modules/ws/lib/websocket.js(file: node_modules/ws/lib/websocket.js:4:15)
System.err:     at __webpack_require__(file: app/webpack/bootstrap:750:0)
System.err:     at fn(file: app/webpack/bootstrap:120:0)
System.err:     at ../node_modules/ws/index.js(file: node_modules/ws/index.js:3:18)
System.err:     at __webpack_require__(file: app/webpack/bootstrap:750:0)
System.err:     at fn(file: app/webpack/bootstrap:120:0)
System.err:     at ../node_modules/subscriptions-transport-ws/dist/server.js(file: app/src/server.ts:1:0)
System.err:     at __webpack_require__(file: app/webpack/bootstrap:750:0)
System.err:     at fn(file: app/webpack/bootstrap:120:0)
System.err:     at ../node_modules/subscriptions-transport-ws/dist/index.js(file: app/src/index.ts:2:0)
System.err:     at __webpack_require__(file: app/webpack/bootstrap:750:0)
System.err:     at fn(file: app/webpack/bootstrap:120:0)
System.err:     at ../node_modules/apollo-link-ws/lib/webSocketLink.js(file:///data/data/org.nativescript.apollotest/files/app/vendor.js:54361:84)
System.err:     at __webpack_require__(file: app/webpack/bootstrap:750:0)
System.err:     at fn(file: app/webpack/bootstrap:120:0)
System.err:     at ../node_modules/apollo-link-ws/lib/index.js(file: app/src/index.ts:1:0)
System.err:     at __webpack_require__(file: app/webpack/bootstrap:750:0)
System.err:     at fn(file: app/webpack/bootstrap:120:0)
System.err:     at ./apolloProvider.js(file: app/apolloProvider.js:1:0)
System.err:     at __webpack_require__(file: app/webpack/bootstrap:750:0)
System.err:     at fn(file: app/webpack/bootstrap:120:0)
System.err:     at (file: app/app.js:1:0)
System.err:     at ./app.js(file:///data/data/org.nativescript.apollotest/files/app/bundle.js:335:30)
System.err:     at __webpack_require__(file: app/webpack/bootstrap:750:0)
System.err:     at checkDeferredModules(file: app/webpack/bootstrap:43:0)
System.err:     at webpackJsonpCallback(file: app/webpack/bootstrap:30:0)
System.err:     at (file:///data/data/org.nativescript.apollotest/files/app/bundle.js:2:57)
System.err:     at require(:1:266)
System.err: 
System.err: 
System.err: TypeError: Cannot read property 'slice' of undefined
System.err:     at android.app.ActivityThread.handleBindApplication(ActivityThread.java:5876)
System.err:     at android.app.ActivityThread.access$1100(ActivityThread.java:199)
System.err:     at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1650)
System.err:     at android.os.Handler.dispatchMessage(Handler.java:106)
System.err:     at android.os.Looper.loop(Looper.java:193)
System.err:     at android.app.ActivityThread.main(ActivityThread.java:6669)
System.err:     at java.lang.reflect.Method.invoke(Native Method)
System.err:     at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:493)
System.err:     at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:858)
System.err: Caused by: com.tns.NativeScriptException: Error calling module function 
System.err: TypeError: Cannot read property 'slice' of undefined
System.err: File: (file: node_modules/readable-stream/lib/_stream_writable.js:57:80)

Git-Repository with a working http version of the code based on Nativescript-vue graphql backend?. Uncomment the imports in apolloProvider.js to replicate the error and run with tns run android --bundle: https://github.com/RoyalSWiSH/apollosubscriptions

来源：https://stackoverflow.com/questions/62357603/error-cannot-read-property-slice-of-undefined-when-importing-apollo-link-ws

标签
Vue.js
websocket
graphql
nativescript
apollo
易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!