@typeform/embed Netlify build

Question

我遵循了typeform嵌入方向，甚至按照他们的建议切换到纱线包管理器，但是我一直在构建中出错。

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;

如能找到任何线索，我们将不胜感激。

Answer 1

在gatsby-node.js中添加以下片段

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

当处理在盖茨比中使用window的第三方模块时，您需要在自己的webpack配置中添加一个null加载程序，以避免在SSR windowR登录过程中的转移溢出)。这是因为gatsby develop发生在浏览器中，而gatsby build发生在节点服务器中，显然没有window or other global objects。

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