Issue w/ Gatsby

[noomerikal]

trafficstars

Hi - Tried to install this in a Gatsby project and coming up w/ some errors around Babel. Trying to figure it out, any suggestions?

Thanks

https://gist.github.com/noomerikal/2f7f9d13c5449849d0eb7f447175ee65

[alexgarces]

@noomerikal do you still have the same problem? I'll try to do some research.

Could it be related with server side rendering? #5

[rickymetz]

@alexgarces I'm also running into problems making it work with gatsby specifically during the production build stage (local development works fine):

$ gatsby build
success delete html and css files from previous builds — 0.059 s
success open and validate gatsby-config — 0.496 s
info One or more of your plugins have changed since the last time you ran Gatsby. As
a precaution, we're deleting your site's cache to ensure there's not any stale
data
success copy gatsby files — 0.032 s
success onPreBootstrap — 0.057 s
success source and transform nodes — 0.048 s
success building schema — 0.107 s
success createLayouts — 0.030 s
success createPages — 0.001 s
success createPagesStatefully — 0.046 s
success onPreExtractQueries — 0.002 s
success update schema — 0.070 s
success extract queries from components — 0.012 s
success run graphql queries — 0.015 s
success write out page data — 0.006 s
success write out redirect data — 0.001 s
success onPostBootstrap — 0.001 s

info bootstrap finished - 4.266 s

success Building CSS — 10.821 s
success Building production JavaScript bundles — 20.545 s

error Building static HTML for pages failed

See our docs page on debugging HTML builds for help https://goo.gl/yL9lND

  12630 | /***/ (function(module, exports, __webpack_require__) {
  12631 |
> 12632 | var __WEBPACK_AMD_DEFINE_RESULT__;/* Web Font Loader v1.6.28 - (c) Adobe Systems, Google. License: Apache 2.0 */(function(){function aa(a,b,c){return a.call.apply(a.bind,arguments)}function ba(a,b,c){if(!a)throw Error();if(2<arguments.length){var d=Array.prototype.slice.call(arguments,2);return function(){var c=Array.prototype.slice.call(arguments);Array.prototype.unshift.apply(c,d);return a.apply(b,c)}}return function(){return a.apply(b,arguments)}}function p(a,b,c){p=Function.prototype.bind&&-1!=Function.prototype.bind.toString().indexOf("native code")?aa:ba;return p.apply(null,arguments)}var q=Date.now||function(){return+new Date};function ca(a,b){this.a=a;this.o=b||a;this.c=this.o.document}var da=!!window.FontFace;function t(a,b,c,d){b=a.c.createElement(b);if(c)for(var e in c)c.hasOwnProperty(e)&&("style"==e?b.style.cssText=c[e]:b.setAttribute(e,c[e]));d&&b.appendChild(a.c.createTextNode(d));return b}function u(a,b,c){a=a.c.getElementsByTagName(b)[0];a||(a=document.documentElement);a.insertBefore(c,a.lastChild)}function v(a){a.parentNode&&a.parentNode.removeChild(a)}
        |                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                ^
  12633 | function w(a,b,c){b=b||[];c=c||[];for(var d=a.className.split(/\s+/),e=0;e<b.length;e+=1){for(var f=!1,g=0;g<d.length;g+=1)if(b[e]===d[g]){f=!0;break}f||d.push(b[e])}b=[];for(e=0;e<d.length;e+=1){f=!1;for(g=0;g<c.length;g+=1)if(d[e]===c[g]){f=!0;break}f||b.push(d[e])}a.className=b.join(" ").replace(/\s+/g," ").replace(/^\s+|\s+$/,"")}function y(a,b){for(var c=a.className.split(/\s+/),d=0,e=c.length;d<e;d++)if(c[d]==b)return!0;return!1}
  12634 | function ea(a){return a.o.location.hostname||a.a.location.hostname}function z(a,b,c){function d(){m&&e&&f&&(m(g),m=null)}b=t(a,"link",{rel:"stylesheet",href:b,media:"all"});var e=!1,f=!0,g=null,m=c||null;da?(b.onload=function(){e=!0;d()},b.onerror=function(){e=!0;g=Error("Stylesheet failed to load");d()}):setTimeout(function(){e=!0;d()},0);u(a,"head",b)}
  12635 | function A(a,b,c,d){var e=a.c.getElementsByTagName("head")[0];if(e){var f=t(a,"script",{src:b}),g=!1;f.onload=f.onreadystatechange=function(){g||this.readyState&&"loaded"!=this.readyState&&"complete"!=this.readyState||(g=!0,c&&c(null),f.onload=f.onreadystatechange=null,"HEAD"==f.parentNode.tagName&&e.removeChild(f))};e.appendChild(f);setTimeout(function(){g||(g=!0,c&&c(Error("Script load timeout")))},d||5E3);return f}return null};function B(){this.a=0;this.c=null}function C(a){a.a++;return function(){a.a--;D(a)}}function E(a,b){a.c=b;D(a)}function D(a){0==a.a&&a.c&&(a.c(),a.c=null)};function F(a){this.a=a||"-"}F.prototype.c=function(a){for(var b=[],c=0;c<arguments.length;c++)b.push(arguments[c].replace(/[\W_]+/g,"").toLowerCase());return b.join(this.a)};function G(a,b){this.c=a;this.f=4;this.a="n";var c=(b||"n4").match(/^([nio])([1-9])$/i);c&&(this.a=c[1],this.f=parseInt(c[2],10))}function fa(a){return H(a)+" "+(a.f+"00")+" 300px "+I(a.c)}function I(a){var b=[];a=a.split(/,\s*/);for(var c=0;c<a.length;c++){var d=a[c].replace(/['"]/g,"");-1!=d.indexOf(" ")||/^\d/.test(d)?b.push("'"+d+"'"):b.push(d)}return b.join(",")}function J(a){return a.a+a.f}function H(a){var b="normal";"o"===a.a?b="oblique":"i"===a.a&&(b="italic");return b}


  WebpackError: window is not defined

  - api.js:12632
    ~/@typeform/embed/lib/api.js:12632:704

  - api.js:12649 Object.module.exports.Object.defineProperty.value
    ~/@typeform/embed/lib/api.js:12649:234

  - api.js:21 __webpack_require__
    ~/@typeform/embed/lib/api.js:21:1

  - api.js:12380 Object.module.exports.Object.defineProperty.value
    ~/@typeform/embed/lib/api.js:12380:1

  - api.js:21 __webpack_require__
    ~/@typeform/embed/lib/api.js:21:1

  - api.js:12050 Object.module.exports.Object.defineProperty.value
    ~/@typeform/embed/lib/api.js:12050:1

  - api.js:21 __webpack_require__
    ~/@typeform/embed/lib/api.js:21:1

  - api.js:8210 Object.module.exports.Object.defineProperty.value
    ~/@typeform/embed/lib/api.js:8210:1

  - api.js:21 __webpack_require__
    ~/@typeform/embed/lib/api.js:21:1

  - api.js:64
    ~/@typeform/embed/lib/api.js:64:1

Some additional context in the Gatsby Repo.

---

Any additional help you could lend would be greatly appreciated

[mechatroNick]

Also tried this https://www.gatsbyjs.org/docs/debugging-html-builds/ by adding a piece of code to gatsby-node.js but still did not work

exports.modifyWebpackConfig = ({ config, stage }) => {
  if (stage === "build-html") {
    config.loader("null", {
      test: /react-typeform-embed/,
      loader: "null-loader",
    });
  }
};

[sicktastic]

Having same issue. Works fine on development, not able to build in netlify.

[phlipper]

The following webpack modification works for me with Gatsby:

exports.modifyWebpackConfig = ({ config, stage }) => {
  if (stage === 'build-html') {
    config.loader('null', {
      test: /@typeform/,
      loader: 'null-loader',
    })
  }
}

[iyo-bemoore]

@phlipper your solution worked like a charm , thanks a lot!

[mechatroNick]

@phlipper It worked! Thank you!

[daydream05]

@phlipper you're the real mvp! can you explain how this magic works?

[mechatroNick]

@daydream05 In relation to why using test: /react-typeform-embed/ did not work but test: /@typeform/ works: my guess is that if you look at your node_modules folder, the source code is stored in node_modules/@typeform

[stepheljobs]

Adding additional fix if you have using the latest gatsby version 2.0

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

[DavidSabine]

It appears a conflict occurs with multiple versions of url-loader.

These lines in your packages.json will also resolve the problem (for yarn users): "resolutions": { "url-loader": "1.1.2" } This tells Gatsby and this plugin to use the same version of url-loader.

This appears to be related to the fact that react-scripts is included in this repo as a production dependency -- is that intentional? Or should react-scripts be a dev dependency?

[andrew-pyle]

An explanation of the problem from Gatsby's perspective is at https://www.gatsbyjs.org/docs/debugging-html-builds/

They have the snippet for gatsby-node.js to fix, and it will probably stay updated.