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


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="catra" src="/assets/icons/user-9f439610.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  catra
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Thank you for your replying <a class="mention" href="/u/cvkmohan" rel="nofollow">@cvkmohan</a>. Indeed, the package looks really good. I tried to set it up as a dependency in my project and I got a mismatch between dependencies, as you can see below. Any thoughts?</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">Failed to use "phoenix_html" (versions 3.0.0 and 3.0.1) because
  apps/habitus_web/mix.exs requires ~&gt; 3.0
  ex_fontawesome (version 0.3.0) requires ~&gt; 2.14
  phoenix_ecto (version 4.4.0) requires ~&gt; 2.14.2 or ~&gt; 3.0
  phoenix_live_view (version 0.16.0) requires ~&gt; 3.0.0
  phoenix_live_view (version 0.16.1) requires ~&gt; 3.0


Failed to use "phoenix_html" (versions 3.0.0 to 3.0.2) because
  apps/habitus_web/mix.exs requires ~&gt; 3.0
  ex_fontawesome (version 0.3.0) requires ~&gt; 2.14
  phoenix_ecto (version 4.4.0) requires ~&gt; 2.14.2 or ~&gt; 3.0
  phoenix_live_view (version 0.16.1) requires ~&gt; 3.0


Failed to use "phoenix_html" (version 3.0.2) because
  apps/habitus_web/mix.exs requires ~&gt; 3.0
  ex_fontawesome (version 0.3.0) requires ~&gt; 2.14
  phoenix_ecto (version 4.4.0) requires ~&gt; 2.14.2 or ~&gt; 3.0
  phoenix_live_view (version 0.16.0) requires ~&gt; 3.0.0

** (Mix) Hex dependency resolution failed, change the version requirements of your dependencies or unlock them (by using mix deps.update or mix deps.unlock). If you are unable to resolve the conflicts you can try overriding with {:dependency, "~&gt; 1.0", override: true}
</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="224444" 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/phoenix-1-6-0-rc-0-released/41939/36">Post #35</a>
	                </div>
	            </div>
              <div id="likers-container-224444" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="224444"
                     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 #35"></div>
  </section>
</div>
    <div class="postbit" id="224445" data-post-id="224445">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I think <a class="mention" href="/u/miguels" rel="nofollow">@miguels</a> needs to update the dependency packages and give a new release. Let us hope he notices this.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="224445" 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/phoenix-1-6-0-rc-0-released/41939/37">Post #36</a>
	                </div>
	            </div>
              <div id="likers-container-224445" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="224445"
                     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 #36"></div>
  </section>
</div>
    <div class="postbit" id="224479" data-post-id="224479">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I see that the topic of {Node, NPM, webpack} → esbuild switch is raising some questions and doubts. I myself have had to wrap my head around all the pros and cons in order to figure out my own go-to default scenario for new &amp; existing Phoenix apps. Which led me to the following writeup: <a href="https://cloudless.studio/wrapping-your-head-around-assets-in-phoenix-1-6" rel="noopener nofollow ugc"> Wrapping your head around assets in Phoenix 1.6</a>.</p>
<p>To summarize, I’m all in for esbuild but not so much for lack of npm. At the same time I 100% understand the Phoenix team’s reasoning. Now for the productive part, the article includes not just the discussion on pros &amp; cons of the transition backed by real-world examples, but perhaps most importantly - a complete guide for turning 1.6 default app’s assets to esbuild backed by npm (or yarn) which is IMO the most reasonable default - <strong>for those that see it fit</strong>. <img src="https://forum.elixirforum.com/images/emoji/apple/slight_smile.png?v=15" title=":slight_smile:" class="emoji" alt=":slight_smile:" loading="lazy" width="20" height="20"></p>
<p>I hope <a class="mention" href="/u/chrismccord" rel="nofollow">@chrismccord</a> &amp; friends that you’ll find this writeup as a useful &amp; productive addition for this major transition, and one that by no means does neglect the efforts of everyone behind <strong>this awesome new Phoenix release</strong>.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="224479" data-batch-url="/posts/batch_likers">
                        12
                      </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/phoenix-1-6-0-rc-0-released/41939/38">Post #37</a>
	                </div>
	            </div>
              <div id="likers-container-224479" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="224479"
                     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 #37"></div>
  </section>
</div>
    <div class="postbit" id="224493" data-post-id="224493">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="karolsluszniak" data-post="38" data-topic="41939" data-full="true">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/karolsluszniak/48/1627_2.png" class="avatar"> karolsluszniak:</div>
<blockquote>
<p>To summarize, I’m all in for esbuild but not so much for lack of npm.</p>
</blockquote>
</aside>
<p>I acknowledge the benefits of your approach, but I’m on the maintainers side on this. Phoenix could ditch Milligram and Topbar - they are only there to make the “blank” app look decent. I think you’re bound to nuke <code>phoenix.css</code> sooner or later. Even the name implies this. Topbar is kind of different, because a LiveView app without progress feedback is not great, but I’d say it’s in the same boat as Milligram.</p>
<p>So I’d say that we’re essentially left with esbuild. It’s a Go binary. So you either wrap it with Elixir which you already have, or bring the whole Node.js world just for one binary <em>and potential</em> other uses. I prefer the Elixir wrapper.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="224493" data-batch-url="/posts/batch_likers">
                        2
                      </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/phoenix-1-6-0-rc-0-released/41939/39">Post #38</a>
	                </div>
	            </div>
              <div id="likers-container-224493" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="224493"
                     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 #38"></div>
  </section>
</div>
    <div class="postbit" id="224502" data-post-id="224502">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Really impressed with the evolution of the framework.<br>
That’s an amazing job! I’m still newer on the elixir-lang but already can see the fantastic language that it is.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="224502" 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/phoenix-1-6-0-rc-0-released/41939/40">Post #39</a>
	                </div>
	            </div>
              <div id="likers-container-224502" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="224502"
                     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 #39"></div>
  </section>
</div>
    <div class="postbit" id="224503" data-post-id="224503">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p><img src="https://forum.elixirforum.com/images/emoji/apple/+1.png?v=15" title=":+1:" class="emoji" alt=":+1:" loading="lazy" width="20" height="20"> Sure I get it. I’m not a Phoenix maintainer but from the issue stats (npm was 591 out of 2034 <img src="https://forum.elixirforum.com/images/emoji/apple/scream.png?v=15" title=":scream:" class="emoji" alt=":scream:" loading="lazy" width="20" height="20">) it looks like a clear line had to be drawn to indicate that Phoenix support cannot and doesn’t cover npm - which it has every right to, offering 1st class support for plugging any bundler. I suppose these sorts of lines are thinner with frameworks than with regular libs.</p>
<p>I’m a very pragmatic developer (don’t ask about my testing approach <img src="https://forum.elixirforum.com/images/emoji/apple/stuck_out_tongue.png?v=15" title=":stuck_out_tongue:" class="emoji" alt=":stuck_out_tongue:" loading="lazy" width="20" height="20">) but I personally wouldn’t put even a single lib (e.g. topbar) into my project by copy-pasting because I’ve been there years ago and it’s just never worth it. And realistically, you’ll always want at least few more NPM packages in about every non-API project.</p>
<p>Fortunately, we can skip being “sides” via constructive discussion, respect and mutually beneficial solutions. Elixir community always was particularly rich in these values and I hope that my article carries them on, explaining my POV straight and providing solutions, at the same time being respective to the perspective of every party included.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="224503" data-batch-url="/posts/batch_likers">
                        10
                      </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/phoenix-1-6-0-rc-0-released/41939/41">Post #40</a>
	                </div>
	            </div>
              <div id="likers-container-224503" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="224503"
                     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 #40"></div>
  </section>
</div>
    <div class="postbit" id="224506" data-post-id="224506">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Congratulations! Thanks for the hard work. Gonna test it right now.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="224506" 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/phoenix-1-6-0-rc-0-released/41939/42">Post #41</a>
	                </div>
	            </div>
              <div id="likers-container-224506" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="224506"
                     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 #41"></div>
  </section>
</div>
    <div class="postbit" id="224511" data-post-id="224511">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Probably it is a win-win all around. Phoenix maintainers did what they had to do. And, the “pragmatic developers” get to do what they want.  Probably that is what frameworks are supposed to do - provide sane defaults and allow customization for the more advanced ones.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="224511" data-batch-url="/posts/batch_likers">
                        2
                      </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/phoenix-1-6-0-rc-0-released/41939/43">Post #42</a>
	                </div>
	            </div>
              <div id="likers-container-224511" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="224511"
                     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 #42"></div>
  </section>
</div>
    <div class="postbit" id="224529" data-post-id="224529">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="APB9785" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/APB9785/120/24101_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  APB9785
                  </h3>
		          </div>
						
			          <div class="user-title">
									<span>Creator of ECSx</span>
			          </div>
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>In the upgrade instructions, it says</p>
<blockquote>
<p>Phoenix’s <code>watchers</code> configuration is build-tool agnostic, so you may continue to enjoy your existing webpack configurations generated by phoenix 1.5 or earlier.</p>
</blockquote>
<p>But after updating the deps and switching to <code>.html.heex</code>, my JS hooks no longer work, and I get this error in the console:</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">Uncaught TypeError: phoenix_live_view__WEBPACK_IMPORTED_MODULE_4__.LiveSocket is not a constructor
    at eval (app.js?7473:41)
    at Module../js/app.js (app.js:142)
    at __webpack_require__ (app.js:20)
    at Object.0 (app.js:164)
    at __webpack_require__ (app.js:20)
    at app.js:84
    at app.js:87
</code></pre>
<p>EDIT: solved, see below</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="224529" 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/phoenix-1-6-0-rc-0-released/41939/44">Post #43</a>
	                </div>
	            </div>
              <div id="likers-container-224529" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="224529"
                     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 #43"></div>
  </section>
</div>
    <div class="postbit" id="224531" data-post-id="224531">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>With phoenix 1.6 the exports of <code>phoenix.js</code> have changed (there’s no longer a default export iirc). You might need to update your <code>app.js</code> accordingly.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="224531" 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/phoenix-1-6-0-rc-0-released/41939/45">Post #44</a>
	                </div>
	            </div>
              <div id="likers-container-224531" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="224531"
                     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 #44"></div>
  </section>
</div>
</template></turbo-stream><turbo-stream action="replace" target="load-more-container"><template><div id="load-more-container" class="load-more-container">
    <a class="load-more-button" data-turbo-stream="true" href="/topics/41939/load_more?page=5">Load more posts (49 remaining)</a>
</div></template></turbo-stream>