App failing to resolve module

[merlosy]

Description

I'm using the web-component in a Vue 2 app, served with Webpack 4.
The error appears when trying to serve the app locally.
There seems to be an issue with the way the lib content is exposed, that makes the module bundler crash.

It was working OK with version 1.10.1.

Failed to compile with 1 error 

 error  in ./node_modules/three/examples/jsm/exporters/GLTFExporter.js

Module parse failed: Unexpected token (698:33)
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
|               console.warn( 'THREE.GLTFExporter: Merged metalnessMap and roughnessMap textures.' );
|
>               const metalness = metalnessMap?.image;
|               const roughness = roughnessMap?.image;
|

 @ ./node_modules/@google/model-viewer/lib/features/scene-graph.js 23:0-76 162:37-49
 @ ./node_modules/@google/model-viewer/lib/model-viewer.js
 @ ./node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/babel-loader/lib??ref--14-1!./node_modules/@vue/cli-plugin-typescript/node_modules/ts-loader??ref--14-2!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader/lib??vue-loader-options!./libs/shared/asset-viewer/src/component/webgl-viewer.vue?vue&type=script&lang=ts&
 @ ./libs/shared/asset-viewer/src/component/webgl-viewer.vue?vue&type=script&lang=ts&
 @ ./libs/shared/asset-viewer/src/component/webgl-viewer.vue
 @ ./libs/shared/asset-viewer/src/index.ts
 @ ./apps/demo/src/i18n/lang-en.ts
 @ ./apps/demo/src/service/lang-service.ts
 @ ./apps/demo/src/main.ts
 @ multi (webpack)-dev-server/client?http://10.***.***.***:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./apps/demo/src/main.ts

It might be because of threejs or a misconfiguration on my side? Unfortunately, I don't have any clue for now.

Live Demo

https://glitch.com/edit/#!/model-viewer => template not working for me :/

Version

• model-viewer: v1.11.1 and 1.11.0

Browser Affected

• Chrome, version: 101.0.4951.54
• Edge
• Firefox
• IE
• Safari

OS

• Android
• iOS
• Linux
• MacOS
• Windows

AR

• WebXR
• SceneViewer
• QuickLook

[elalish]

Hmm, perhaps its parser doesn't like the ? JS syntax? Perhaps try the model-viewer.umd.min.js instead? I'm guessing there are some settings in the bundler that would need to be changed otherwise...

[merlosy]

I just tried to import model-viewer.umd.min.js from the dist folder, with "import" and "require", but in both cases it fails to find the file.

Basically, where I'm at:

• installed @google/[email protected], [email protected], [email protected]
• dev-installed @types/[email protected]
• The app is working and component is processing the model file (glb) as expected
• The unit tests with jest keep failing:

Test suite failed to run

    TypeError: Cannot read properties of undefined (reading 'xr')

      159 | import { Material } from '@google/model-viewer/lib/features/scene-graph/material';
      160 | // import { ModelViewerElement } from '@google/model-viewer/lib/model-viewer';
    > 161 | import '@google/model-viewer/dist/model-viewer';
          | ^
      162 |

      at new ARRenderer (../../node_modules/@google/model-viewer/dist/model-viewer.js:54879:28)
      at new Renderer (../../node_modules/@google/model-viewer/dist/model-viewer.js:57008:27)
      at Object.<anonymous> (../../node_modules/@google/model-viewer/dist/model-viewer.js:57328:23)
      at Object.<anonymous> (../../libs/shared/asset-viewer/src/component/webgl-viewer.vue:161:1)        
      at Object.<anonymous> (../../libs/shared/asset-viewer/src/index.ts:3:1)

I'm trying to find the right setup to have it all working :)

Side notes:

• It could be worth adding @types/webxr in the dev dependencies? (Typescript definitions immersive-web/webxr#953).
• I had some issues with jsdom (due to jest) (Implement relList.supports() jsdom/jsdom#2895), so I had to add DOMTokenList.prototype.supports = (token: string) => false; in the test-setup

[elalish]

three and lit are our dependencies, so you shouldn't have to install them separately. PRs welcome if you have thoughts on how to upgrade our npm dependences. We don't test with Jest, so that framework might have some incompatibility.

[merlosy]

I'll definitely have to get back to this (when I'm back from vacation, sorry), ideally with the latest version

[designbyadrian]

I had a project with a version of babel that didn't support optional-chaining (?.). I upgraded to a newer version and this fixed my issue.

If that's not possible, there are babel plugins: https://babeljs.io/docs/en/babel-plugin-proposal-optional-chaining

[karolisgrinkevicius-home24]

Just wondering, should not this (transpiling optional chaining operator) be rather tackled in the library bundling system? I feel like it's rather a bug in the bundling system than issue on the consumer side configuration.

[veronicamontezuma]

Hi, has anyone managed to fix this? I have a Vue 2 project that I'm trying to update mv on, but can't get past 1.10.1... it gives me the same Module parse failed: Unexpected token error