Git Product home page Git Product logo

Comments (12)

stepheljobs avatar stepheljobs commented on August 15, 2024 13

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',
                  },
                ],
              }
        })
    }
}

from react-typeform-embed.

phlipper avatar phlipper commented on August 15, 2024 6

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',
    })
  }
}

from react-typeform-embed.

rickymetz avatar rickymetz commented on August 15, 2024 3

@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

from react-typeform-embed.

andrew-pyle avatar andrew-pyle commented on August 15, 2024 2

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.

from react-typeform-embed.

alexgarces avatar alexgarces commented on August 15, 2024

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

Could it be related with server side rendering? #5

from react-typeform-embed.

mechatroNick avatar mechatroNick commented on August 15, 2024

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",
    });
  }
};

from react-typeform-embed.

sicktastic avatar sicktastic commented on August 15, 2024

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

from react-typeform-embed.

iyo-bemoore avatar iyo-bemoore commented on August 15, 2024

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

from react-typeform-embed.

mechatroNick avatar mechatroNick commented on August 15, 2024

@phlipper It worked! Thank you!

from react-typeform-embed.

daydream05 avatar daydream05 commented on August 15, 2024

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

from react-typeform-embed.

mechatroNick avatar mechatroNick commented on August 15, 2024

@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

from react-typeform-embed.

DavidSabine avatar DavidSabine commented on August 15, 2024

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?

from react-typeform-embed.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.