UglifyJS breaking HTTP request? Am I missing something?

praveenperera 2018-03-20 04:12:40 UTC #1

I ran into an interesting problem today. On my dev environment authentication was working fine. However on production the “Authorization” header was not being sent. After hours of debug CORS and other related things, I decided to check out my webpack config. It was created by ejecting: create-elm-app

From there I disabled the UglifyJS plugin and everything worked as expected. I doubled checked, enabling UglifyJS broke the HTTP request. I then undid all the other changes I made attempting to debug, and tried again. As far as I can tell, UglifyJS was the issue. I don’t know if this is relevant but I am using HttpBuilder to builder request.

I was wondering if I missed something or did I just find a weird quirk of UglifyJS interacting with Elm.

Here is my webpack config, on line 219 you can see the UglifyJS plugin being commented out.

gist.github.com

https://gist.github.com/praveenperera/f048f21eef1daef98a4c8f6cb834d2af

webpack.config.prod.js

"use strict";

const autoprefixer = require("autoprefixer");
const SWPrecacheWebpackPlugin = require("sw-precache-webpack-plugin");
const DefinePlugin = require("webpack/lib/DefinePlugin");
const UglifyJsPlugin = require("webpack/lib/optimize/UglifyJsPlugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const AssetsPlugin = require("assets-webpack-plugin");
const InterpolateHtmlPlugin = require("react-dev-utils/InterpolateHtmlPlugin");

This file has been truncated. show original

lydell 2018-03-20 12:21:04 UTC #2

Perhaps you could try commenting out the options passed to the uglify plugin and see if it works? Then you could enable them again one by one to narrow down the issue. Perhaps one of those “pure_funcs” listed is the issue?

xtian 2018-03-20 16:42:34 UTC #3

My guess would be something having to do with dead code elimination. I would try disabling that (dead_code: false)

praveenperera 2018-03-20 20:55:45 UTC #4

I actually tried this before, and I tried again just now. No luck

 new UglifyJsPlugin({
      compress: {
        warnings: false,
        dead_code: false,
        pure_funcs: [
          "_elm_lang$core$Native_Utils.update",
          "A2",
          "A3",
          "A4",
          "A5",
          "A6",
          "A7",
          "A8",
          "A9",
          "F2",
          "F3",
          "F4",
          "F5",
          "F6",
          "F7",
          "F8",
          "F9",
        ],
      },
    }),

EDIT: I was wrong. I thought setting dead_code: false would disable dead code elimination but apparently not.

Solution:

 /* Minify the compiled JavaScript. */
 new UglifyJsPlugin({
   compress: {
     warnings: false,
   },
   output: {
     comments: false,
   },
 }),

Source: https://github.com/halfzebra/create-elm-app/issues/243