Merge pull request #214 from futurice/fix-framing-behaviour

Fix framing behaviour

src/frontend/main/Survey.tsx

@@ -1,7 +1,12 @@
 import React, { useEffect } from 'react';
 import styled from 'styled-components';
 import { RouteComponentProps } from '@reach/router';
-import * as resizer from 'iframe-resizer';
+
+// IMPORANT: We can't import the WHOLE library, just the "parent page" part!
+// Including the "child page" part in our bundle is enough to activate it when the standalone site is framed,
+// potentially causing an infinite resizing loop within the library. That is, before changing this import,
+// BE VERY SURE you have tested both framing the standalone site, and the standalone site's capability to frame the embed site.
+import * as iframeResizer from 'iframe-resizer/js/iframeResizer';
 
 const Container = styled.div`
   max-width: 632px;
@@ -16,7 +21,7 @@ const Iframe = styled.iframe`
 
 const Survey = (props: RouteComponentProps) => {
   useEffect(() => {
-    resizer.iframeResizer({ log: false }, '#formIframe');
+    iframeResizer({ log: false }, '#formIframe');
   });
 
   return (

src/react-app-env.d.ts

@@ -3,3 +3,7 @@
 // Allow tsc to build our codebase even without webpack-specific tweaks
 // See https://github.com/microsoft/TypeScript-React-Starter/issues/12
 declare module '*.svg';
+
+// We can't import the whole "iframe-resizer" library, so its typings aren't useful to us, either.
+// See the import "iframe-resizer/js/iframeResizer" for details.
+declare module 'iframe-resizer/js/iframeResizer';