Npm audit Package tar

[romenigld]

Hello Guys,
I’m reading the ebook Programming Phoenix 1.4 and in the subchapter “Phoenix LiveView” of the chapter “What’s Next?” I cloned the Phoenix LiveView Example.
So I made the steps for run and when I run the npm install. I have a warning for fix the npm audit.

So I try to fix like recommend the steps and with --force.
But it complains for 1 vulnerability.

 $ npm audit

                       === npm audit security report ===

┌──────────────────────────────────────────────────────────────────────────────┐
│                                Manual Review                                 │
│            Some vulnerabilities require your attention to resolve            │
│                                                                              │
│         Visit https://go.npm.me/audit-guide for additional guidance          │
└──────────────────────────────────────────────────────────────────────────────┘
┌───────────────┬──────────────────────────────────────────────────────────────┐
│ High          │ Arbitrary File Overwrite                                     │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Package       │ tar                                                          │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Patched in    │ >=2.2.2 <3.0.0 || >=4.4.2                                    │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Dependency of │ webpack [dev]                                                │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ Path          │ webpack > watchpack > chokidar > fsevents > node-pre-gyp >   │
│               │ tar                                                          │
├───────────────┼──────────────────────────────────────────────────────────────┤
│ More info     │ https://npmjs.com/advisories/803                             │
└───────────────┴──────────────────────────────────────────────────────────────┘
found 1 high severity vulnerability in 6579 scanned packages
  1 vulnerability requires manual review. See the full report for details.

I don’t know what do. I need help!?

[egze]

Don‘t know how to fix it, Sorry.

But also I wouldn‘t worry about it too much. For production app you won‘t be running node, webpack or this tar package. The scripts will be compiled to 1 JS file and served statically.

[romenigld]

So I ignore and continue?
thank’s for reply @egze.

[egze]

Yepp. I would ignore it.

[romenigld]

@egze

Yepp. I would ignore it.

[kokolegorille]

There is package that helps You update npm package…

tjunnone/npm-check-updates

You might use it to solve this issue.

[romenigld]

Nice package @kokolegorille. Thank you for reply!
This NCU work’s, and do it automatically.
Here is what happened when I tried.

$ ncu
Checking /Users/romenigld/workspace/phoenix/Programming Phoenix 1.4/phoenix_live_view_example/assets/package.json
[====================] 12/12 100%

 babel-core           ^6.26.0  →  ^6.26.3
 babel-loader          ^7.1.5  →   ^8.0.6
 babel-preset-env      ^1.6.1  →   ^1.7.0
 copy-webpack-plugin   ^4.6.0  →   ^5.0.5
 style-loader         ^0.20.2  →   ^1.0.1
 webpack                4.0.0  →   4.41.2

Run ncu -u to upgrade package.json

$ ncu -u
Upgrading /Users/romenigld/workspace/phoenix/Programming Phoenix 1.4/phoenix_live_view_example/assets/package.json
[====================] 12/12 100%

 babel-core           ^6.26.0  →  ^6.26.3
 babel-loader          ^7.1.5  →   ^8.0.6
 babel-preset-env      ^1.6.1  →   ^1.7.0
 copy-webpack-plugin   ^4.6.0  →   ^5.0.5
 style-loader         ^0.20.2  →   ^1.0.1
 webpack                4.0.0  →   4.41.2

Run npm install to install new versions.

$  npm install

> fsevents@1.2.9 install /Users/romenigld/workspace/phoenix/Programming Phoenix 1.4/phoenix_live_view_example/assets/node_modules/fsevents
> node install

node-pre-gyp WARN Using needle for node-pre-gyp https download
[fsevents] Success: "/Users/romenigld/workspace/phoenix/Programming Phoenix 1.4/phoenix_live_view_example/assets/node_modules/fsevents/lib/binding/Release/node-v64-darwin-x64/fse.node" is installed via remote
npm WARN babel-loader@8.0.6 requires a peer of @babel/core@^7.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN assets No description

added 69 packages from 72 contributors, removed 7 packages, updated 93 packages, moved 2 packages and audited 7759 packages in 13.996s
found 0 vulnerabilities

[egze]

Seems that you still have a problem with @babel/core?

[romenigld]

Yes I just see this WARN now, I just saw the 0 vulnerabilities.
How can I install to the core 7?
thank’s for reply!

[egze]

Set the version in package.json and npm update.

[romenigld]

I tried to do like you told me. But I made a mistake, so rather than put npm update.
I put to run run npm instal and I get this error:

 npm install
npm ERR! code ETARGET
npm ERR! notarget No matching version found for babel-core@^7.0.0.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.

npm ERR! A complete log of this run can be found in:
npm ERR!     /Users/romenigld/.npm/_logs/2019-12-06T11_50_08_131Z-debug.log

So I was seeking for update this and what I do was:

$ npm install --save-dev @babel/core @babel/preset-env
npm WARN assets No description

+ @babel/preset-env@7.7.4
+ @babel/core@7.7.4
added 115 packages from 35 contributors and audited 8924 packages in 11.732s
found 0 vulnerabilities

$ npm install
npm WARN assets No description

audited 8924 packages in 5.238s
found 0 vulnerabilities

Anyway, thank you for help me @egze.

[romenigld]

Sorry, I tried right now for check if the updates run the app nice.
And it wasn’t good thing update this babel core.
Now when I try to run the server the app with LiveView don’t work correctly and it complains for this:

$ iex -S mix phx.server
Erlang/OTP 21 [erts-10.1.1] [source] [64-bit] [smp:4:4] [ds:4:4:10] [async-threads:1] [hipe]

[info] Running DemoWeb.Endpoint with cowboy 2.7.0 at 0.0.0.0:4000 (http)
[info] Access DemoWeb.Endpoint at http://localhost:4000
Interactive Elixir (1.9.2) - press Ctrl+C to exit (type h() ENTER for help)
iex(1)>
webpack is watching the files…

   1 module

ERROR in ./js/app.js
Module build failed (from ./node_modules/babel-loader/lib/index.js):
TypeError: /Users/romenigld/workspace/phoenix/Programming Phoenix 1.4/phoenix_live_view_example/assets/js/app.js: Cannot read property 'bindings' of null
    at Scope.moveBindingTo (/Users/romenigld/workspace/phoenix/Programming Phoenix 1.4/phoenix_live_view_example/assets/node_modules/@babel/traverse/lib/scope/index.js:822:13)
    at BlockScoping.updateScopeInfo (/Users/romenigld/workspace/phoenix/Programming Phoenix 1.4/phoenix_live_view_example/assets/node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:364:17)
    at BlockScoping.run (/Users/romenigld/workspace/phoenix/Programming Phoenix 1.4/phoenix_live_view_example/assets/node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:330:12)
    at PluginPass.BlockStatementSwitchStatementProgram (/Users/romenigld/workspace/phoenix/Programming Phoenix 1.4/phoenix_live_view_example/assets/node_modules/babel-plugin-transform-es2015-block-scoping/lib/index.js:70:24)
    at newFn (/Users/romenigld/workspace/phoenix/Programming Phoenix 1.4/phoenix_live_view_example/assets/node_modules/@babel/traverse/lib/visitors.js:179:21)
    at NodePath._call (/Users/romenigld/workspace/phoenix/Programming Phoenix 1.4/phoenix_live_view_example/assets/node_modules/@babel/traverse/lib/path/context.js:55:20)
    at NodePath.call (/Users/romenigld/workspace/phoenix/Programming Phoenix 1.4/phoenix_live_view_example/assets/node_modules/@babel/traverse/lib/path/context.js:42:17)
    at NodePath.visit (/Users/romenigld/workspace/phoenix/Programming Phoenix 1.4/phoenix_live_view_example/assets/node_modules/@babel/traverse/lib/path/context.js:90:31)
    at TraversalContext.visitQueue (/Users/romenigld/workspace/phoenix/Programming Phoenix 1.4/phoenix_live_view_example/assets/node_modules/@babel/traverse/lib/context.js:112:16)
    at TraversalContext.visitSingle (/Users/romenigld/workspace/phoenix/Programming Phoenix 1.4/phoenix_live_view_example/assets/node_modules/@babel/traverse/lib/context.js:84:19)
    at TraversalContext.visit (/Users/romenigld/workspace/phoenix/Programming Phoenix 1.4/phoenix_live_view_example/assets/node_modules/@babel/traverse/lib/context.js:140:19)
    at Function.traverse.node (/Users/romenigld/workspace/phoenix/Programming Phoenix 1.4/phoenix_live_view_example/assets/node_modules/@babel/traverse/lib/index.js:84:17)
    at traverse (/Users/romenigld/workspace/phoenix/Programming Phoenix 1.4/phoenix_live_view_example/assets/node_modules/@babel/traverse/lib/index.js:66:12)
    at transformFile (/Users/romenigld/workspace/phoenix/Programming Phoenix 1.4/phoenix_live_view_example/assets/node_modules/@babel/core/lib/transformation/index.js:119:29)
    at runSync (/Users/romenigld/workspace/phoenix/Programming Phoenix 1.4/phoenix_live_view_example/assets/node_modules/@babel/core/lib/transformation/index.js:48:5)
    at runAsync (/Users/romenigld/workspace/phoenix/Programming Phoenix 1.4/phoenix_live_view_example/assets/node_modules/@babel/core/lib/transformation/index.js:35:14)
    at process.nextTick (/Users/romenigld/workspace/phoenix/Programming Phoenix 1.4/phoenix_live_view_example/assets/node_modules/@babel/core/lib/transform.js:34:34)
    at process._tickCallback (internal/process/next_tick.js:61:11)
[debug] Live reload: priv/static/js/app.js
[debug] Live reload: priv/static/images/phoenix.png
[info] GET /
[debug] Processing with DemoWeb.PageController.index/2
  Parameters: %{"location" => "Donostia"}

Now for rollback it just needed to put the other version and npm update?

[kokolegorille]

As it is a major change (6 -> 7), You need to adjust babel configuration…

This is the version I use

"@babel/core": "^7.6.4",

But You need to follow babel upgrade guide https://babeljs.io/docs/en/v7-migration

Now, You MUST have a file babel.config.js, here is how it looks

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

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

  return {
    presets,
    plugins
  };
}

[romenigld]

Thank you for reply @kokolegorille, but I was thinking it’s a lot of things to do.
An maybe it will be better if anyone can do a pull request for this project and everybody can update by git or download?

[kokolegorille]

Javascript is always changing, and it would be hard to track down JS packages for Phoenix team…

Between 1.3 and 1.4 Phoenix moved from brunch to webpack. Probably the next Phoenix will include those babel changes.

There is a post, which describe the whole process.

Connecting React with Phoenix

For future reference: $ mix phx.new react_demo --no-ecto * creating react_demo/config/config.exs ... * creating react_demo/assets/static/robots.txt Fetch and install dependencies? [Yn] Y * running mix deps.get * running cd assets && npm install && node node_modules/webpack/bin/webpack.js --mode development * running mix deps.compile We are almost there! The following steps are missing: $ cd react_demo Start your Phoenix app with: $ mix phx.server You can also run your app inside …