ARnft fails to compile when imported as a npm package (version 0.13.1)

[kalwalt]

If you import 0.13.1 in a create React project (see kalwalt/ARnft-ES6-react#29) and you run yarn start the project fails with this message:

Failed to compile.

./node_modules/@webarkit/ar-nft/dist/ARnft.js 144:24
Module parse failed: Unexpected token (144:24)
File was processed with these loaders:
 * ./node_modules/react-scripts/node_modules/babel-loader/lib/index.js
You may need an additional loader to handle the result of these loaders.
| 
|         class E {
>           canvas_process;
|           context_process;
|           _video;
 

the 0.13.0 is also affected but not previous version 0.12.2

[andreyrd]

Is there a workaround for this? Was the npm package built incorrectly?

[kalwalt]

Hi @andreyrd i solved with this commit (note: i didn't change anything inside ARnft). Read also the stackoverflow article linked in the ARnft-ES6-react issue. If i remember well i deleted the node_modules folder and yarn-lock file, made the changes in package.json ,reinstalled the packages with yarn and then ARnft-ES6-react worked again in dev and build mode. Tell me if this helped you.

[kalwalt]

Anyway @andreyrd this happened after PR where i removed Babel dependencies. Does it is related?
I have also a small project with Vue.js and i had the same issue, i solved differently look at this PR

[andreyrd]

Those don't fix it for me. When I import the unminified version using:
import { ARnft } from '@webarkit/ar-nft/dist/src';

I get a clearer error:

Uncaught Error: Module parse failed: Unexpected token (10:14)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| const { version } = packageJson;
| export default class ARnft {
>     cameraView;
|     appData;
|     width;
    at eval (ARnft.js:1)
    at Object../node_modules/@webarkit/ar-nft/dist/src/ARnft.js (chunk-vendors.js:10)

which leads me to believe I am running into this webpack error:
webpack/webpack#9708

But I can't upgrade to that because they only fixed in version 5, and I'm still on Vue 2 which relies on Webpack 4.

[andreyrd]

I fixed it by adding babel to my project.
https://vue-loader.vuejs.org/guide/pre-processors.html#babel

My webpack rule makes sure that only this module gets processed through babel:

{
  test: /\.js$/,
  loader: 'babel-loader',
  exclude: file => (
    /node_modules\/(?!(@webarkit\/ar-nft)\/).*/.test(file) &&
    !/\.vue\.js/.test(file)
  )
}

[kalwalt]

I fixed it by adding babel to my project. https://vue-loader.vuejs.org/guide/pre-processors.html#babel

My webpack rule makes sure that only this module gets processed through babel:

{
  test: /\.js$/,
  loader: 'babel-loader',
  exclude: file => (
    /node_modules\/(?!(@webarkit\/ar-nft)\/).*/.test(file) &&
    !/\.vue\.js/.test(file)
  )
}

Good to know @andreyrd! i will test on my https://github.com/kalwalt/visualARPoetry
Thanks for reporting this. 🙂

[andreyrd]

Fwiw, while this helped it build, it still doesn't work.

[andreyrd]

Vue CLI has a built in way of adding that rule that is much clearer than writing regex.

Add to vue.config.js:

transpileDependencies: [ '@webarkit/ar-nft' ]

[kalwalt]

Vue CLI has a built in way of adding that rule that is much clearer than writing regex.

Add to vue.config.js:

transpileDependencies: [ '@webarkit/ar-nft' ]

Nice to know! Does it solve the issue?

[andreyrd]

Now I am running into this Issue :) webarkit/ARnft-threejs#8
But instead of a black screen, my video is frozen on the first frame and won't unpause.

[kalwalt]

Now I am running into this Issue :) webarkit/ARnft-threejs#8
But instead of a black screen, my video is frozen on the first frame and won't unpause.

So did you solved? Let's continue into that issue webarkit/ARnft-threejs#8

[andreyrd]

Never mind, turns out I'm an idiot - the video itself I was testing does not actually change. It's a still slide the whole video 🤦

[kalwalt]

Never mind, turns out I'm an idiot - the video itself I was testing does not actually change. It's a still slide the whole video facepalm

Don't worry you are not alone! We make errors and we learn from them. May we close this issue?

[andreyrd]

I think so, yes.

[kalwalt]

I think so, yes.

Before closing It, i will test also in my project to confirm that it is solved.

[kalwalt]

In my case transpileDependencies: [ '@webarkit/ar-nft' ] don't solve the issue. I dont get the ESlint error only if i exclude in vue.config.js, eslint on save lintOnSave: false. I will ask in the Vue forum why happens this and if there is someting that i can change in the code.