Error in zcv.js with Vue projects (TypeError: Cannot read property 'startsWith' of undefined)

Universal AR A-Frame
#1

Hey!

I’m using Vue (via Nuxt) and AFrame in a project together, so far everything is working out well.
(even got some render functions for components going on - everything is super smooth. Very impressed with Zappar)

Up until this point I’ve been using the Zappar library and AFrame via script tags, but it’s a requirement by our client to bundle the application entirely.

I’ve tried to install Zappar into my project from npm and I’ve updated the webpack config to load zcv.wasm with file-loader.

Unfortunately I’m running into “TypeError: Cannot read property ‘startsWith’ of undefined” in zcv.js.
This seems to happen in a fresh Nuxt.js project and even a fresh Vue (2) project, both created via their respective CLIs.

I’m a bit baffled considering I’m able to clone and run the webpack examples on the Zappar GitHub just fine.

Have you seen this error before?
It seems to be the reference to the wasm file from what I can make out in the minified code, but it’s difficult to trace as even when formatted, Chrome’s breakpoints seem to fail in zcv.js.

I’ve uploaded an example Vue.js project to this post.
It has no AFrame scene, but the error is independent of AFrame initialising.

With the Vue CLI installed you can output the webpack config to inspect:
https://cli.vuejs.org/guide/webpack.html#inspecting-the-project-s-webpack-config

zappar-vue.zip (263.9 KB)

Thanks,
Sam

#2

Hi @sam.wray

I have identified the wasm loading issue you’re having and we will be deploying a fix shortly.

As a side note, UAR requires your project to be served over https, so in addition to the webpack config in vue.config.js be sure to add

  devServer: {
    https: true
  },

to ensure you’re able to work with the camera.

I will post an update to this thread once the fix is live :slight_smile:

All the best,
Deim

1 Like
#3

Hi @Deim,

Thanks for the fix, that’s brilliant :grin:

And thanks for the note on https, I’d forgotten to include it in the example but that’s included in my main project.

Looking forward to the update.

Best,
Sam

#4

Hi again @sam.wray

To keep the productivity going, here’s a temporal fix for you (this will need to be applied every time you npm/yarn install):

Locate
node_modules/@zappar/zappar-cv/lib/worker.js

Replace line 15:

let url = location.href.startsWith("blob") ? evt.data.url : require("./zcv.wasm").default;

with:

let url = location.href.startsWith("blob") ? evt.data.url : require("./zcv.wasm");
if (url.default) url = url.default;

Once again, I will update the thread when the relevant patches have been published to NPM/CDN :slight_smile:

All the best,
Deim.

1 Like
#5

Hi @Deim,

Thank you so much.
I’ll apply this later today and hope it works in the larger project.

Best,
Sam

#6

Hi again @Deim,

This fixed my problem - thank you!

For anybody else using Nuxt.js and Zappar, you may need to add this to your nuxt.config.js as the default extension resolution is in the wrong order for Zappar’s wasm file to be processed correctly using file-loader:

build: {
    extend(config) {
         config.module.rules.push({
             test: /zcv\.wasm$/,
             type: 'javascript/auto',
             loader: 'file-loader',
         })

        // add this
        const wasmIndex = config.resolve.extensions.indexOf('.wasm')
        if (wasmIndex > -1) {
            config.resolve.extensions.splice(wasmIndex, 1)
            config.resolve.extensions.push('.wasm')
        }
    }
}
1 Like
#7

If anybody needs a quick patch for their Vue/Nuxt project, you can use https://github.com/ds300/patch-package and there’s a patch attached to this post.

Place the patch in a folder named patches in the root of your project, then follow the setup guide for patch-package.

Cheers.

@zappar zappar-cv 0.3.5.patch.zip (539 Bytes)

1 Like
#8

Hey @sam.wray,

Glad to hear that worked out for you! :+1: