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

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"

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 5
Comments: 21 (3 by maintainers)

Most upvoted comments

@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.

YunYouJun on Dec 5, 2019

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>

pedrobergamini on Jul 21, 2020

@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?

elalish on Jul 31, 2020

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

zeekrey on Jul 31, 2020

@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.

elalish on Jun 10, 2020

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

ajmhyd on Nov 5, 2019