You probably need to upgrade your npm packages…

install this…

https://www.npmjs.com/package/npm-check-updates

then, from assets…

$ cd assets
$ ncu -u

and add a babel.config.js file that looks like this

module.exports = api => {
  api.cache(true);

  const presets = [
    '@babel/preset-env',
  ]
  const plugins = [
  ]

  return {
    presets,
    plugins
  };
}

If you can give similar suggestions that use vanilla npm commands instead, you will help a much larger portion of readers at more skill/comfort/familiarity levels. Giving black-box advice has similar concerns to curl | bash.

ok,

$ mix phx.new -v
Phoenix v1.4.10
$ mix phx.new koko
$ cd koko/assets
$ npm outdated
Package                             Current  Wanted  Latest  Location
copy-webpack-plugin                   4.6.0   4.6.0   5.0.5  global
css-loader                            2.1.1   2.1.1   3.2.1  global
mini-css-extract-plugin               0.4.5   0.4.5   0.8.0  global
optimize-css-assets-webpack-plugin    4.0.3   4.0.3   5.0.3  global
uglifyjs-webpack-plugin               1.3.0   1.3.0   2.2.0  global
webpack                               4.4.0   4.4.0  4.41.2  global
webpack-cli                           2.1.5   2.1.5  3.3.10  global

returns the list of outdated packages, then just update the versions of packages You want in packages.json and run npm install.

Thanks @kokolegorille for showing me that I only had to do an upgrade for my packages.json file.
I use yarn and also ran previously before posting this thread this command yarn upgrade. But it appears that this command will not ignore ranges.
yarn upgrade --latest will install the latest verisons without worrying about the constraints.

Full list of yarn upgrade doc

Hi I am having the same problem (getting npm audit warnings about serialize-javascript which is depended on by uglifyjs-webpack-plugin)

Latest version of the deprecated lib uglifyjs-webpack-plugin is 2.2.0 and its package-lock.json specifies dependancy "serialize-javascript": "^1.7.0" which is installed by npm as "version": "1.9.1" .

I have tested this with a newly generated phoenix 1.4.9 project using npm audit after updating uglifyjs-webpack-plugin to 2.2.0 and re-installing all node modules.

What is most strange about this for me is that this uglifyjs-webpack-plugin shouldn’t be appearing at all in our generated projects! See this PR Switch from uglifyjs-webpack-plugin to terser-webpack-plugin by sfusato · Pull Request #3189 · phoenixframework/phoenix · GitHub which was merged on 11 Dec 2018. Phoenix 1.4.9 was released on 4 July 2019.

I don’t know why the generated projects are using the deprecated lib still but I fixed it manually by replicating the work done in that PR on my local project. It is very easy - only 3 lines in the whole project need changing. See here: Switch from uglifyjs-webpack-plugin to terser-webpack-plugin by sfusato · Pull Request #3189 · phoenixframework/phoenix · GitHub

For anyone who, for whatever reason, wants to stick with the versions specified by Phoenix, but update to the latest compatible minor/patch versions, I’ve found this to be a simple, no-stress approach:

cd "path/to/my_app_web/assets"
rm package-lock.json
rm -rf node_modules
npm install --silent --no-progress

package.json remains unchanged, package-lock.json is updated and can be committed to version control, and, as of today with Phoenix 1.4.16, npm audit finds 0 vulnerabilities.

Here’s a Bash script to perform that for multiple web apps in an umbrella project, to be placed in and run from the umbrella project’s root directory.

#!/usr/bin/env bash
set -o errexit

# Updates npm packages to latest available according to package.json.

web_apps_with_assets=(
	"my_app_web"
	"my_app_members_web"
	"my_app_admin_web"
)

bold=$(tput bold)
normal=$(tput sgr0)

# Change directory to that of this script
cd "${0%/*}"

for app in "${web_apps_with_assets[@]}"; do
	(
		echo -e "\n${bold}${app}${normal}"
		cd "apps/${app}/assets"
		rm package-lock.json
		rm -rf node_modules
		npm install --silent --no-progress
	)
done