Nativescript: `Class not found org.nativescript.widgets.image.Worker.OnImageLoadedListener` after upgrade to NS 7

[MrSnoozles]

Environment
Provide version numbers for the following components (information can be retrieved by running tns info in your project folder or by inspecting the package.json of the project):

• CLI: 7.0.10
• Cross-platform modules: 7.0.10
• Android Runtime: 7.0.1
• Plugin(s): (attached below)
• OS: WIN 10 2004

Describe the bug
When trying to run the updated application I get the following error.
Error executing Static Binding Generator: Class not found org.nativescript.widgets.image.Worker.OnImageLoadedListener

Detailed log in platforms/android/build-tools/runSbg.log:
~
java.lang.RuntimeException: Class not found org.nativescript.widgets.image.Worker.OnImageLoadedListener
at org.nativescript.staticbindinggenerator.Generator.getClass(Generator.java:551)
at org.nativescript.staticbindinggenerator.Generator.getInterfacesFromCache(Generator.java:534)
at org.nativescript.staticbindinggenerator.Generator.writeBinding(Generator.java:283)
at org.nativescript.staticbindinggenerator.Generator.generateBinding(Generator.java:171)
at org.nativescript.staticbindinggenerator.Generator.processRows(Generator.java:234)
at org.nativescript.staticbindinggenerator.Generator.generateBindings(Generator.java:121)
at org.nativescript.staticbindinggenerator.Generator.writeBindings(Generator.java:97)
at org.nativescript.staticbindinggenerator.Main.main(Main.java:55)
~

To Reproduce

1. upgrade application and plugins (at least those that are already compatible) to NativeScript 7
2. run the app using ns run android

Expected behavior
Successfully compile the app and push it to the connected phone.

[MrSnoozles]

package.json:

~json
"devDependencies": {
"@babel/core": "7.10.2",
"@babel/preset-env": "7.10.2",
"@nativescript/android": "7.0.1",
"@nativescript/appversion": "^2.0.0",
"@nativescript/camera": "~5.0.0",
"@nativescript/core": "^7.0.11",
"@nativescript/core-widgets": "^7.0.0-rc.0", // this was added because it was mentioned in https://stackoverflow.com/questions/58074008/nativescript-runtime-exception-on-tns-run. It wasn't required originally in NS6
"@nativescript/directions": "~2.0.0",
"@nativescript/firebase": "11.0.0",
"@nativescript/geolocation": "~7.0.0",
"@nativescript/imagepicker": "~1.0.0",
"@nativescript/ios": "~7.0.0",
"@nativescript/iqkeyboardmanager": "~2.0.0",
"@nativescript/localize": "5.0.0",
"@nativescript/webpack": "3.0.0",
"@vue/devtools": "5.3.3",
"apollo-cache-inmemory": "1.6.6",
"apollo-client": "^2.6.10",
"apollo-link": "1.2.14",
"apollo-link-http": "1.5.17",
"babel-loader": "8.1.0",
"graphql": "15.1.0",
"graphql-tag": "2.10.3",
"hashids": "2.2.1",
"lodash": "^4.17.20",
"moment": "2.26.0",
"nativescript-akylas-fonticon": "2.0.7",
"nativescript-bitmap-factory": "^1.8.1",
"nativescript-carousel": "~7.0.1",
"nativescript-clipboard": "~2.0.0",
"nativescript-feedback": "~2.0.0",
"nativescript-google-maps-sdk": "2.9.1",
"nativescript-permissions": "1.3.9",
"nativescript-phone": "2.0.0",
"nativescript-plugin-universal-links": "^1.0.2",
"nativescript-social-share": "^1.6.0",
"nativescript-theme-core": "~1.0.4",
"nativescript-ui-sidedrawer": "~9.0.3",
"nativescript-vue": "2.8.1",
"nativescript-vue-devtools": "1.4.0",
"nativescript-vue-template-compiler": "2.8.1",
"node-sass": "^4.14.1",
"vue-apollo": "^3.0.4",
"vue-loader": "15.9.3",
"vuex": "3.4.0"
},
~

[NathanWalker]

@MrSnoozles remove "@nativescript/core-widgets": "^7.0.0-rc.0", - noone should be using that. We will try to remove that from npm. Then ns clean and try to run again.

[NathanWalker]

Also update this: "@nativescript/webpack": "~3.0.0", to use tilda at least - lot of improvements in patch version there.
Delete your webpack.config.js, then ns clean > npm i and a fresh config will be generated.

[MrSnoozles]

Hi Nathan, thanks a lot. I updated the comment.
I included that package because it was mentioned in https://stackoverflow.com/questions/58074008/nativescript-runtime-exception-on-tns-run

Adding it was part of my troubleshooting already.

[NathanWalker]

Gotcha - definitely remove it - that's an old post from 2019; I added comment about {N} 7 on that post to help clarify.

[MrSnoozles]

I did ns clean and npm i, then ran ns run android again. Unfortunately the error persists.

Could it be related to the Java Version installed? Any other idea why this could happen?

~
openjdk version "1.8.0_192"
OpenJDK Runtime Environment (AdoptOpenJDK)(build 1.8.0_192-b12)
OpenJDK 64-Bit Server VM (AdoptOpenJDK)(build 25.192-b12, mixed mode)
~

[NathanWalker]

The only other thing that seems odd is that your dep's above are all in "devDependencies": { ... that's not correct.

All of these should at least be in "dependencies" section of package - {N} cli relies on dep's vs. devDep's for appropriate packages to be bundled/handled.

"dependencies": {
    "@nativescript/appversion": "^2.0.0",
    "@nativescript/camera": "~5.0.0",
    "@nativescript/core": "^7.0.11",
    "@nativescript/directions": "~2.0.0",
    "@nativescript/firebase": "11.0.0",
    "@nativescript/geolocation": "~7.0.0",
    "@nativescript/imagepicker": "~1.0.0",
    "@nativescript/iqkeyboardmanager": "~2.0.0",
    "@nativescript/localize": "5.0.0",
    "@vue/devtools": "5.3.3",
    "apollo-cache-inmemory": "1.6.6",
    "apollo-client": "^2.6.10",
    "apollo-link": "1.2.14",
    "apollo-link-http": "1.5.17",
    "graphql": "15.1.0",
    "graphql-tag": "2.10.3",
    "hashids": "2.2.1",
    "lodash": "^4.17.20",
    "moment": "2.26.0",
    "nativescript-akylas-fonticon": "2.0.7",
    "nativescript-bitmap-factory": "^1.8.1",
    "nativescript-carousel": "~7.0.1",
    "nativescript-clipboard": "~2.0.0",
    "nativescript-feedback": "~2.0.0",
    "nativescript-google-maps-sdk": "2.9.1",
    "nativescript-permissions": "1.3.9",
    "nativescript-phone": "2.0.0",
    "nativescript-plugin-universal-links": "^1.0.2",
    "nativescript-social-share": "^1.6.0",
    "nativescript-theme-core": "~1.0.4",
    "nativescript-ui-sidedrawer": "~9.0.3",
    "nativescript-vue": "2.8.1",
    "nativescript-vue-devtools": "1.4.0",
    "vue-apollo": "^3.0.4",
    "vuex": "3.4.0"

[MrSnoozles]

Yeaah! Thank you so much. It compiles correctly when these packages are listed in dependencies, instead of devDependencies. ✅ Haven't quite figured out yet when to use which with {N}. ^^

I had another problem after this: Error while trying to start application ... Error is: Invalid Version: null. This was caused by not having a version defined in my package.json. Now it's starting. Thank you so so much. 👍

[NathanWalker]

@MrSnoozles most plugins will always go into 'dependencies' - those that you end up importing and using in your app code. Things like typescript, webpack, runtimes - those are true devDependenices only needed to support development of the app.