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


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="jejuro" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/jejuro/120/17438_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  jejuro
                    <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>Now another warning appears.</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
</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="158152" 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-not-working-error-in-js-app-js-module-build-failed/28182/13">Post #12</a>
	                </div>
	            </div>
              <div id="likers-container-158152" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="158152"
                     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="158153" data-post-id="158153">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>That new warning looks like you didn’t copy in the full command-line (truncated at --mod rather than --mode development)</p>
<p>Can you test (maybe with some other framework) that your node / webpack infrastructure is behaving?</p>
<p>Do you have another machine that you can try?</p>
<p>Have you tried updating all your npm dependencies to the latest?</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="158153" 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-not-working-error-in-js-app-js-module-build-failed/28182/14">Post #13</a>
	                </div>
	            </div>
              <div id="likers-container-158153" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="158153"
                     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="158156" data-post-id="158156">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="jejuro" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/jejuro/120/17438_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  jejuro
                    <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>I am sure Phoenix will work on another machine as it has worked until today without problem.</p>
<p>I have updated all my npm dependencies. First, I removed the default “assets/node_modules”, and then, reinstall the dependencies like;<br>
$ npm install --prefix assets</p>
<p>But, the issue continues. I will remove all the node.js related items, and reinstall them.</p>
<p>I am a refugee from JS spagetti eco-system, and have enjoyed the wonderful elixir+phoenix land for two months until now. But, the nodejs ghost still follows me…</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="158156" 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-not-working-error-in-js-app-js-module-build-failed/28182/15">Post #14</a>
	                </div>
	            </div>
              <div id="likers-container-158156" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="158156"
                     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 #14"></div>
  </section>
</div>
    <div class="postbit" id="158157" data-post-id="158157">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="jejuro" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/jejuro/120/17438_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  jejuro
                    <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>This is the full error message.</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">ERROR in ./js/app.js
Module build failed: Error: Package exports for '/Users/Jupeter/islands_interface/assets/node_modules/@babel/helper-compilation-targets' do not define a '.' subpath
    at applyExports (internal/modules/cjs/loader.js:485:15)
    at resolveExports (internal/modules/cjs/loader.js:508:12)
    at Function.Module._findPath (internal/modules/cjs/loader.js:577:20)
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:879:27)
    at Function.Module._load (internal/modules/cjs/loader.js:785:27)
    at Module.require (internal/modules/cjs/loader.js:956:19)
    at require (/Users/Jupeter/islands_interface/assets/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
    at Object.&lt;anonymous&gt; (/Users/Jupeter/islands_interface/assets/node_modules/@babel/preset-env/lib/debug.js:8:33)
    at Module._compile (/Users/Jupeter/islands_interface/assets/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1103:10)
    at Module.load (internal/modules/cjs/loader.js:914:32)
    at Function.Module._load (internal/modules/cjs/loader.js:822:14)
    at Module.require (internal/modules/cjs/loader.js:956:19)
    at require (/Users/Jupeter/islands_interface/assets/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
    at Object.&lt;anonymous&gt; (/Users/Jupeter/islands_interface/assets/node_modules/@babel/preset-env/lib/index.js:11:14)
    at Module._compile (/Users/Jupeter/islands_interface/assets/node_modules/v8-compile-cache/v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1103:10)
    at Module.load (internal/modules/cjs/loader.js:914:32)
    at Function.Module._load (internal/modules/cjs/loader.js:822:14)
    at Module.require (internal/modules/cjs/loader.js:956:19)
    at require (/Users/Jupeter/islands_interface/assets/node_modules/v8-compile-cache/v8-compile-cache.js:161:20)
    at requireModule (/Users/Jupeter/islands_interface/assets/node_modules/@babel/core/lib/config/files/plugins.js:165:12)
    at loadPreset (/Users/Jupeter/islands_interface/assets/node_modules/@babel/core/lib/config/files/plugins.js:83:17)
    at createDescriptor (/Users/Jupeter/islands_interface/assets/node_modules/@babel/core/lib/config/config-descriptors.js:154:9)
    at /Users/Jupeter/islands_interface/assets/node_modules/@babel/core/lib/config/config-descriptors.js:109:50
    at Array.map (&lt;anonymous&gt;)
    at createDescriptors (/Users/Jupeter/islands_interface/assets/node_modules/@babel/core/lib/config/config-descriptors.js:109:29)
    at createPresetDescriptors (/Users/Jupeter/islands_interface/assets/node_modules/@babel/core/lib/config/config-descriptors.js:101:10)
    at presets (/Users/Jupeter/islands_interface/assets/node_modules/@babel/core/lib/config/config-descriptors.js:47:19)
    at mergeChainOpts (/Users/Jupeter/islands_interface/assets/node_modules/@babel/core/lib/config/config-chain.js:320:26)
    at /Users/Jupeter/islands_interface/assets/node_modules/@babel/core/lib/config/config-chain.js:283:7
    at Generator.next (&lt;anonymous&gt;)
    at buildRootChain (/Users/Jupeter/islands_interface/assets/node_modules/@babel/core/lib/config/config-chain.js:120:29)
    at buildRootChain.next (&lt;anonymous&gt;)
    at loadPrivatePartialConfig (/Users/Jupeter/islands_interface/assets/node_modules/@babel/core/lib/config/partial.js:95:62)
    at loadPrivatePartialConfig.next (&lt;anonymous&gt;)
 @ multi ./js/app.js
</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="158157" 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-not-working-error-in-js-app-js-module-build-failed/28182/16">Post #15</a>
	                </div>
	            </div>
              <div id="likers-container-158157" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="158157"
                     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 #15"></div>
  </section>
</div>
    <div class="postbit" id="158161" data-post-id="158161">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="jejuro" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/jejuro/120/17438_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  jejuro
                    <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">
								<aside class="quote no-group quote-modified" data-username="jejuro" data-post="16" data-topic="28182">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/jejuro/48/17438_2.png" class="avatar"> jejuro:</div>
<blockquote>
<p>node_modules/<span class="mention">@babel</span>/helper-compilation-targets’ do not define a ‘.’ subpath</p>
</blockquote>
</aside>
<p>I have removed all node related files from my computer, then reinstall nodejs.<br>
Problem solved. <img src="https://forum.elixirforum.com/images/emoji/apple/joy.png?v=15" title=":joy:" class="emoji" alt=":joy:" loading="lazy" width="20" height="20"></p>
<p>Does Phoenix LiveView also need webpack, babel and other nodejs modules? I hope another world without JS stubs.</p>
<p>Thank you all.<br>
I have really enjoyed learning elixir, phoenix, and ecto for the last two months, and today was the hardest day due to the nodejs stubs such as webpack and babel.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="158161" 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-not-working-error-in-js-app-js-module-build-failed/28182/17">Post #16</a>
	                </div>
	            </div>
              <div id="likers-container-158161" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="158161"
                     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 #16"></div>
  </section>
</div>
    <div class="postbit" id="158164" data-post-id="158164">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I was about to say that it’s likely your Node installation is old.</p>
<ul>
<li><a href="https://github.com/vuejs/vue-cli/issues/5072" class="inline-onebox" rel="noopener nofollow ugc">Build failed for a freshly created project · Issue #5072 · vuejs/vue-cli · GitHub</a></li>
<li><a href="https://github.com/nodejs/node/issues/29932" class="inline-onebox" rel="noopener nofollow ugc">ESM "exports" field disables "main" lookup · Issue #29932 · nodejs/node · GitHub</a></li>
</ul>
<aside class="quote no-group" data-username="jejuro" data-post="17" data-topic="28182">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/jejuro/48/17438_2.png" class="avatar"> jejuro:</div>
<blockquote>
<p>Does Phoenix LiveView also need webpack, babel and other nodejs modules? I hope another world without JS stubs.</p>
</blockquote>
</aside>
<p>As far as I am aware, no. LiveView is supposed to require very minimal JS that basically maintains the WebSockets connection and encode/decode data in transit.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="158164" 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-not-working-error-in-js-app-js-module-build-failed/28182/18">Post #17</a>
	                </div>
	            </div>
              <div id="likers-container-158164" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="158164"
                     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 #17"></div>
  </section>
</div>
    <div class="postbit" id="158173" data-post-id="158173">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p><a class="mention" href="/u/jejuro" rel="nofollow">@jejuro</a> do you still want to learn how to use asdf?(I was away when you posted)</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="158173" 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-not-working-error-in-js-app-js-module-build-failed/28182/19">Post #18</a>
	                </div>
	            </div>
              <div id="likers-container-158173" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="158173"
                     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 #18"></div>
  </section>
</div>
    <div class="postbit" id="158223" data-post-id="158223">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="jejuro" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/jejuro/120/17438_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  jejuro
                    <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>Yes, please. I have googled it, but couldn’t find helpful tutorials or guides. The official site is too simple for beginners.</p>
<p>Thanks everyone. I really appreciate it.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="158223" 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-not-working-error-in-js-app-js-module-build-failed/28182/20">Post #19</a>
	                </div>
	            </div>
              <div id="likers-container-158223" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="158223"
                     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 #19"></div>
  </section>
</div>
    <div class="postbit" id="158268" data-post-id="158268">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>So i have Ubuntu as a system but you have Mac so you will probably use brew to install things.</p>
<p><strong>Read the Important section a the end before starting following this guide</strong></p>
<p>So let’s get started:</p>
<p>Head down here first:</p>
<aside class="onebox allowlistedgeneric" data-onebox-src="https://asdf-vm.com/#/core-manage-asdf-vm">
  <header class="source">

      <a href="https://asdf-vm.com/#/core-manage-asdf-vm" target="_blank" rel="noopener nofollow ugc">asdf-vm.com</a>
  </header>

  <article class="onebox-body">
    

<h3><a href="https://asdf-vm.com/#/core-manage-asdf-vm" target="_blank" rel="noopener nofollow ugc">asdf</a></h3>

  <p>Manage multiple runtime versions with a single CLI tool</p>


  </article>

  <div class="onebox-metadata">
    
    
  </div>

  <div style="clear: both"></div>
</aside>

<p>Choose one of the two:</p>
<p><strong>Using git(Recommended way)</strong></p>
<pre data-code-wrap="elixir"><code class="lang-elixir">git clone https://github.com/asdf-vm/asdf.git ~/.asdf
cd ~/.asdf
git checkout "$(git describe --abbrev=0 --tags)"
</code></pre>
<p><strong>This is using brew</strong></p>
<pre data-code-wrap="elixir"><code class="lang-elixir">brew install asdf  - install asdf on Mac
</code></pre>
<pre data-code-wrap="elixir"><code class="lang-elixir">brew install asdf --HEAD install asdf on Mac form the master repo with latest changes and fixes
</code></pre>
<p>Now if you use git do the following</p>
<p><strong>Add to your Shell</strong></p>
<pre data-code-wrap="elixir"><code class="lang-elixir">echo -e '\n. $HOME/.asdf/asdf.sh' &gt;&gt; ~/.bash_profile
echo -e '\n. $HOME/.asdf/completions/asdf.bash' &gt;&gt; ~/.bash_profile
</code></pre>
<p><strong>I personally use zsh with antigen (you can read more here <a href="https://forum.elixirforum.com/t/kubuntu-against-my-old-bodhi-linux/26996" class="inline-onebox" rel="nofollow">Kubuntu against my old Bodhi Linux</a>)</strong><br>
<strong>For zsh</strong></p>
<pre data-code-wrap="elixir"><code class="lang-elixir">echo -e '\n. $HOME/.asdf/asdf.sh' &gt;&gt; ~/.zprofile
</code></pre>
<p><strong>For brew install use this</strong></p>
<p><strong>Add to shell</strong></p>
<pre data-code-wrap="elixir"><code class="lang-elixir">echo -e "\n. $(brew --prefix asdf)/asdf.sh" &gt;&gt; ~/.bash_profile
echo -e "\n. $(brew --prefix asdf)/etc/bash_completion.d/asdf.bash" &gt;&gt; ~/.bash_profile
</code></pre>
<p>For zsh</p>
<p><strong>Find asdf.sh and add to zsh</strong></p>
<p><strong>Following this command but locating the file</strong></p>
<pre data-code-wrap="elixir"><code class="lang-elixir">echo -e '\n. $HOME/.asdf/asdf.sh' &gt;&gt; ~/.zprofile
</code></pre>
<p>Now to be able to install plugins add the following deps via homebrew or spack<br>
<strong>Brew</strong></p>
<pre data-code-wrap="elixir"><code class="lang-elixir">brew install \
  coreutils automake autoconf openssl \
  libyaml readline libxslt libtool unixodbc \
  unzip curl
</code></pre>
<p><strong>Spack</strong></p>
<pre data-code-wrap="elixir"><code class="lang-elixir">spack install \
  coreutils automake autoconf openssl \
  libyaml readline libxslt libtool unixodbc \
  unzip curl
</code></pre>
<p><strong>Verify that asdf is a known command to your shell by typing asdf</strong></p>
<p><strong>Now we are ready to add the plugins:</strong></p>
<p>Here are all the plugins available: <a href="https://asdf-vm.com/#/plugins-all" class="inline-onebox" rel="noopener nofollow ugc">asdf</a></p>
<p>We will use the Erlang plugin the Elixir plugin</p>
<p><strong>Erlang</strong></p>
<p>So head down to: <a href="https://github.com/asdf-vm/asdf-erlang" class="inline-onebox" rel="noopener nofollow ugc">GitHub - asdf-vm/asdf-erlang: Erlang plugin for asdf version manager · GitHub</a></p>
<p>Before installing the Erlang plugin</p>
<h2><a name="p-158268-osx-1" class="anchor" href="#p-158268-osx-1" aria-label="Heading link" rel="nofollow"></a>OSX</h2>
<p>These packages you have to install in order for the Erlang plugin to compile:</p>
<p>Install the build tools <code>brew install autoconf</code></p>
<p>For building with wxWidgets (start observer or debugger!) <code>brew install wxmac</code></p>
<h3><a name="p-158268-dealing-with-openssl-issues-on-macos-2" class="anchor" href="#p-158268-dealing-with-openssl-issues-on-macos-2" aria-label="Heading link" rel="nofollow"></a>Dealing with OpenSSL issues on macOS</h3>
<p>You may encounter an SSL error with an output along these lines:</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">crypto : No usable OpenSSL found
ssh : No usable OpenSSL found
ssl : No usable OpenSSL found
</code></pre>
<p>This issue has been documented <a href="https://github.com/kerl/kerl#compiling-crypto-on-macs" rel="noopener nofollow ugc">on <code>kerl</code> </a>. If you see this error, you can use the <code>--with-ssl</code> flag with a path (in this case, the path is <code>1.0.2p</code> , you should verify the correct path) before installing Erlang. Here is an example that skips the java depency and also sets a specific (and existing) path for OpenSSL on macOS.</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">$ export KERL_CONFIGURE_OPTIONS="--without-javac --with-ssl=/usr/local/Cellar/openssl/1.0.2p"
$ asdf install erlang &lt;version&gt;
</code></pre>
<p><strong>Now we are ready for the actual install</strong></p>
<p><strong>So use the following command:</strong></p>
<pre data-code-wrap="elixir"><code class="lang-elixir">asdf install erlang ref:master
</code></pre>
<p>Give it time to compile, you can even go drink a coffee, because it will take some time to do this.</p>
<p>After it is done</p>
<p>Let’s get elixir:</p>
<p>head down here:</p>
<p>then use this command:</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">asdf plugin-add elixir https://github.com/asdf-vm/asdf-elixir.git
</code></pre>
<p>After elixir is installed you can install phoenix normally and it should all work</p>
<p>Here is the guide: <a href="https://hexdocs.pm/phoenix/installation.html#content" class="inline-onebox" rel="noopener nofollow ugc">Installation — Phoenix v1.8.8</a></p>
<ul>
<li>So first install hex: <code>mix local.hex</code> if you already have it it will upgrade it to the latest version</li>
<li>Then <code>mix archive.install hex phx_new 1.4.11</code> and yopu should be able now to use phoenix without worries.</li>
</ul>
<p><strong>!! Important</strong></p>
<blockquote>
<p><strong>I wrote this guide without having access to a Mac OS so if there are any mistakes please correct them</strong></p>
</blockquote>
<p>I hope this will help you and others, that have issues with phoenix installation</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="158268" 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-not-working-error-in-js-app-js-module-build-failed/28182/21">Post #20</a>
	                </div>
	            </div>
              <div id="likers-container-158268" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="158268"
                     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 #20"></div>
  </section>
</div>
    <div class="postbit" id="158270" data-post-id="158270">
  <section>
    <div class="post-wrap">


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

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Also I sent a request to the <strong>wonderful admins</strong> of the forums to verify if my guide is correct because i don’t have a Mac OS to test this.</p>
<p>So before following it wait for the OK from them.</p>
<p>Thanks for you patience</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="158270" 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-not-working-error-in-js-app-js-module-build-failed/28182/22">Post #21</a>
	                </div>
	            </div>
              <div id="likers-container-158270" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="158270"
                     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 #21"></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/28182/load_more?page=3">Load more posts (6 remaining)</a>
</div></template></turbo-stream>