Module not found: Error: Can’t resolve ‘fs’

[Marco Ippolito]

I'm encountering errors in importing a javascript file into a vue.js component:

This is the content of /components sub-folder:

    /startingV/src/components$ ls -lah
    total 132K
    drwxr-xr-x 2 marco marco 4,0K dic 26 11:22 .
    drwxr-xr-x 5 marco marco 4,0K dic 26 09:32 ..
    -rw-r--r-- 1 marco marco  441 nov  2  2016 Counter.vue
    -rw-r--r-- 1 marco marco  441 dic 21 15:13 FormValidation.vue
    -rw-r--r-- 1 marco marco 100K dic 26 10:38 js_plumbing.js
    -rw-r--r-- 1 marco marco 9,3K dic 26 10:38 js_plumbing.wasm
    -rw-r--r-- 1 marco marco  473 dic 26 11:14 Result.vue


When compiling:

    Failed to compile.

    ./src/components/js_plumbing.js
    Module not found: Error: Can't resolve 'fs' in '/home/marco/cpp/WebAssemblyinAction
    /Appendix_B/B.1_ccall/startingV/src/components'

this is the Result.vue file:

    template>
        <p button @click="callAdd">Add!</p>
    </template>

    <script>
        import * as js_plumbing from './js_plumbing'
        export default {
          data () {
            return {
              result: null
            }
          },
          methods: {
            callAdd() {
              const result = Module.ccall('js_plumbing.Add',
                  'number',
                  ['number', 'number'],
                  [1, 2]);
              console.log('Result: ${result}');
            }
          }
        }
    </script>


The js_plumbing.js and the js_plumbing.wasm files have been generated through this command : 

    emcc add.c -o js_plumbing.js -s EXTRA_EXPORTED_RUNTIME_METHODS=['ccall','cwrap']

where add.c is:

    #include <stdlib.h>
    #include <emscripten.h>

    // If this is an Emscripten (WebAssembly) build then...
    #ifdef __EMSCRIPTEN__
      #include <emscripten.h>
    #endif

    #ifdef __cplusplus
    extern "C" { // So that the C++ compiler does not rename our function names
    #endif

    EMSCRIPTEN_KEEPALIVE
    int Add(int value1, int value2)
    {
      return (value1 + value2);
    }

    #ifdef __cplusplus
    }
    #endif
 

This is the link I took some info about how to generate the .js and .wasm files:
https://emscripten.org/docs/porting/connecting_cpp_and_javascript/Interacting-with-code.html#interacting-with-code-ccall-cwrap

How to solve it?
Marco

[Marco Ippolito]

I solved the 404 error message by putting the wasm file into a /dist sub-folder in the same folder of index.html file