Phoenix LV JS build issues after upgrade

I upgraded a Phoenix application to the newest version (Phoenix 1.6, LV 0.17.6) and tested the app locally. Everything worked as intended until I built the assets, I don’t have much of a background dealing with FE tech, so I am hoping this is easy for someone. The project uses some react, but that will be replaced with LV in the future.

error for tldr

ERROR in /code/code/code_gifts/~/phoenix_live_view/priv/static/phoenix_live_view.esm.js
Module parse failed: /code/code/code_gifts/node_modules/phoenix_live_view/priv/static/phoenix_live_view.esm.js Unexpected token (1764:19)
You may need an appropriate loader to handle this file type.
|   }
|   cloneMerge(target, source) {
|     let merged = { ...target, ...source };
|     for (let key in merged) {
|       let val = source[key];
 @ ./js/app.js 225:0-43
 @ multi ./css/app.scss ./js/app.js

.babelrc

{
  "plugins": [
    "transform-class-properties"
  ],
  "presets": [
    ["es2015", { "modules": false }],
    "react"
  ],
  "env": {
    "development": {
      "presets": [
      ]
    }
  }
}

phoenix_static_buildpack.config

clean_cache=false
node_version=14.18.3

asset build steps

NODE_ENV=production ./node_modules/.bin/webpack --display-error-details
mix phx.digest

Yarn is used to install the packages, to update the Phoenix JS packages I ran yarn:

❯ yarn        
yarn install v1.22.17
info No lockfile found.
[1/4] Resolving packages...
warning axios@0.15.3: Critical security vulnerability fixed in v0.21.1. For more information, see https://github.com/axios/axios/pull/3410
warning babel-runtime > core-js@2.6.12: core-js@<3.4 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.
warning react-dropzone > attr-accept > core-js@2.6.12: core-js@<3.4 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.
warning react-js-pagination > react > fbjs > core-js@1.2.7: core-js@<3.4 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.
warning redux-devtools@3.7.0: Package moved to @redux-devtools/core.
warning redux-devtools > redux-devtools-instrument@1.10.0: Package moved to @redux-devtools/instrument.
warning babel-core > babel-runtime > core-js@2.6.12: core-js@<3.4 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.
warning babel-core > babel-register > core-js@2.6.12: core-js@<3.4 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.
warning babel-preset-es2015@6.22.0: 🙌  Thanks for using Babel: we recommend using babel-preset-env now: please read https://babeljs.io/env to update!
warning extract-text-webpack-plugin@2.1.2: Deprecated. Please use https://github.com/webpack-contrib/mini-css-extract-plugin
warning node-sass > request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
warning node-sass > node-gyp > request@2.88.2: request has been deprecated, see https://github.com/request/request/issues/3142
warning node-sass > node-gyp > tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.
warning node-sass > request > har-validator@5.1.5: this library is no longer supported
warning node-sass > request > uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
warning testcafe > testcafe-reporter-dashboard > uuid@3.3.3: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
warning testcafe > callsite-record > @types/error-stack-parser@2.0.0: This is a stub types definition for error-stack-parser (https://github.com/stacktracejs/error-stack-parser). error-stack-parser provides its own type definitions, so you don't need @types/error-stack-parser installed!
warning testcafe > testcafe-hammerhead > css > source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
warning testcafe > testcafe-hammerhead > css > urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
warning testcafe > testcafe-hammerhead > css > source-map-resolve > urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
warning testcafe > testcafe-hammerhead > css > source-map-resolve > resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
warning testcafe > testcafe-hammerhead > css > source-map-resolve > source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
warning webpack > watchpack > watchpack-chokidar2 > chokidar@2.1.8: Chokidar 2 does not receive security updates since 2019. Upgrade to chokidar 3 with 15x fewer dependencies
warning webpack > node-libs-browser > url > querystring@0.2.0: The querystring API is considered Legacy. new code should use the URLSearchParams API instead.
warning webpack > watchpack > watchpack-chokidar2 > chokidar > fsevents@1.2.13: fsevents 1 will break on node v14+ and could be using insecure binaries. Upgrade to fsevents 2.
warning webpack > watchpack > watchpack-chokidar2 > chokidar > braces > snapdragon > source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
[2/4] Fetching packages...
[3/4] Linking dependencies...
warning " > redux-thunk@2.4.1" has incorrect peer dependency "redux@^4".
warning " > file-loader@4.3.0" has incorrect peer dependency "webpack@^4.0.0".
[4/4] Building fresh packages...
success Saved lockfile.
Done in 20.67s.

Next was the start of the asset build process:

❯ NODE_ENV=production ./node_modules/.bin/webpack --display-error-details
nodeEnv production
isProd true
Hash: 4b77e64b03278c44833d
Version: webpack 2.2.1
Time: 11562ms
                       Asset       Size  Chunks                    Chunk Names
              /js/mapdata.js       7 kB          [emitted]         
                /js/usmap.js     228 kB          [emitted]         
                js/csvApp.js     424 kB       0  [emitted]  [big]  csvApp
        js/adminSearchApp.js     239 kB       1  [emitted]         adminSearchApp
               js/teamApp.js     309 kB       2  [emitted]  [big]  teamApp
             js/tickerApp.js     548 kB       3  [emitted]  [big]  tickerApp
              js/geckoApp.js    1.34 MB       4  [emitted]  [big]  geckoApp
           js/contactsApp.js     242 kB       5  [emitted]         contactsApp
     js/recipientsBuilder.js     212 kB       6  [emitted]         recipientsBuilder
                   js/app.js     115 kB       7  [emitted]         app
js/individualOrTeamToggle.js     123 kB       8  [emitted]         individualOrTeamToggle
                js/redeem.js     126 kB       9  [emitted]         redeem
             js/simplemap.js  728 bytes      10  [emitted]         simplemap
                js/mapApp.js    38.1 kB      11  [emitted]         mapApp
             js/marketing.js  583 bytes      12  [emitted]         marketing
                /css/app.css     192 kB       7  [emitted]         app
          /css/marketing.css    92.5 kB      12  [emitted]         marketing
             /css/redeem.css     219 kB       9  [emitted]         redeem
           /css/geckoApp.css  676 bytes       4  [emitted]         geckoApp
         js/tickerApp.js.map     630 kB       3  [emitted]         tickerApp
          js/geckoApp.js.map    1.66 MB       4  [emitted]         geckoApp
       /css/geckoApp.css.map   94 bytes       4  [emitted]         geckoApp
               js/app.js.map     207 kB       7  [emitted]         app
            /css/app.css.map   89 bytes       7  [emitted]         app
         /css/redeem.css.map   92 bytes       9  [emitted]         redeem
            js/mapApp.js.map    47.2 kB      11  [emitted]         mapApp
      /css/marketing.css.map   95 bytes      12  [emitted]         marketing
   [1] multi ./css/app.scss ./js/app.js 40 bytes {7} [built]
   [2] multi ./css/gecko.scss ./js/gecko-app/index.js 40 bytes {4} [built]
   [3] multi ./css/marketing.scss 28 bytes {12} [built]
   [4] multi ./css/redeem.scss ./js/redeem.js 40 bytes {9} [built]
   [5] multi ./js/admin-search-app/index.js 28 bytes {1} [built]
   [6] multi ./js/contacts-app/index.js 28 bytes {5} [built]
   [7] multi ./js/csv-app/index.js 28 bytes {0} [built]
   [8] multi ./js/individual-or-team-toggle/index.js 28 bytes {8} [built]
   [9] multi ./js/map-app/index.js 28 bytes {11} [built]
  [10] multi ./js/recipients-builder/index.js 28 bytes {6} [built]
  [11] multi ./js/simplemap/mapdata.js ./js/simplemap/usmap.js 40 bytes {10} [built]
  [12] multi ./js/team-app/index.js 28 bytes {2} [built]
  [13] multi ./js/ticker-app/index.js 28 bytes {3} [built]
[./css/app.scss] ./css/app.scss 41 bytes {7} [built]
[./css/gecko.scss] ./css/gecko.scss 41 bytes {4} [built]
    + 558 hidden modules

WARNING in /code/code/code_gifts/~/moment/locale/en-SG.js
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:
* /code/code/code_gifts/node_modules/moment/locale/en-SG.js
    Used by 2 module(s), i. e.
    /code/code/code_gifts/node_modules/moment/locale /^\.\/.*$/
* /code/code/code_gifts/node_modules/moment/locale/en-sg.js
    Used by 2 module(s), i. e.
    /code/code/code_gifts/node_modules/moment/locale /^\.\/.*$/

ERROR in /code/code/code_gifts/~/phoenix_live_view/priv/static/phoenix_live_view.esm.js
Module parse failed: /code/code/code_gifts/node_modules/phoenix_live_view/priv/static/phoenix_live_view.esm.js Unexpected token (1764:19)
You may need an appropriate loader to handle this file type.
|   }
|   cloneMerge(target, source) {
|     let merged = { ...target, ...source };
|     for (let key in merged) {
|       let val = source[key];
 @ ./js/app.js 225:0-43
 @ multi ./css/app.scss ./js/app.js

ERROR in js/tickerApp.js from UglifyJs
Unexpected token: operator (>) [js/tickerApp.js:5597,23]

ERROR in js/geckoApp.js from UglifyJs
Unexpected token: operator (>) [js/geckoApp.js:37653,23]

ERROR in js/app.js from UglifyJs
Unexpected token: operator (>) [js/app.js:81,23]

ERROR in js/mapApp.js from UglifyJs
Unexpected token: operator (>) [js/mapApp.js:81,23]
Child extract-text-webpack-plugin:
    [../../node_modules/css-loader/index.js!../../node_modules/sass-loader/lib/loader.js!./css/marketing.scss] /code/code/code_gifts/~/css-loader!/code/code/code_gifts/~/sass-loader/lib/loader.js!./css/marketing.scss 92.6 kB {0} [built]
    [../../node_modules/css-loader/lib/css-base.js] /code/code/code_gifts/~/css-loader/lib/css-base.js 1.51 kB {0} [built]
Child extract-text-webpack-plugin:
    [../../node_modules/css-loader/index.js!../../node_modules/sass-loader/lib/loader.js!./css/redeem.scss] /code/code/code_gifts/~/css-loader!/code/code/code_gifts/~/sass-loader/lib/loader.js!./css/redeem.scss 219 kB {0} [built]
    [../../node_modules/css-loader/lib/css-base.js] /code/code/code_gifts/~/css-loader/lib/css-base.js 1.51 kB {0} [built]
Child extract-text-webpack-plugin:
    [../../node_modules/css-loader/index.js!../../node_modules/sass-loader/lib/loader.js!./css/app.scss] /code/code/code_gifts/~/css-loader!/code/code/code_gifts/~/sass-loader/lib/loader.js!./css/app.scss 192 kB {0} [built]
    [../../node_modules/css-loader/lib/css-base.js] /code/code/code_gifts/~/css-loader/lib/css-base.js 1.51 kB {0} [built]
Child extract-text-webpack-plugin:
    [../../node_modules/css-loader/index.js!../../node_modules/sass-loader/lib/loader.js!./css/gecko.scss] /code/code/code_gifts/~/css-loader!/code/code/code_gifts/~/sass-loader/lib/loader.js!./css/gecko.scss 760 bytes {0} [built]
    [../../node_modules/css-loader/lib/css-base.js] /code/code/code_gifts/~/css-loader/lib/css-base.js 1.51 kB {0} [built]

I’ve done some searching on the first error but nothing has worked yet. Has anyone ran into this when upgrading their apps?

The first thing to do with any build issue is to rm -rf deps _build node_modules and then pull things down fresh. Give that a whirl and let us know if there are still issues.

deps and _build were already cleaned and built during the Phoenix upgrade process, but I ran them again.

I removed node_modules, ran yarn (output below), and the asset build step (output below). Unfortunately, the error persists.

❯ yarn
yarn install v1.22.17
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
warning " > redux-thunk@2.4.1" has incorrect peer dependency "redux@^4".
warning " > file-loader@4.3.0" has incorrect peer dependency "webpack@^4.0.0".
[4/4] Building fresh packages...
Done in 4.87s.
❯ NODE_ENV=production ./node_modules/.bin/webpack --display-error-details
nodeEnv production
isProd true
Hash: 36db6cb1f5775f65c078
Version: webpack 2.2.1
Time: 11619ms
                       Asset       Size  Chunks                    Chunk Names
              /js/mapdata.js       7 kB          [emitted]         
                /js/usmap.js     228 kB          [emitted]         
                js/csvApp.js     424 kB       0  [emitted]  [big]  csvApp
        js/adminSearchApp.js     239 kB       1  [emitted]         adminSearchApp
               js/teamApp.js     309 kB       2  [emitted]  [big]  teamApp
             js/tickerApp.js     548 kB       3  [emitted]  [big]  tickerApp
              js/geckoApp.js    1.33 MB       4  [emitted]  [big]  geckoApp
           js/contactsApp.js     242 kB       5  [emitted]         contactsApp
     js/recipientsBuilder.js     212 kB       6  [emitted]         recipientsBuilder
                   js/app.js     115 kB       7  [emitted]         app
js/individualOrTeamToggle.js     123 kB       8  [emitted]         individualOrTeamToggle
                js/redeem.js     126 kB       9  [emitted]         redeem
             js/simplemap.js  728 bytes      10  [emitted]         simplemap
                js/mapApp.js    38.1 kB      11  [emitted]         mapApp
             js/marketing.js  583 bytes      12  [emitted]         marketing
                /css/app.css     192 kB       7  [emitted]         app
          /css/marketing.css    92.5 kB      12  [emitted]         marketing
             /css/redeem.css     219 kB       9  [emitted]         redeem
           /css/geckoApp.css  676 bytes       4  [emitted]         geckoApp
         js/tickerApp.js.map     630 kB       3  [emitted]         tickerApp
          js/geckoApp.js.map    1.65 MB       4  [emitted]         geckoApp
       /css/geckoApp.css.map   94 bytes       4  [emitted]         geckoApp
               js/app.js.map     207 kB       7  [emitted]         app
            /css/app.css.map   89 bytes       7  [emitted]         app
         /css/redeem.css.map   92 bytes       9  [emitted]         redeem
            js/mapApp.js.map    47.2 kB      11  [emitted]         mapApp
      /css/marketing.css.map   95 bytes      12  [emitted]         marketing
   [1] multi ./css/app.scss ./js/app.js 40 bytes {7} [built]
   [2] multi ./css/gecko.scss ./js/gecko-app/index.js 40 bytes {4} [built]
   [3] multi ./css/marketing.scss 28 bytes {12} [built]
   [4] multi ./css/redeem.scss ./js/redeem.js 40 bytes {9} [built]
   [5] multi ./js/admin-search-app/index.js 28 bytes {1} [built]
   [6] multi ./js/contacts-app/index.js 28 bytes {5} [built]
   [7] multi ./js/csv-app/index.js 28 bytes {0} [built]
   [8] multi ./js/individual-or-team-toggle/index.js 28 bytes {8} [built]
   [9] multi ./js/map-app/index.js 28 bytes {11} [built]
  [10] multi ./js/recipients-builder/index.js 28 bytes {6} [built]
  [11] multi ./js/simplemap/mapdata.js ./js/simplemap/usmap.js 40 bytes {10} [built]
  [12] multi ./js/team-app/index.js 28 bytes {2} [built]
  [13] multi ./js/ticker-app/index.js 28 bytes {3} [built]
[./css/app.scss] ./css/app.scss 41 bytes {7} [built]
[./css/gecko.scss] ./css/gecko.scss 41 bytes {4} [built]
    + 557 hidden modules

ERROR in /code/code/code_gifts/~/phoenix_live_view/priv/static/phoenix_live_view.esm.js
Module parse failed: /code/code/code_gifts/node_modules/phoenix_live_view/priv/static/phoenix_live_view.esm.js Unexpected token (1764:19)
You may need an appropriate loader to handle this file type.
|   }
|   cloneMerge(target, source) {
|     let merged = { ...target, ...source };
|     for (let key in merged) {
|       let val = source[key];
 @ ./js/app.js 225:0-43
 @ multi ./css/app.scss ./js/app.js

ERROR in js/tickerApp.js from UglifyJs
Unexpected token: operator (>) [js/tickerApp.js:5597,23]

ERROR in js/geckoApp.js from UglifyJs
Unexpected token: operator (>) [js/geckoApp.js:37579,23]

ERROR in js/app.js from UglifyJs
Unexpected token: operator (>) [js/app.js:81,23]

ERROR in js/mapApp.js from UglifyJs
Unexpected token: operator (>) [js/mapApp.js:81,23]
Child extract-text-webpack-plugin:
    [../../node_modules/css-loader/index.js!../../node_modules/sass-loader/lib/loader.js!./css/marketing.scss] /code/code/code_gifts/~/css-loader!/code/code/code_gifts/~/sass-loader/lib/loader.js!./css/marketing.scss 92.6 kB {0} [built]
    [../../node_modules/css-loader/lib/css-base.js] /code/code/code_gifts/~/css-loader/lib/css-base.js 1.51 kB {0} [built]
Child extract-text-webpack-plugin:
    [../../node_modules/css-loader/index.js!../../node_modules/sass-loader/lib/loader.js!./css/gecko.scss] /code/code/code_gifts/~/css-loader!/code/code/code_gifts/~/sass-loader/lib/loader.js!./css/gecko.scss 760 bytes {0} [built]
    [../../node_modules/css-loader/lib/css-base.js] /code/code/code_gifts/~/css-loader/lib/css-base.js 1.51 kB {0} [built]
Child extract-text-webpack-plugin:
    [../../node_modules/css-loader/index.js!../../node_modules/sass-loader/lib/loader.js!./css/redeem.scss] /code/code/code_gifts/~/css-loader!/code/code/code_gifts/~/sass-loader/lib/loader.js!./css/redeem.scss 219 kB {0} [built]
    [../../node_modules/css-loader/lib/css-base.js] /code/code/code_gifts/~/css-loader/lib/css-base.js 1.51 kB {0} [built]
Child extract-text-webpack-plugin:
    [../../node_modules/css-loader/index.js!../../node_modules/sass-loader/lib/loader.js!./css/app.scss] /code/code/code_gifts/~/css-loader!/code/code/code_gifts/~/sass-loader/lib/loader.js!./css/app.scss 192 kB {0} [built]
    [../../node_modules/css-loader/lib/css-base.js] /code/code/code_gifts/~/css-loader/lib/css-base.js 1.51 kB {0} [built]

A long shot here since I’ve moved away from webpack and babel, but can you use preset-env instead of es2015 (which, IIRC, was deprecated) and see if it works?