jjant · August 5, 2020 21:21
diff --git a/config.js b/config.js
 {

  module: {
    // ... other config
    // We run this after compiling our elm code, you might have to modify this a bit
    rules: [
      {
        test: /elmApp.js$/,
        exclude: [/elm-stuff/, /node_modules/],
        loaders: [
          // This is a hack to make Elm's Browser.application use a `div` instead of the whole `body`.
          // This was done this way to make Google Tag Manager's widgets (like WalkMe) work correctly.
          // This is a known issue of Elm 0.19+ with no official solution, but this hack appears to work well.
          //
          // https://discourse.elm-lang.org/t/fullscreen-elm-app-in-0-19-childnode-issue-reopened/3174
          StringReplacePlugin.replace({
            replacements: [
              {
                pattern: /var bodyNode = _VirtualDom_doc.body;/gi,
                replacement: function (match, p1, offset, string) {
                  return "var bodyNode = _VirtualDom_doc.getElementById('elm-root');"
                }
              },
              // If you compile the code without --optimize, the line we want to replace looks like this:
              //
              //    var nextNode = _VirtualDom_node('body')(_List_Nil)(doc.body);
              //
              // But with --optimize on, Elm will replace the `body` identifier in doc.body by a minified one, like `doc.e3`, `doc.f1`, etc.
              // This is done by the __$body here: https://github.com/elm/browser/blob/1.0.2/src/Elm/Kernel/Browser.js#L83.
              //
              // To make this work, we're using a regex to capture that identifier and we rebuild the line we want with it,
              // replacing the`<body>` tag with a`<div>`.
              {
                pattern: /var nextNode = _VirtualDom_node\('body'\)\(_List_Nil\)\(doc\.(\w*)\);/gi,
                replacement: function (match, docBodyIdentifier) {
                  return (
                    "var nextNode = _VirtualDom_node('div')(_List_Nil)(doc." +
                    docBodyIdentifier +
                    ');'
                  )
                }
              }
            ]
          })
        ]
      }
    ]
  },
 /// other config
 |
	{

	module: {
	// ... other config
	// We run this after compiling our elm code, you might have to modify this a bit
	rules: [
	{
	test: /elmApp.js$/,
	exclude: [/elm-stuff/, /node_modules/],
	loaders: [
	// This is a hack to make Elm's Browser.application use a `div` instead of the whole `body`.
	// This was done this way to make Google Tag Manager's widgets (like WalkMe) work correctly.
	// This is a known issue of Elm 0.19+ with no official solution, but this hack appears to work well.
	//
	// https://discourse.elm-lang.org/t/fullscreen-elm-app-in-0-19-childnode-issue-reopened/3174
	StringReplacePlugin.replace({
	replacements: [
	{
	pattern: /var bodyNode = _VirtualDom_doc.body;/gi,
	replacement: function (match, p1, offset, string) {
	return "var bodyNode = _VirtualDom_doc.getElementById('elm-root');"
	}
	},
	// If you compile the code without --optimize, the line we want to replace looks like this:
	//
	// var nextNode = _VirtualDom_node('body')(_List_Nil)(doc.body);
	//
	// But with --optimize on, Elm will replace the `body` identifier in doc.body by a minified one, like `doc.e3`, `doc.f1`, etc.
	// This is done by the __$body here: https://github.com/elm/browser/blob/1.0.2/src/Elm/Kernel/Browser.js#L83.
	//
	// To make this work, we're using a regex to capture that identifier and we rebuild the line we want with it,
	// replacing the`<body>` tag with a`<div>`.
	{
	pattern: /var nextNode = _VirtualDom_node\('body'\)\(_List_Nil\)\(doc\.(\w*)\);/gi,
	replacement: function (match, docBodyIdentifier) {
	return (
	"var nextNode = _VirtualDom_node('div')(_List_Nil)(doc." +
	docBodyIdentifier +
	');'
	)
	}
	}
	]
	})
	]
	}
	]
	},
	/// other config
	\|