Comments (12)
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.
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.
@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.
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.
@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.
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.
Having same issue. Works fine on development, not able to build in netlify.
from react-typeform-embed.
@phlipper your solution worked like a charm , thanks a lot!
from react-typeform-embed.
@phlipper It worked! Thank you!
from react-typeform-embed.
@phlipper you're the real mvp! can you explain how this magic works?
from react-typeform-embed.
@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.
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)
- onSubmit not working HOT 12
- Please add an explicit license HOT 1
- Not working on mobile device HOT 6
- Root DOM blocks other elements in popup mode HOT 6
- How to handle hidden fields? HOT 3
- found 19 vulnerabilities (4 low, 11 moderate, 4 high) HOT 3
- [React Native] Does this package work in React Native? HOT 1
- onSubmit function for multiple typeform on one page HOT 5
- [0.2.0] Page scrolling to <ReactTypeformEmbed /> component on load. Any workarounds? HOT 8
- Touchscreen devices - Tablet/Mobile HOT 1
- Typeform loads as a full page HOT 1
- Android Mobile Issues HOT 4
- Wrong information autoClose props HOT 1
- Handle Errors HOT 5
- Form fields not saving data
- Form submission is caching in localstorage HOT 1
- Add support for missing embed modes HOT 2
- Bug with 404 HOT 1
- Error when using with Typescript HOT 1
- Example for React Functional Components HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-typeform-embed.