@typeform/embed breaks Gatsby Netlify build

Question

I've followed the typeform embed directions and even switch to yarn package manager as they recommend but I keep getting an error in the build.

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? 

That error goes on and on.

However, as soon as I stop importing typeform I don't have any issues. This line is the culprit.

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

If I get rid of that and just return an empty div I don't have any issues.

Here is the entire component

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;

Any leads on where to look would be greatly appreciated.

Answer 1

Add the following snippet in your gatsby-node.js:

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

When dealing with third-party modules that use window in Gatsby you need to add a null loader to its own webpack configuration to avoid the transpilation during the SSR (Server-Side Rendering). This is because gatsby develop occurs in the browser while gatsby build occurs in the Node server where obviously there isn't a window or other global objects.

Keep in mind that the test value is a regular expression that will match a folder under node_modules so, ensure that the /@typeform/ is the right name (you may need to change it to /@typeform/\embed/).