nativescript-vue/nativescript-vue-externals

Importing Modules problem

rigor789 opened this issue · 15 comments

rigor789 commented

From @MisterBrownRSA on March 22, 2018 6:52

Hey,

I have come to a conclusion following the conversation we had on Slack.

Problem:
TypeError: Could not load view for: radradialgauge. Error: com.tns.NativeScriptException: Failed to find module: "nativescript-ui-gauge\ui-gauge.common", relative to: app/tns_modules/

I found that the path.sep gives "\", which isn't working on Windows, but does work on iOS.

I tried overriding the path variable, but that doesn't seem to cut it.
So currently I need to update nativescript-vue-externals/index.js.

const path = require('path');

module.exports = (context, request, callback) => {

  if (context.indexOf('tns-core-modules') !== -1
    || context.indexOf('nativescript-') !== -1
    || /^(tns-core-modules)/i.test(request)
    || /^(ui|application)/i.test(request)) {

    // Support plugins requiring sibling files by rewriting './' into 'context/'
    if (request.indexOf('./') === 0) {
      request = path.join(path.basename(context), request.substring(2));
    }

    if (request.indexOf('nativescript-ui-sidedrawer') > -1) {
        request = "nativescript-ui-sidedrawer/ui-sidedrawer.common";
    }

    if (request.indexOf('nativescript-ui-gauge') > -1) {
        request = "nativescript-ui-gauge/ui-gauge.common";
    }

    return callback(null, 'commonjs ' + request);
  }

  callback();
};

I think the best would be to update the path separator for windows in the config somewhere, but I don't know where to look.

Copied from original issue: nativescript-vue/nativescript-vue#151

rigor789 commented

Leaving this here as well as on slack:

path.separator will be specific to the platform. This is a node built-in module, and will return / on unix systems and \ on windows systems.

The issue is not with the separator, rather with the way we are checking request.indexOf('./') which works fine on unix systems, but not on windows systems.

  • 👍1
fabledfoe commented

Based on my experience in trying to get this to run on Windows after a successful Mac setup, the path separator is indeed the cause. To fix this on our Windows machines, I had to add request = request.replace('\\','/'); after the path.join. This should be a universal fix as the linux/mac paths won't contain those characters and thus will be unaffected.

  • 👍2
ciw1973 commented

Adding the line @fabledfoe suggests works fine when the project is first deployed, however things will once again fail when changes are made and the Webpack watch rebuilds and redeploys to your device/emulator.

As it stands, this template really isn't much use when running on Windows, and the instructions provided for using plug-ins in the documentation don't work for Windows.

TheElectricCo commented

As it stands, this template really isn't much use when running on Windows, and the instructions provided for using plug-ins in the documentation don't work for Windows.

Correct, had to learn this the hard way :) shame on me to not look sooner at the issueboard.

rigor789 commented

Just released nativescript-vue-externals@0.2.0 which should fix this issue. Please update, and let me know if it does for you.

bluelemonade commented

hello, i have nativescript-vue-extenral@0.2.0 and got
Error: com.tns.NativeScriptException: Failed to find module: "nativescript-ui-gauge", relative to: app/tns_modules/

regards

rigor789 commented

@bluelemonade is nativescript-ui-gauge installed? Is this with the vue-cli template? Have you run npm run clean after installing it? Is nativescript-ui-gauge in template/package.json?

bluelemonade commented

hi, tanks for your immediate answer...

is nativescript-ui-gauge installed?
yes, it's in node_module

Is this with the vue-cli template?
yes

Have you run npm run clean after installing it?
no, I'll give it a try.

Is nativescript-ui-gauge in template/package.json?
yes, under dependencies: "nativescript-ui-gauge": "^3.6.0",

on the nativescript forum I found a information that I should put

"tns-ios": {
      "version": "4.0.0"
    },
    "tns-android": {
      "version": "4.0.1"
    }

into the package.json.

and here's what I get:

Project successfully created.
Preparing project...
Successfully prepared plugin nativescript-bluetooth for android.
Successfully prepared plugin nativescript-theme-core for android.
Successfully prepared plugin nativescript-ui-calendar for android.
Successfully prepared plugin nativescript-ui-gauge for android.
Successfully prepared plugin nativescript-vue for android.
Successfully prepared plugin tns-core-modules for android.
Successfully prepared plugin nativescript-ui-core for android.
Successfully prepared plugin tns-core-modules-widgets for android.
Built aar for nativescript-bluetooth
Project successfully prepared (Android)
Building project...
Gradle build...
+ setting applicationId
+ applying user-defined configuration from E:_projekte\MOBILE_INSTRUMENTS\nativeVueJsTest\vue-cli-test-app\dist\app\App_Resources\Android\app.gradle
+ adding nativescript runtime package dependency: nativescript-optimized-with-inspector
+ adding aar plugin dependency: E:_projekte\MOBILE_INSTRUMENTS\nativeVueJsTest\vue-cli-test-app\dist\node_modules\nativescript-bluetooth\platforms\android\nativescript_bluetooth.aar
+ adding aar plugin dependency: E:_projekte\MOBILE_INSTRUMENTS\nativeVueJsTest\vue-cli-test-app\dist\node_modules\nativescript-ui-calendar\platforms\android\TNSCalendar-release.aar
+ adding aar plugin dependency: E:_projekte\MOBILE_INSTRUMENTS\nativeVueJsTest\vue-cli-test-app\dist\node_modules\nativescript-ui-gauge\platforms\android\TNSGauge-release.aar
+ adding aar plugin dependency: E:_projekte\MOBILE_INSTRUMENTS\nativeVueJsTest\vue-cli-test-app\dist\node_modules\nativescript-ui-core\platforms\android\TNSCore-release.aar
+ adding aar plugin dependency: E:_projekte\MOBILE_INSTRUMENTS\nativeVueJsTest\vue-cli-test-app\dist\node_modules\tns-core-modules-widgets\platforms\android\widgets-release.aar
Project successfully built.
Installing...
Successfully installed on device with identifier '6PQ0217824003131'.
Successfully transferred all files.
Refreshing application...
Successfully synced application de.bluelemon.firstvuensapp on device 6PQ0217824003131.
Skipping prepare.
ActivityManager: Start proc 3522:de.bluelemon.firstvuensapp/u0a229 for activity de.bluelemon.firstvuensapp/com.tns.NativeScriptActivity
ActivityManager: startProcess: name=de.bluelemon.firstvuensapp app=ProcessRecord{e024670 3522:de.bluelemon.firstvuensapp/u0a229} knownToBeDead=true thread=null pid=3522
ActivityManager: ActivityManagerService,attachApplication,callingPid = 3522
JS: ''{NSVue (Vue: 2.5.13 | NSVue: 1.3.1)} -> TagName(e(comment))''
JS: ''{NSVue (Vue: 2.5.13 | NSVue: 1.3.1)} -> ParentNode(e(comment))''
JS: ''{NSVue (Vue: 2.5.13 | NSVue: 1.3.1)} -> NextSibling(e(comment))''
JS: ''{NSVue (Vue: 2.5.13 | NSVue: 1.3.1)} -> CreateComment()''
JS: ''{NSVue (Vue: 2.5.13 | NSVue: 1.3.1)} -> TagName(e(comment))''
JS: ''{NSVue (Vue: 2.5.13 | NSVue: 1.3.1)} -> ParentNode(e(comment))''
JS: ''{NSVue (Vue: 2.5.13 | NSVue: 1.3.1)} -> NextSibling(e(comment))''
JS: ''{NSVue (Vue: 2.5.13 | NSVue: 1.3.1)} -> CreateElement(Page)''
JS: ''{NSVue (Vue: 2.5.13 | NSVue: 1.3.1)} -> CreateElement(native-action-bar)''
JS: ''{NSVue (Vue: 2.5.13 | NSVue: 1.3.1)} -> AppendChild(e(page), e(nativeactionbar))''
JS: ''{NSVue (Vue: 2.5.13 | NSVue: 1.3.1)} -> CreateElement(StackLayout)''
JS: [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
JS:
JS: (found in )
JS: ''{NSVue (Vue: 2.5.13 | NSVue: 1.3.1)} -> CreateElement(RadRadialGauge)''
06-08 17:56:35.164 3522 3522 E AndroidRuntime: at com.tns.Runtime.callJSMethodNative(Native Method)
06-08 17:56:35.164 3522 3522 E AndroidRuntime: at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1101)
06-08 17:56:35.164 3522 3522 E AndroidRuntime: at com.tns.Runtime.callJSMethodImpl(Runtime.java:983)
06-08 17:56:35.164 3522 3522 E AndroidRuntime: at com.tns.Runtime.callJSMethod(Runtime.java:970)
06-08 17:56:35.164 3522 3522 E AndroidRuntime: at com.tns.Runtime.callJSMethod(Runtime.java:954)
06-08 17:56:35.164 3522 3522 E AndroidRuntime: at com.tns.Runtime.callJSMethod(Runtime.java:946)
System.err: java.lang.RuntimeException: Unable to start activity ComponentInfo{de.bluelemon.firstvuensapp/com.tns.NativeScriptActivity}: com.tns.NativeScriptException:
System.err: Calling js method onCreate failed
System.err:
System.err: Error: A Frame must be used to navigate to a Page.
System.err: File: "file:///data/data/de.bluelemon.firstvuensapp/files/app/tns_modules/tns-core-modules/ui/frame/frame.js, line: 605, column: 16
System.err:
System.err: StackTrace:
System.err: Frame: function:'ActivityCallbacksImplementation.onCreate', file:'file:///data/data/de.bluelemon.firstvuensapp/files/app/tns_modules/tns-core-modules/ui/frame/frame.js', line: 605, column: 23
System.err: Frame: function:'NativeScriptActivity.onCreate', file:'file:///data/data/de.bluelemon.firstvuensapp/files/app/tns_modules/tns-core-modules/ui/frame/activity.js', line: 20, column: 25
System.err:
System.err: at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:3194)
System.err: at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:3302)
System.err: at android.app.ActivityThread.-wrap12(Unknown Source:0)
System.err: at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1891)
System.err: at android.os.Handler.dispatchMessage(Handler.java:108)
System.err: at android.os.Looper.loop(Looper.java:166)
System.err: at android.app.ActivityThread.main(ActivityThread.java:7425)
System.err: at java.lang.reflect.Method.invoke(Native Method)
System.err: at com.android.internal.os.Zygote$MethodAndArgsCaller.run(Zygote.java:245)
System.err: at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:921)
System.err: Caused by: com.tns.NativeScriptException:
System.err: Calling js method onCreate failed
System.err:
System.err: Error: A Frame must be used to navigate to a Page.
System.err: File: "file:///data/data/de.bluelemon.firstvuensapp/files/app/tns_modules/tns-core-modules/ui/frame/frame.js, line: 605, column: 16
System.err:
System.err: StackTrace:
System.err: Frame: function:'ActivityCallbacksImplementation.onCreate', file:'file:///data/data/de.bluelemon.firstvuensapp/files/app/tns_modules/tns-core-modules/ui/frame/frame.js', line: 605, column: 23
System.err: Frame: function:'NativeScriptActivity.onCreate', file:'file:///data/data/de.bluelemon.firstvuensapp/files/app/tns_modules/tns-core-modules/ui/frame/activity.js', line: 20, column: 25
System.err:
System.err: at com.tns.Runtime.callJSMethodNative(Native Method)
System.err: at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1101)
System.err: at com.tns.Runtime.callJSMethodImpl(Runtime.java:983)
System.err: at com.tns.Runtime.callJSMethod(Runtime.java:970)
System.err: at com.tns.Runtime.callJSMethod(Runtime.java:954)
System.err: at com.tns.Runtime.callJSMethod(Runtime.java:946)
System.err: at com.tns.NativeScriptActivity.onCreate(NativeScriptActivity.java:18)
System.err: at android.app.Activity.performCreate(Activity.java:7372)
System.err: at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1218)
System.err: at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:3147)
System.err: ... 9 more
ActivityManager: Process de.bluelemon.firstvuensapp (pid 3522) has died: fore TOP
ActivityManager: cleanUpApplicationRecord app: ProcessRecord{e024670 3522:de.bluelemon.firstvuensapp/u0a229}, app.bad: false, restarting: false, allowRestart: true
Successfully transferred app.gradle.
Refreshing application...
Successfully synced application de.bluelemon.firstvuensapp on device 6PQ0217824003131.
ActivityManager: Start proc 3702:de.bluelemon.firstvuensapp/u0a229 for activity de.bluelemon.firstvuensapp/com.tns.NativeScriptActivity
ActivityManager: startProcess: name=de.bluelemon.firstvuensapp app=ProcessRecord{c63c413 3702:de.bluelemon.firstvuensapp/u0a229} knownToBeDead=true thread=null pid=3702
ActivityManager: ActivityManagerService,attachApplication,callingPid = 3702
JS: ''{NSVue (Vue: 2.5.13 | NSVue: 1.3.1)} -> TagName(e(comment))''
JS: ''{NSVue (Vue: 2.5.13 | NSVue: 1.3.1)} -> ParentNode(e(comment))''
JS: ''{NSVue (Vue: 2.5.13 | NSVue: 1.3.1)} -> NextSibling(e(comment))''
JS: ''{NSVue (Vue: 2.5.13 | NSVue: 1.3.1)} -> CreateComment()''
JS: ''{NSVue (Vue: 2.5.13 | NSVue: 1.3.1)} -> TagName(e(comment))''
JS: ''{NSVue (Vue: 2.5.13 | NSVue: 1.3.1)} -> ParentNode(e(comment))''
JS: ''{NSVue (Vue: 2.5.13 | NSVue: 1.3.1)} -> NextSibling(e(comment))''
JS: ''{NSVue (Vue: 2.5.13 | NSVue: 1.3.1)} -> CreateElement(Page)''
JS: ''{NSVue (Vue: 2.5.13 | NSVue: 1.3.1)} -> CreateElement(native-action-bar)''
JS: ''{NSVue (Vue: 2.5.13 | NSVue: 1.3.1)} -> AppendChild(e(page), e(nativeactionbar))''
JS: ''{NSVue (Vue: 2.5.13 | NSVue: 1.3.1)} -> CreateElement(StackLayout)''
JS: [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
JS:
JS: (found in )
JS: ''{NSVue (Vue: 2.5.13 | NSVue: 1.3.1)} -> CreateElement(RadRadialGauge)''
06-08 17:56:38.197 3702 3702 E AndroidRuntime: at com.tns.Runtime.callJSMethodNative(Native Method)
06-08 17:56:38.197 3702 3702 E AndroidRuntime: at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1101)
06-08 17:56:38.197 3702 3702 E AndroidRuntime: at com.tns.Runtime.callJSMethodImpl(Runtime.java:983)
06-08 17:56:38.197 3702 3702 E AndroidRuntime: at com.tns.Runtime.callJSMethod(Runtime.java:970)
06-08 17:56:38.197 3702 3702 E AndroidRuntime: at com.tns.Runtime.callJSMethod(Runtime.java:954)
06-08 17:56:38.197 3702 3702 E AndroidRuntime: at com.tns.Runtime.callJSMethod(Runtime.java:946)
System.err: java.lang.RuntimeException: Unable to start activity ComponentInfo{de.bluelemon.firstvuensapp/com.tns.NativeScriptActivity}: com.tns.NativeScriptException:
System.err: Calling js method onCreate failed
System.err:
System.err: Error: A Frame must be used to navigate to a Page.
System.err: File: "file:///data/data/de.bluelemon.firstvuensapp/files/app/tns_modules/tns-core-modules/ui/frame/frame.js, line: 605, column: 16
System.err:
System.err: StackTrace:
System.err: Frame: function:'ActivityCallbacksImplementation.onCreate', file:'file:///data/data/de.bluelemon.firstvuensapp/files/app/tns_modules/tns-core-modules/ui/frame/frame.js', line: 605, column: 23
System.err: Frame: function:'NativeScriptActivity.onCreate', file:'file:///data/data/de.bluelemon.firstvuensapp/files/app/tns_modules/tns-core-modules/ui/frame/activity.js', line: 20, column: 25
System.err:
System.err: at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:3194)
System.err: at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:3302)
System.err: at android.app.ActivityThread.-wrap12(Unknown Source:0)
System.err: at android.app.ActivityThread$H.handleMessage(ActivityThread.java:1891)
System.err: at android.os.Handler.dispatchMessage(Handler.java:108)
System.err: at android.os.Looper.loop(Looper.java:166)
System.err: at android.app.ActivityThread.main(ActivityThread.java:7425)
System.err: at java.lang.reflect.Method.invoke(Native Method)
System.err: at com.android.internal.os.Zygote$MethodAndArgsCaller.run(Zygote.java:245)
System.err: at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:921)
System.err: Caused by: com.tns.NativeScriptException:
System.err: Calling js method onCreate failed
System.err:
System.err: Error: A Frame must be used to navigate to a Page.
System.err: File: "file:///data/data/de.bluelemon.firstvuensapp/files/app/tns_modules/tns-core-modules/ui/frame/frame.js, line: 605, column: 16
System.err:
System.err: StackTrace:
System.err: Frame: function:'ActivityCallbacksImplementation.onCreate', file:'file:///data/data/de.bluelemon.firstvuensapp/files/app/tns_modules/tns-core-modules/ui/frame/frame.js', line: 605, column: 23
System.err: Frame: function:'NativeScriptActivity.onCreate', file:'file:///data/data/de.bluelemon.firstvuensapp/files/app/tns_modules/tns-core-modules/ui/frame/activity.js', line: 20, column: 25
System.err:
System.err: at com.tns.Runtime.callJSMethodNative(Native Method)
System.err: at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1101)
System.err: at com.tns.Runtime.callJSMethodImpl(Runtime.java:983)
System.err: at com.tns.Runtime.callJSMethod(Runtime.java:970)
System.err: at com.tns.Runtime.callJSMethod(Runtime.java:954)
System.err: at com.tns.Runtime.callJSMethod(Runtime.java:946)
System.err: at com.tns.NativeScriptActivity.onCreate(NativeScriptActivity.java:18)
System.err: at android.app.Activity.performCreate(Activity.java:7372)
System.err: at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1218)
System.err: at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:3147)
System.err: ... 9 more
ActivityManager: Process de.bluelemon.firstvuensapp (pid 3702) has died: fore TOP
ActivityManager: cleanUpApplicationRecord app: ProcessRecord{c63c413 3702:de.bluelemon.firstvuensapp/u0a229}, app.bad: false, restarting: false, allowRestart: true

bluelemonade commented

oh,

in the tsconfig.json I found, but its from the bluetooth plugin.
{
"resource": "/e:/_projekte/MOBILE_INSTRUMENTS/nativeVueJsTest/vue-cli-test-app/tsconfig.json",
"owner": "typescript",
"code": "undefined",
"severity": 8,
"message": "In der Konfigurationsdatei "e:/_projekte/MOBILE_INSTRUMENTS/nativeVueJsTest/vue-cli-test-app/tsconfig.json" wurden keine Eingaben gefunden. Als include-Pfade wurden "["**/*"]", als exclude-Pfade wurden "["node_modules","platforms"]" angegeben.",
"source": "ts",
"startLineNumber": 1,
"startColumn": 1,
"endLineNumber": 1,
"endColumn": 2
}

rigor789 commented 
JS: [Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option.
JS:
JS: (found in )
JS: ''{NSVue (Vue: 2.5.13 | NSVue: 1.3.1)} -> CreateElement(RadRadialGauge)''

Did you register the elements?

The easiest way would be to copy the code from this playground https://play.nativescript.org/?template=play-vue&id=n27okM (nativescript-vue/gauge-directives)

rigor789 commented

Or, you can just require('nativescript-ui-gauge/vue'); at the top of your entry file (main.js) and it should also work

bluelemonade commented

ok, I used the code from the playground and it works great, I done a few nice elements.

now I used the code for the location out of the playground.
var geoLocation = require("nativescript-geolocation");

first I thought I did something wrong in the store, but only the require throws this error.
I did npm install --save nativescript-geolocation

npm run watch:android thows this error:

Successfully synced application de.bluelemon.firstvuensapp on device 6PQ0217824003131.
ActivityManager: Start proc 23159:de.bluelemon.firstvuensapp/u0a236 for activity de.bluelemon.firstvuensapp/com.tns.NativeScriptActivity
ActivityManager: startProcess: name=de.bluelemon.firstvuensapp app=ProcessRecord{4540e10 23159:de.bluelemon.firstvuensapp/u0a236} knownToBeDead=true thread=null pid=23159
ActivityManager: ActivityManagerService,attachApplication,callingPid = 23159
System.err: java.lang.RuntimeException: Unable to create application com.tns.NativeScriptApplication: com.tns.NativeScriptException:
System.err:
System.err: Error calling module function
System.err:
System.err: Error: com.tns.NativeScriptException: Failed to find module: "nativescript-geolocation/geolocation.common", relative to: app/tns_modules/
System.err: com.tns.Module.resolvePathHelper(Module.java:146)
System.err: com.tns.Module.resolvePath(Module.java:55)

Abenezer commented

@rigor78 i dont know why but none of native-script ui components (gauge, autocomplete..) are working if i require('nativescript-ui-gauge/vue'). the directive wont get registered. the funny thing is if i just copy the registration code from the ....-vue-directives.js file into main.js or create another js file (in src) and require it, it works perfectly. i can do this all day but i still cant figure out why. (if i wrote console.log(..) in the nativescript-ui-gauge/vue/gauges-vue-directives.js file it is executed and i can see the output but still the vue dont know the components. weird )

rigor789 commented

@Abenezer yeah, I don't know why that would be the case, when I get the time I will go through the pro ui components, and make the /vue imports be Vue plugins, that you can use like Vue.use(require('nativescript-ui-gauge/vue'))

tomvanoosterwyck commented

Is there already a fix for this?

I'm trying to use nativescript-geolocation but I couldn't get it working with the fix mentioned above

I did install npm install nativescript-vue-externals@0.2.0 on the root of my project, I hope this is correct