'fromUrl' was not found in '.'

[bufke]

Hello, I tried this out in a NativeScript 7 + Angular project. However on build I get:

WARNING in ../node_modules/@sergeymell/nativescript-svg/common.js 107:31-58
"export 'fromNativeSource' (imported as 'definition') was not found in '.'
 @ ../node_modules/@sergeymell/nativescript-svg/index.js
 @ ../node_modules/@sergeymell/nativescript-svg/__ivy_ngcc__/angular/fesm2015/nativescript-nativescript-svg-angular.js
 @ ./app/app.module.ts
 @ ./main.tns.ts

WARNING in ../node_modules/@sergeymell/nativescript-svg/common.js 91:16-34
"export 'fromUrl' (imported as 'definition') was not found in '.'
 @ ../node_modules/@sergeymell/nativescript-svg/index.js
 @ ../node_modules/@sergeymell/nativescript-svg/__ivy_ngcc__/angular/fesm2015/nativescript-nativescript-svg-angular.js
 @ ./app/app.module.ts
 @ ./main.tns.ts

Then at runtime

JS: ERROR TypeError: ___WEBPACK_IMPORTED_MODULE_3__.fromUrl is not a function

This line looks responsible. Not sure what the purpose of this line is.

[SergeyMell]

Such warnings really appear during the building process by they do not affect anything. Regarding error - I faced it a couple of times. Just rerun npm i for your project (sometime you should remove the package from node_modules folder) and it should work as expected.

[SergeyMell]

Can I see some of your project example? Because I successfully use this plugin in my {N}7 project

[bufke]

I tried a bit more and found that I needed to change my src assets file to use ~ instead of a relative url. This could easily be related to NativeScript 7 and not this project.

I still get those warnings though. Not sure if you intend to fix them, but it's reproducible from here https://gitlab.com/burke-software/simple-fan-control/-/merge_requests/5 with just yarn start and tns run android

[SergeyMell]

Sure, assets files should be served starting with ~ as this path is declared in tsconfig.json and refers to app/* I know about the warning but as long as they do not affect the plugin work and do not break anything it's not the task of the first priority

[SergeyMell]

So as I understand besides the warning the plugin works correctly?

[bufke]

I would still consider the warnings a bug. Goodness knows NativeScript projects are hard to maintain and those warnings can easily trip people (like me) up going down the wrong rabbit hole.

But yes this project is working for me thank you! I understand time is limited.

[SergeyMell]

Thank you for confirming. I'll try to fix the working during the next couple of days.

[SmailHammour]

@SergeyMell Any news on this?

[SergeyMell]

I didn't fix the warnings yet. However, they do not break the workflow and are not related to the current issue. You'll get JS: ERROR TypeError: ___WEBPACK_IMPORTED_MODULE_3__.fromUrl is not a function error in case your path to svg file is not correct.

@SmailHammour, what is your problem and can you share with me some example?

[sebj54]

I tried to update my app to NS7 today and I was using @jnorkus/nativescript-svg before.

My code worked with NS6 but now, some of my components stopped working.

To me, those warnings are a problem because I can't display any SVG in my app now (paths are correct and so is webpack.config.js) and I also need to use fromData to load a SVG from a string (some colors are replaced dynamically in the SVG markup).

It seems that your module does not export anything except ImageSourceSVG with only one method: loadFromResource. All other methods do not appear, whether as a named export or as a method of ImageSourceSVG.

Here are the exports I used, none is working (fromData is always missing):

import { fromData } from '@sergeymell/nativescript-svg' // this one is the original import I used with NS6, fromData → undefined
import { ImageSourceSVG } from '@sergeymell/nativescript-svg' // ImageSourceSVG.fromData → undefined
import * as NSSvg from '@sergeymell/nativescript-svg' // NSSvg.fromData → undefined
import NSSvg from '@sergeymell/nativescript-svg' // NSSvg → undefined

I think something is pruning the ImageSourceSVG class.

And of course, I have the same warnings as the others (+ one for fromData):

WARNING in ./components/SvgColored.vue?vue&type=script&lang=js& (../node_modules/babel-loader/lib!../node_modules/vue-loader/lib??vue-loader-options!./components/SvgColored.vue?vue&type=script&lang=js&) 6:64-72
"export 'fromData' was not found in '@sergeymell/nativescript-svg'
 @ ./components/SvgColored.vue?vue&type=script&lang=js&
 @ ./components/SvgColored.vue
 @ ./main.js

WARNING in ../node_modules/@sergeymell/nativescript-svg/common.js 111:25-52
"export 'fromNativeSource' (imported as 'definition') was not found in '.'
 @ ../node_modules/@sergeymell/nativescript-svg/index.js
 @ ./main.js

WARNING in ../node_modules/@sergeymell/nativescript-svg/common.js 97:8-26
"export 'fromUrl' (imported as 'definition') was not found in '.'
 @ ../node_modules/@sergeymell/nativescript-svg/index.js
 @ ./main.js

[SergeyMell]

Thank you for the explanation. I'm using this plugin in my live projects and it works correctly. But I'll take a look at your case with loadFromResource function and other to be sure. If you have some small reproducible example that I could use it would help a lot.

[sebj54]

Yes of course!

Here is a repository I just created: https://github.com/sebj54/ns-demo-svg. It contains a demo app with only your SVG plugin + my custom SvgColored component. I use it in the Home component.

Basically, my component replace a color in the SVG markup (loaded as a string with Webpack's raw-loader). To simplify the bugfix, I didn't use a color in my sample app, just loading the svg with raw-loader and try to display it with the fromData method.

You can check my last commit which adds everything about SVG in the template app.

When running the app, you should see an error log directly with this error:

System.err: An uncaught Exception occurred on "main" thread.
System.err: Unable to start activity ComponentInfo{org.nativescript.nsdemosvg/com.tns.NativeScriptActivity}: com.tns.NativeScriptException: Calling js method onCreate failed
System.err: TypeError: Object(...) is not a function
System.err:
System.err: StackTrace:
System.err: java.lang.RuntimeException: Unable to start activity ComponentInfo{org.nativescript.nsdemosvg/com.tns.NativeScriptActivity}: com.tns.NativeScriptException: Calling js method onCreate failed
System.err: TypeError: Object(...) is not a function
System.err:     at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:3270)
System.err:     at android.app.ActivityThread.handleLaunchActivity(ActivityThread.java:3409)
System.err:     at android.app.servertransaction.LaunchActivityItem.execute(LaunchActivityItem.java:83)
System.err:     at android.app.servertransaction.TransactionExecutor.executeCallbacks(TransactionExecutor.java:135)
System.err:     at android.app.servertransaction.TransactionExecutor.execute(TransactionExecutor.java:95)
System.err:     at android.app.ActivityThread$H.handleMessage(ActivityThread.java:2016)
System.err:     at android.os.Handler.dispatchMessage(Handler.java:107)
System.err:     at android.os.Looper.loop(Looper.java:214)
System.err:     at android.app.ActivityThread.main(ActivityThread.java:7356)
System.err:     at java.lang.reflect.Method.invoke(Native Method)
System.err:     at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:491)
System.err:     at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:940)
System.err: Caused by: com.tns.NativeScriptException: Calling js method onCreate failed
System.err: TypeError: Object(...) is not a function
System.err:     at com.tns.Runtime.callJSMethodNative(Native Method)
System.err:     at com.tns.Runtime.dispatchCallJSMethodNative(Runtime.java:1302)
System.err:     at com.tns.Runtime.callJSMethodImpl(Runtime.java:1188)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:1175)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:1153)
System.err:     at com.tns.Runtime.callJSMethod(Runtime.java:1149)
System.err:     at com.tns.NativeScriptActivity.onCreate(NativeScriptActivity.java:29)
System.err:     at android.app.Activity.performCreate(Activity.java:7824)
System.err:     at android.app.Activity.performCreate(Activity.java:7813)
System.err:     at android.app.Instrumentation.callActivityOnCreate(Instrumentation.java:1306)
System.err:     at android.app.ActivityThread.performLaunchActivity(ActivityThread.java:3245)
System.err:     ... 11 more

To remove the error, simply return null in instead of fromData(svg) in SvgColored.vue (https://github.com/sebj54/ns-demo-svg/blob/a6f7ad169800d8d3946057d80e114798e1a4bceb/app/components/SvgColored.vue#L38).

Feel free to tell me if you need anything to help resolve this problem, I'm available!

[SergeyMell]

@sebj54, thank you for the demo. It helped a lot to find one issue in my plugin, and the second one - in the plugin which was used as a basis. For now, the issue is fixed in version 1.0.5 so I think I can close it. However, feel free to reopen it or create a new one if the plugin doesn't work as you expected

[sebj54]

@SergeyMell a lot for the quick fix! I will test that tomorrow and let you know :+1:

[sebj54]

@SergeyMell It now works as intended with fromData and warnings are gone too! Thank you again 👏

[SergeyMell]

Great to hear! Thank you for the demo. It really helped