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.