@typeform/embed 打破 Gatsby Netlify 构建答案

【问题标题】：@typeform/embed breaks Gatsby Netlify build@typeform/embed 打破 Gatsby Netlify 构建
【发布时间】：2021-02-07 22:41:50
【问题描述】：

我已按照 typeform 嵌入说明进行操作，甚至按照他们的建议切换到 yarn 包管理器，但我在构建过程中不断出错。

5:27:38 PM: failed Building static HTML for pages - 4.592s

5:27:38 PM: error Building static HTML failed


5:27:38 PM: > 1 | !function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["react","react-dom"],t):"object"==typeof exports?

这个错误一直持续。

但是，一旦我停止导入 typeform，我就没有任何问题。这条线是罪魁祸首。

import * as typeformEmbed from "@typeform/embed";

如果我摆脱它并只返回一个空 div 我没有任何问题。

这是整个组件

import React, { useRef, useEffect } from "react";
import * as typeformEmbed from "@typeform/embed";

const Form = () => {
    const typeformRef = useRef(null);

    useEffect(() => {
        typeformEmbed.makeWidget(
            typeformRef.current,
            "https://tu6s6xuakuw.typeform.com/to/wGd96IFk",
            {
                hideFooter: true,
                hideHeaders: true,
                opacity: 50,
            }
        );
    }, [typeformRef]);

    return (
        <div ref={typeformRef} style={{ height: "500px", width: "100%" }}></div>
    );
};

export default Form;

非常感谢任何关于在哪里寻找的线索。

【问题讨论】：

只有在运行gatsby build 时才会出现这种情况吗？我的第一个想法是 Typeform embed SDK 可能在某处引用了 window 对象，这在 Gatsby 构建时不可用。这是 Gatsby 的一个相当常见的问题，并且有一些 guidance in the docs。如果您还没有尝试过，值得一试。您的组件没有任何问题。

标签： reactjs gatsby package.json netlify typeform

【解决方案1】：

在您的gatsby-node.js 中添加以下 sn-p：

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
    if (stage === 'build-html') {
        actions.setWebpackConfig({ 
            module: {
                rules: [
                  {
                    test: /@typeform/,
                    use: loaders.null(),
                  },
                ],
              }
        })
    }
}

在处理 Gatsby 中使用 window 的第三方模块时，您需要将 null 加载器添加到其自己的 webpack 配置中，以避免在 SSR 期间进行转译（Server-Side R渲染）。这是因为gatsby develop 出现在浏览器中，而gatsby build 出现在显然没有window or other global objects 的节点服务器中。

请记住，test 值是一个正则表达式，它将匹配 node_modules 下的文件夹，因此，请确保 /@typeform/ 是正确的名称（您可能需要将其更改为 /@typeform/\embed/）。

【讨论】：