Google model-viewer + Rails 6 + Webpacker

204 views Asked by At

I'm trying to get <model-viewer> to work with Rails 6 and Webpacker but it's throwing some errors:

model-viewer-legacy.js:272 Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
    at model-viewer-legacy.js:272
    at Module.<anonymous> (model-viewer-legacy.js:432)
    at Module../node_modules/@google/model-viewer/dist/model-viewer-legacy.js (model-viewer-legacy.js:56169)
    at __webpack_require__ (bootstrap:19)
    at Object../app/javascript/packs/application.js (application.js:23)
    at __webpack_require__ (bootstrap:19)
    at bootstrap:83
    at bootstrap:83

model-viewer.min.js:32923 Uncaught TypeError: Cannot read property 'prototype' of undefined
    at HTMLElement.value (model-viewer.min.js:32923)
    at HTMLElement.value (model-viewer.min.js:32159)
    at HTMLElement.value (model-viewer.min.js:31802)
    at HTMLElement.value (model-viewer.min.js:31539)
    at vp.preRender (model-viewer.min.js:26317)
    at vp.render (model-viewer.min.js:26337)
    at model-viewer.min.js:26229
    at model-viewer.min.js:11427
    at r (model-viewer.min.js:6941)

I've added it using yarn add @google/model-viewer and I'm loading it in application.js like this:

require("@google/model-viewer/dist/model-viewer.min");
require("@google/model-viewer/dist/model-viewer-legacy");

This is the content of webpack/environment.js:

const { environment } = require('@rails/webpacker')
const customConfig = require('./custom');
const webpack = require('webpack')
environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery/src/jquery',
    jQuery: 'jquery/src/jquery',
    jquery: 'jquery',
    'window.jQuery': 'jquery',
    Popper: ['popper.js', 'default']
  })
)
environment.config.merge(customConfig);

module.exports = environment

And this is the content of webpack/custom.js:

module.exports = {
  resolve: {
    alias: {
      jquery: 'jquery/src/jquery'
    }
  }
};

Anyone knows how to get this working? i'm used to the Rails 4 pipeline and find the whole webpacker thing super confusing.

0

There are 0 answers