I want to include the following npm package in my component: tiny-slider-react.
However, while it works fine in Gatsby Develop, Gatsby Build fails with the following message:
error Building static HTML failed
See our docs page on debugging HTML builds for help https://gatsby.dev/debug-html
3 | "use strict";
4 |
> 5 | if(!("remove" in Element.prototype)){
| ^
6 | Element.prototype.remove = function(){
7 | if(this.parentNode) {
8 | this.parentNode.removeChild(this);
WebpackError: ReferenceError: Element is not defined
- childNode.remove.js:5
[lib]/[ventura-slider]/src/helpers/childNode.remove.js:5:1
- childNode.remove.js:12 Object../node_modules/ventura-slider/src/helpers/childNode.remove.js
[lib]/[ventura-slider]/src/helpers/childNode.remove.js:12:2
- bootstrap:19 __webpack_require__
lib/webpack/bootstrap:19:1
- tiny-slider.module.js:1 Module../node_modules/ventura-slider/src/tiny-slider.module.js
[lib]/[ventura-slider]/src/tiny-slider.module.js:1:1
- bootstrap:19 __webpack_require__
lib/webpack/bootstrap:19:1
- Carousel.js:19 Object../node_modules/tiny-slider-react/build/Carousel.js
[lib]/[tiny-slider-react]/build/Carousel.js:19:19
- bootstrap:19 __webpack_require__
lib/webpack/bootstrap:19:1
- index.js:7 Object../node_modules/tiny-slider-react/build/index.js
[lib]/[tiny-slider-react]/build/index.js:7:17
- bootstrap:19 __webpack_require__
lib/webpack/bootstrap:19:1
- bootstrap:19 __webpack_require__
lib/webpack/bootstrap:19:1
- bootstrap:19 __webpack_require__
lib/webpack/bootstrap:19:1
- sync-requires.js:12 Object../.cache/sync-requires.js
lib/.cache/sync-requires.js:12:57
- bootstrap:19 __webpack_require__
lib/webpack/bootstrap:19:1
- static-entry.js:9 Module../.cache/static-entry.js
lib/.cache/static-entry.js:9:22
Commenting out this import and its’ React component fixes the issue.
Slideview.js
import React from 'react';
import TinySlider from "tiny-slider-react";
...
class SlideView extends React.Component{
render(){
return(
<TinySlider settings={settings}>
...
</TinySlider>
);
}
}
Expected: Slider works in production just like develop. Actual results: Breaks on build