<turbo-stream action="append" target="posts_list"><template>    <div class="postbit" id="153752" data-post-id="153752">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="romenigld" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/romenigld/120/6200_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  romenigld
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Sorry, I tried right now for check if the updates run the app nice.<br>
And it wasn’t good thing update this babel core.<br>
Now when I try to run the server the app with LiveView don’t work correctly and it complains for this:</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">$ 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)&gt;
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" =&gt; "Donostia"}
</code></pre>
<p>Now for rollback it just needed to put the other version and <code>npm update</code>?</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="153752" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/npm-audit-package-tar/27276/12">Post #11</a>
	                </div>
	            </div>
              <div id="likers-container-153752" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="153752"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #11"></div>
  </section>
</div>
    <div class="postbit" id="153755" data-post-id="153755">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="kokolegorille" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/kokolegorille/120/4784_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  kokolegorille
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>As it is a major change (6 → 7), You need to adjust babel configuration…</p>
<p>This is the version I use</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">"@babel/core": "^7.6.4",
</code></pre>
<p>But You need to follow babel upgrade guide <a href="https://babeljs.io/docs/en/v7-migration" class="inline-onebox" rel="nofollow">Upgrade to Babel 7 · Babel</a></p>
<p>Now, You MUST have a file babel.config.js, here is how it looks</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">module.exports = api =&gt; {
  api.cache(true);

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

  return {
    presets,
    plugins
  };
}
</code></pre> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="153755" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/npm-audit-package-tar/27276/13">Post #12</a>
	                </div>
	            </div>
              <div id="likers-container-153755" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="153755"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #12"></div>
  </section>
</div>
    <div class="postbit" id="153758" data-post-id="153758">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="romenigld" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/romenigld/120/6200_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  romenigld
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Thank you for reply <a class="mention" href="/u/kokolegorille" rel="nofollow">@kokolegorille</a>, but I was thinking it’s a lot of things to do.<br>
An maybe it will be better if anyone can do a pull request for this project and everybody can update by git or download?</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="153758" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/npm-audit-package-tar/27276/14">Post #13</a>
	                </div>
	            </div>
              <div id="likers-container-153758" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="153758"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #13"></div>
  </section>
</div>
    <div class="postbit" id="153759" data-post-id="153759">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="kokolegorille" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/kokolegorille/120/4784_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  kokolegorille
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Javascript is always changing, and it would be hard to track down JS packages for Phoenix team…</p>
<p>Between 1.3 and 1.4 Phoenix moved from brunch to webpack. Probably the next Phoenix will include those babel changes.</p>
<p>There is a post, which describe the whole process.</p>
<aside class="quote quote-modified" data-post="22" data-topic="23935">
  <div class="title">
    <div class="quote-controls"></div>
    <img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/peerreynders/48/5826_2.png" class="avatar">
    <div class="quote-title__text-content">
      <a href="https://forum.elixirforum.com/t/connecting-react-with-phoenix/23935/22" rel="nofollow">Connecting React with Phoenix</a> <a class="badge-category__wrapper " href="/c/questions-help/questions/53" rel="nofollow"><span data-category-id="53" style="--category-badge-color: #C14BFB; --category-badge-text-color: #000000; --parent-category-badge-color: #C14BFB;" data-parent-category-id="171" data-drop-close="true" class="badge-category --style-square --has-parent" title="Elixir Questions / Help"><span class="badge-category__name">Questions</span></span></a>
    </div>
  </div>
  <blockquote>
    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 &amp;&amp; npm install &amp;&amp; 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 …
  </blockquote>
</aside>
 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="153759" data-batch-url="/posts/batch_likers">
                        1
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/npm-audit-package-tar/27276/15">Post #14</a>
	                </div>
	            </div>
              <div id="likers-container-153759" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="153759"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-most-liked cat-most-liked" title="One of the top 2 liked posts in this thread!"></div>
  </section>
</div>
</template></turbo-stream><turbo-stream action="replace" target="load-more-container"><template><div id="load-more-container" class="load-more-container">
    <span class="all-loaded">— All posts loaded —</span>
</div></template></turbo-stream>