ES6 导入中断 Gatsby 构建：WebpackError：ReferenceError：未定义元素

Question

我想在我的组件中包含以下 npm 包：tiny-slider-react。

但是，虽然它在 Gatsby Develop 中运行良好，但 Gatsby Build 失败并显示以下消息：

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

注释掉这个导入和它的 React 组件可以解决这个问题。

Slideview.js

import React from 'react';
import TinySlider from "tiny-slider-react";

...

class SlideView extends React.Component{
    render(){
        return(
            <TinySlider settings={settings}>
                ...
            </TinySlider>
        );
    }
}

预期：滑块在生产中的工作方式与开发类似。 实际结果：构建中断

Answer 1

在开发过程中，React 组件仅在浏览器中运行。在构建时，Gatsby 会在服务器上呈现这些组件 - 在这种情况下，Element（以及像 window 和 document 这样的东西）没有定义。

我对你的具体用例没有解决方案，但是当你想做与 DOM 相关的操作时，应该在 componentDidMount 中完成，它只会在浏览器中运行。

我解决您问题的想法：

• 不知何故只能在父 componentDidMount 中导入和使用组件。这是 IMO 非常脆弱的，不是正确的方法

• fork 包并打补丁，所以操作Element 原型的代码只能在浏览器上运行。最终做个 PR

编辑：

我做了一些搜索，发现了这个（有点）类似的问题和解决方案：https://github.com/gatsbyjs/gatsby/issues/309#issuecomment-373359887。

// index.js
import React from "react";
import Link from "gatsby-link";

// import "uikit/dist/js/uikit";
// Third party JS access `window` without
// `typeof window !== "undefined"` check

class Template extends React.Component {
  componentDidMount() {
    import("uikit/dist/js/uikit")
      .then((uikit) => {
        this.uikit = uikit;
      })
      .catch((error) => console.error(error));
  }
  render() {
    // ...
  }
}

// ...

本质上，你所做的就是在componentDidMount生命周期钩子中导入组件，将其绑定到this.<MyComponent>，然后在渲染函数中使用它：

render() {
   const MyComponent = this.MyComponent;
   return <MyComponent />;
}

请注意，我自己没有尝试过，但我不明白这应该如何工作。做你自己的测试;)

Answer 2

原来我必须在 gatsby-node.js 中添加以下几行

gatsby-node.js

// /**
//  * Implement Gatsby's Node APIs in this file.
//  *
//  * See: https://www.gatsbyjs.org/docs/node-apis/
//  */

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
    if (stage === "build-html") {
      actions.setWebpackConfig({
        module: {
          rules: [
            {
              test: /tiny-slider-react/,
              use: loaders.null(),
            },
          ],
        },
      })
    }
  }

它位于此文档页面的底部。 https://www.gatsbyjs.org/docs/debugging-html-builds/

感谢菲利普的帮助