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?