0

I'm a bit clueless with integrating the @google/model-viewer into a nuxtjs project:

This is my model-viewer.js in the plugins folder

import Vue from "vue";
import modelViewer from "@google/model-viewer";

Vue.use(modelViewer);

The part in my nuxt.config.js

  plugins: [
    "@/plugins/hooks",
    { src: "@/plugins/gsap", mode: "client" },
    { src: "@/plugins/model-viewer", mode: "client" },
  ],

... and the component so far

<template>
    <model-viewer
      :src="src"
      bounds="tight"
      enable-pan
      camera-controls
      environment-image="neutral"
      poster="poster.webp"
      shadow-intensity="1"
      autoplay
    ></model-viewer>
</template>
<script lang="ts">
export default {
  ssr: false,
  name: "Viewer3d",
  props: {
    src: {
      type: String,
      required: true,
    },
  },
  setup() {
    return {};
  },
};
</script>

When called I get the Error

Failed to compile with 1 errors friendly-errors 13:36:36

ERROR in ./node_modules/@google/model-viewer/dist/model-viewer.min.js
friendly-errors 13:36:36

Module parse failed: Unexpected token (999:5963)
friendly-errors 13:36:36 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 | * limitations under the License. | */

and a

window is not defined

from my browser.

What am I missing? I am not familiar with loaders in nuxt and wasn't able to find something helping me with my problem.

zero2579
  • 218
  • 2
  • 8
  • Hi, can you please try this one? https://stackoverflow.com/a/67751550/8816585 – kissu Jun 26 '22 at 12:05
  • What exactly? My import is from a file in the nuxt plugins folder and is set to only on client side. The "client-only" wrapper doesn't do anything here, unfortunately. :/ – zero2579 Jun 26 '22 at 12:21

2 Answers2

1

Currently with NuxtJS updating the model viewer library to version 3, I have been able to make it work, until now I had to keep it on v1.12 which was the latest that worked for me.

The model-viewer.js in the plugins folder

import '@google/model-viewer';

And you need to wrap the model-viewer tag with the client-only


    <template>
      <client-only>
        <model-viewer
          :src="src"
          bounds="tight"
          enable-pan
          camera-controls
          environment-image="neutral"
          poster="poster.webp"
          shadow-intensity="1"
          autoplay
        ></model-viewer>
      </client-only>
    </template>
    <script lang="ts">
    export default {
      ssr: false,
      name: "Viewer3d",
      props: {
        src: {
          type: String,
          required: true,
        },
      },
      setup() {
        return {};
      },
    };
    </script>
IvanG11
  • 92
  • 4
0

I had the same issue but with NuxtJS. Try to use an older version of the model-viewer, everything until version 1.10.1 is working for me.

Tom
  • 326
  • 2
  • 17