Model-viewer: Get syntax error when importing into a React app

[CodeBradley]

Description

tl;dr: Here's a recording of the issue - https://recordit.co/hzEhqOLC1X

I am using Next, React and Model Viewer to try and make a model-viewer component but whenever I follow the instructions in the readme and import the module using:

import "@google/model-viewer";

My code:

import "@google/model-viewer";

const ModelView = (props) => (
    <div>
        <model-viewer src={props.src} alt={props.alt} background-color="#70BCD1" shadow-intensity="2" camera-controls="" interaction-prompt="auto" auto-rotate="" ar="" magic-leap="">
        </model-viewer>
    </div>
);

export default ModelView;

I get the following error:

SyntaxError: Unexpected token {
C:\Users\MuhCok\WebstormProject\hello-next\node_modules\
google\model-viewer\lib\model-viewer.js:15
new Script
vm.js:83:7
createScript
vm.js:267:10
runInThisContext
vm.js:319:10
Module._compile
internal/modules/cjs/loader.js:686:28
Module._extensions..js
internal/modules/cjs/loader.js:734:10
Module.load
internal/modules/cjs/loader.js:620:32
tryModuleLoad
internal/modules/cjs/loader.js:560:12
Function.Module._load
internal/modules/cjs/loader.js:552:3
Module.require
internal/modules/cjs/loader.js:659:17
require
internal/modules/cjs/helpers.js:22:18
@google/model-viewer
webpack:/external "@google/model-viewer":1
> 1 | module.exports = require("@google/model-viewer");
View compiled
__webpack_require__
./webpack/bootstrap:21
  18 | // Execute the module function
  19 | var threw = true;
  20 | try {
> 21 |  modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
     | ^  22 |  threw = false;
  23 | } finally {
  24 |  if(threw) delete installedModules[moduleId];
View compiled
Module../components/model-viewer.js
/_next/development/server/static/development/pages/warehouse.js:107:78
__webpack_require__
./webpack/bootstrap:21
  18 | // Execute the module function
  19 | var threw = true;
  20 | try {
> 21 |  modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
     | ^  22 |  threw = false;
  23 | } finally {
  24 |  if(threw) delete installedModules[moduleId];
View compiled
Module../pages/warehouse.js
/_next/development/server/static/development/pages/warehouse.js:886:82
__webpack_require__
./webpack/bootstrap:21
  18 | // Execute the module function
  19 | var threw = true;
  20 | try {
> 21 |  modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
     | ^  22 |  threw = false;
  23 | } finally {
  24 |  if(threw) delete installedModules[moduleId];

If I include the script tag then everything loads fine.

Browser Affected

• [ X] Chrome (All)

OS

• [x ] Windows 10.0.17134 Build 17134

Versions

"@google/model-viewer": "latest", (Changed from 0.5.0 to latest, I believe)
"next": "^9.0.3",
"react": "^16.8.6",
"react-dom": "^16.8.6"

[cdata]

Thanks for reporting! Can you also share any special configurations you might be using (e.g., next.config.js, webpack.config.js etc.)?

[ajmhyd]

I'm running into a similar issue with no special configurations.

[cdata]

@ajmhyd @CodeBradley Okay, thanks. I'll try to reproduce the error using next without any configuration then.

[ajmhyd]

I was able to reproduce.

Browser Affected

• [x] Chrome

  OS

• [x] Windows / WSL

  Versions

"@google/model-viewer": "^0.6.0",
"next": "^9.0.5",
"react": "^16.9.0",
"react-dom": "^16.9.0"

My Code

import '@google/model-viewer';

export default function index(){
  return(
    <div>
      <model-viewer alt="chair" src="/static/Embody.glb" ar auto-rotate camera-controls>
      </model-viewer>
    </div>
  )
}

Error

SyntaxError: Unexpected token {
/mnt/c/Users/amatseshe/Documents/Projects/nextmodel/node_modules/
google/model-viewer/lib/model-viewer.js:15
Module._compile
internal/modules/cjs/loader.js:723:23
Module._extensions..js
internal/modules/cjs/loader.js:789:10
Module.load
internal/modules/cjs/loader.js:653:32
tryModuleLoad
internal/modules/cjs/loader.js:593:12
Function.Module._load
internal/modules/cjs/loader.js:585:3
Module.require
internal/modules/cjs/loader.js:692:17
require
internal/modules/cjs/helpers.js:25:18
@google/model-viewer
webpack:/external "@google/model-viewer":1
> 1 | module.exports = require("@google/model-viewer");
View compiled
__webpack_require__
./webpack/bootstrap:21
  18 | // Execute the module function
  19 | var threw = true;
  20 | try {
> 21 |  modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
     | ^  22 |  threw = false;
  23 | } finally {
  24 |  if(threw) delete installedModules[moduleId];
View compiled
Module../pages/index.js
/_next/development/server/static/development/pages/index.js:108:78
__webpack_require__
./webpack/bootstrap:21
  18 | // Execute the module function
  19 | var threw = true;
  20 | try {
> 21 |  modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
     | ^  22 |  threw = false;
  23 | } finally {
  24 |  if(threw) delete installedModules[moduleId];
View compiled
3
/_next/development/server/static/development/pages/index.js:144:18
__webpack_require__
./webpack/bootstrap:21
  18 | // Execute the module function
  19 | var threw = true;
  20 | try {
> 21 |  modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
     | ^  22 |  threw = false;
  23 | } finally {
  24 |  if(threw) delete installedModules[moduleId];

[ajmhyd]

This issue can be closed as it is not related to model-viewer. The issue is with the SSR in NextJS. In order to get the model-viewer to work in NextJS, you simply have to import the component it's in with SSR disabled. An example from NextJS is posted below.

import dynamic from 'next/dynamic'

const DynamicComponentWithNoSSR = dynamic(
  () => import('../components/modelComponent'),
  { ssr: false }
)

function Home() {
  return (
    <div>
      <Header />
      <DynamicComponentWithNoSSR />
      <p>HOME PAGE is here!</p>
    </div>
  )
}

export default Home

[cdata]

@ajmhyd thanks for that update, that's a very interesting insight. I wonder what makes <model-viewer> incompatible with Next.js SSR...

We would like to be compatible with that if possible, so I will keep this issue open for now.

[ajmhyd]

@cdata I was running into an issue where I was getting ReferenceError: window is not defined. I read that

The window object is not available during server-side rendering because Node.js does not have a window object - it is a browser construct. This is a scenario common to server-side rendering (SSR) and JavaScript - it is not specific to JSS. The primary takeaway is that during SSR you cannot use code that references the browser-specific constructs or objects like window or the DOM.

This is where my solution of disabling SSR came from.

[YunYouJun]

@cdata Hello, have you solved the problem?

In fact, I input

// success
import '@google/model-viewer/dist/model-viewer';
// failed
// import '@google/model-viewer';

And it works in next.

[ZuechB]

I am having the same issue with nextjs and react. I am unable to getting it working with the recommendations above. The page displays but the model viewer is empty.

I tried both dynamic and import '@google/model-viewer/dist/model-viewer';

[elalish]

@sun765 Not a high priority, but you have more experience with React that I do, so if you can make this work through either a PR or some documentation/example, that would be great.

[zeekrey]

I am having the same issue with nextjs and react. I am unable to getting it working with the recommendations above. The page displays but the model viewer is empty.

I tried both dynamic and import '@google/model-viewer/dist/model-viewer';

@ZuechB Did you made it? I'm still facing the same issue. :(

[pedrobergamini]

Hey guys. I was passing through the same issue.

The way I solved it was adding the script tags into the Head element in the _document.js file

```


{this.props.styleTags}
type="module"
src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"

[zeekrey]

Hey guys. I was passing through the same issue.

The way I solved it was adding the script tags into the Head element in the _document.js file

                <Head>
                    <title>Devicefy</title>
                    {this.props.styleTags}
                    <script
                        type="module"
                        src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"
                    ></script>
                    <script nomodule src="https://unpkg.com/@google/model-viewer/dist/model-viewer-legacy.js"></script>
                </Head>
                <body>
                    <Main />
                    <NextScript />
                </body>
            </html>

Jep, works. 🥳 Here is a working codesandbox with a basic react setup with react helmet to inject the script tag: https://codesandbox.io/s/react-model-viewer-549g2?file=/src/App.js

[corysimmons]

@elalish This is the simplest possible example of working with a create-react-app app:

import React from "react"
import "@google/model-viewer/dist/model-viewer-legacy"

import Astronaut from "./Astronaut.glb"

export default function App() {
  return <model-viewer src={Astronaut} auto-rotate camera-controls />
}

So the problem with everything I tried before was I was using import "@google/model-viewer/dist/model-viewer" when I needed to be using import "@google/model-viewer/dist/model-viewer-legacy" (this is in 1.1.0).

Again, I'd strongly suggest creating/maintaining an /examples folder at the root of this project where the public can (and usually actually will) make sure works with whatever popular integrations there may be out there.

For instance, I'd PR that really simple version of model-viewer + create-react-app with versions hard-locked, then it'd be crystal clear when someone came into Issues saying _"Hey, XYZ example doesn't work in the newest version, but works in the last version"_

[elalish]

@corysimmons Thanks, that's very interesting! Seems odd that React would require ES5, and it seems the examples given earlier by @zeekrey and @pedrobergamini don't restrict in that way. I agree about the examples folder. Would you be up for making a PR like that?

[corysimmons]

@elalish Clocking out and closing laptop for the weekend, but ping me Monday and I'll PR it.

React definitely doesn't require ES5. I think the export just needs some work. Exports can be tricky.

[elalish]

@corysimmons Thanks, looking forward to it! Definitely interested if our export needs work.

[corysimmons]

@elalish https://github.com/google/model-viewer/pull/1437 Don't have time to investigate the export, but I know that stuff can be tricky so it's very likely the new version works fine, it just isn't exported correctly like the legacy version. 🤷