The behaviour of ccall() together with emscripten's dead code elimination and JS minification may be a bit confusing, and (I think) the default behaviour also has changed a couple of times.
Basically, what (probably) happens is that the ccall name gets renamed to something else by emscripten's minification pass (for instance from Module.ccall() to Module.a()). The minification tool will then also change all calls to ccall() from Module.ccal() to Module.a(), BUT it can do this only in the source code it can "see" during the linking stage. If you try to call Module.ccall() from a .html or .js file that's not part of the build process it fails with the 'undefined' error you're seeing, because there isn't a Module.ccall() function anymore, only a minimized version called Module.a() (or similar). That's at least my theory of what's happening, and what I've seen in my own code. The emscripten documentation mentions this at the end of the second blue "NOTE box" here: https://emscripten.org/docs/porting/connecting_cpp_and_javascript/Interacting-with-code.html#calling-compiled-c-functions-from-javascript-using-ccall-cwrap quote: ~~~ The compiler will remove code it does not see is used, to improve code size. If you use ccall in a place it sees, like code in a --pre-js or --post-js, it will just work. If you use it in a place the compiler didn’t see, like another script tag on the HTML or in the JS console like we did in this tutorial, then because of optimizations and minification you should export ccall from the runtime, using EXTRA_EXPORTED_RUNTIME_METHODS, for example using -s 'EXTRA_EXPORTED_RUNTIME_METHODS=["ccall", "cwrap"]', and call it on Module (which contains everything exported, in a safe way that is not influenced by minification or optimizations). ~~~ On Saturday, 28 December 2019 11:07:32 UTC+1, Marco Ippolito wrote: > > I’m trying to transpose to vue.js this html page which works fine: > > <!DOCTYPE html> > <html> > <head> > <meta charset="utf-8"/> > </head> > <body> > <input type="button" value="Add" onclick="callAdd()" /> > > <script> > function callAdd() { > const result = Module.ccall('Add', > 'number', > ['number', 'number'], > [1, 2]); > console.log(`Result: ${result}`); > } > </script> > <script src="js_plumbing.js"></script> > </body> > </html> > > > According to the emscripten documentation: > https://emscripten.org/docs/porting/connecting_cpp_and_javascript/Interacting-with-code.html#calling-compiled-c-functions-from-javascript-using-ccall-cwrap > > we can use ccall and cwrap functions > > > This is the Result.vue file: > > > <template> > <div> > <p button @click="callAdd">Add!</p> > <p>Result: {{ result }}</p> > </div> > </template> > > <script> > import * as js_plumbing from './js_plumbing' > export default { > data () { > return { > result: null > } > }, > methods: { > callAdd() { > const result = js_plumbing.Module.ccall('Add', > 'number', > ['number', 'number'], > [1, 2]); > console.log('Result: ${result}'); > console.log(result); > } > } > } > </script> > > > But when executing npm run dev > > > npm run dev > > > [email protected] dev > /home/marco/cpp/WebAssemblyinAction/Appendix_B/B.1_ccall/startingV > > cross-env NODE_ENV=development webpack-dev-server --open --hot > > > I get this error: Cannot read property 'ccall' of undefined" > > > How to solve it? > > Looking forward to your kind help. > > Marco > -- You received this message because you are subscribed to the Google Groups "emscripten-discuss" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/emscripten-discuss/71327de2-b015-46b4-b554-2bcd215b2f12%40googlegroups.com.
