An attempt to use the viewer in a project with a typescript causes an error

[serhii1290]

Description

Hello everyone ! I've tried to use the model-viewer on react TS project but got the error

./node_modules/@google/model-viewer/dist/model-viewer.js 49514:35
Module parse failed: Unexpected token (49514:35)
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.
  | if (metalnessMap === roughnessMap) return metalnessMap;
  | console.warn('THREE.GLTFExporter: Merged metalnessMap and roughnessMap textures.');

const metalness = metalnessMap?.image;

| const roughness = roughnessMap?.image;
| const width = Math.max(metalness?.width || 0, roughness?.width || 0);

Unfortunately I could not find any example where the viewer used with TS

Live Demo

https://glitch.com/edit/#!/model-viewer

Version

• model-viewer: v1.12.0

[elalish]

There are a number of users building MV in a TS environment, but the details tend to vary greatly depending on the framework used (React, Angular, etc). I believe for TS you'll want to import our lib node_modules/@google/model-viewer/lib/, rather than our bundle node_modules/@google/model-viewer/dist/model-viewer.js

If you search our discussions you'll find others who have left pointers.

[serhii1290]

Hello! Thanks for answer . I find some example #1502
but still struggling the same error .

[serhii1290]

@elalish I've done some workaround and noticed the error appears from v.1.11.0 . Version 1.10.0 and 1.8.0 works fine as in example #1502

[elalish]

If anyone can provide some solid guidance here, that would we be great. If you read that thread, you'll see that everyone seems to have a different experience. A change went in then that was supposed to make it better, but it seems to have made it worse for you. I have found no canonical source for how to distribute TS types with a web component so that all the frameworks understand. I'm beginning to think there's no such thing.

[gauravbj11]

@serhii1290 I got the similar issue, to resolve I've updated browserlist in my package.json.
"browserslist": [ ">0.2%", "not dead", "not op_mini all" ]