# \#webpack

**URL:** https://forum.elixirforum.com/tag/webpack/362.md

[Latest](https://forum.elixirforum.com/latest.md) · [Categories](https://forum.elixirforum.com/categories.md) · [Tags](https://forum.elixirforum.com/tags.md)

---

## [Breaking UI in staging](https://forum.elixirforum.com/t/breaking-ui-in-staging/56995)

<div class="topic-metadata">

**Author:** [@apoorv-2204](https://forum.elixirforum.com/u/apoorv-2204)\
**Replies:** 6\
**Last updated:** [July 11, 2023, 8:18pm UTC](https://forum.elixirforum.com/t/breaking-ui-in-staging/56995 "2023-07-11T20:18:36Z")

</div>

IN staging In local env I dont understand why the ui is breaking, I only updated the deps, though its working well locally.

---

## [Phoenix Watcher versus seperate process - webpack --watch](https://forum.elixirforum.com/t/phoenix-watcher-versus-seperate-process-webpack-watch/52555)

<div class="topic-metadata">

**Author:** [@kanishka](https://forum.elixirforum.com/u/kanishka)\
**Replies:** 1\
**Last updated:** [December 15, 2022, 3:03pm UTC](https://forum.elixirforum.com/t/phoenix-watcher-versus-seperate-process-webpack-watch/52555 "2022-12-15T15:03:02Z")

</div>

Is there any reason why I have to use Phoenix watchers instead of running a watcher directly in a separate terminal? I understand nice to have features like automatically starting and stopping the watcher. I am asking be…

---

## [How to inject different config values inside of my app.js file for things like URLs?](https://forum.elixirforum.com/t/how-to-inject-different-config-values-inside-of-my-app-js-file-for-things-like-urls/19210)

<div class="topic-metadata">

**Author:** [@salman](https://forum.elixirforum.com/u/salman)\
**Replies:** 3\
**Last updated:** [November 7, 2022, 7:06am UTC](https://forum.elixirforum.com/t/how-to-inject-different-config-values-inside-of-my-app-js-file-for-things-like-urls/19210 "2022-11-07T07:06:50Z")

</div>

When a user clicks on a button I want to redirect to a URL, but this URL has to be read from my config since it varies between DEV and PROD environments. Is this possible to do with webpack somehow? $("#btn-hero").clic…

---

## [Bootstrap required JS doesn't load](https://forum.elixirforum.com/t/bootstrap-required-js-doesnt-load/48180)

<div class="topic-metadata">

**Author:** [@andreyuhai](https://forum.elixirforum.com/u/andreyuhai)\
**Replies:** 5\
**Last updated:** [June 4, 2022, 11:34am UTC](https://forum.elixirforum.com/t/bootstrap-required-js-doesnt-load/48180 "2022-06-04T11:34:18Z")

</div>

Well, this might not be a Phoenix related question in particular but I’ve been stuck and annoyed for so long and I couldn’t find an answer anywhere else. My only hope is that if you want to help it’ll be easier for you t…

---

## [Elixir Absinthe GraphQL Apı](https://forum.elixirforum.com/t/elixir-absinthe-graphql-api/47141)

<div class="topic-metadata">

**Author:** [@bar65](https://forum.elixirforum.com/u/bar65)\
**Replies:** 9\
**Last updated:** [April 10, 2022, 6:29pm UTC](https://forum.elixirforum.com/t/elixir-absinthe-graphql-api/47141 "2022-04-10T18:29:51Z")

</div>

i am new to elixir graphql API, i created a new project and got this error(Project created in windows cmd) mix phx.new graphql\_apı --no-html --no-webpack \*\* (Mix) Invalid option: --no-webpack

---

## [I can't seem to make tailwind css work with my phoenix/react project](https://forum.elixirforum.com/t/i-cant-seem-to-make-tailwind-css-work-with-my-phoenix-react-project/45572)

<div class="topic-metadata">

**Author:** [@nikolis](https://forum.elixirforum.com/u/nikolis)\
**Replies:** 1\
**Last updated:** [February 15, 2022, 4:05pm UTC](https://forum.elixirforum.com/t/i-cant-seem-to-make-tailwind-css-work-with-my-phoenix-react-project/45572 "2022-02-15T16:05:36Z")

</div>

Hello all, I need help with my Tailwind setup. Disclaimer I am a bit of a newbie in the whole asset management thing so to anybody answering please be explain any suggestions, thanks in advance. So I have created a pho…

---

## [Elixir Phoenix webpack keeps recompiling constantly while running](https://forum.elixirforum.com/t/elixir-phoenix-webpack-keeps-recompiling-constantly-while-running/45354)

<div class="topic-metadata">

**Author:** [@benonymus](https://forum.elixirforum.com/u/benonymus)\
**Replies:** 1\
**Last updated:** [January 19, 2022, 9:41am UTC](https://forum.elixirforum.com/t/elixir-phoenix-webpack-keeps-recompiling-constantly-while-running/45354 "2022-01-19T09:41:05Z")

</div>

Hey, I have an elixir phoenix project that has some react webpack goody in it. Now when I start the project with mix phx.server everything start up nicely, but webpack keeps recompiling the project without having any f…

---

## [Taking a look at what ESBuild would look like in a Phoenix app](https://forum.elixirforum.com/t/taking-a-look-at-what-esbuild-would-look-like-in-a-phoenix-app/40966)

<div class="topic-metadata">

**Author:** [@polypush135](https://forum.elixirforum.com/u/polypush135)\
**Replies:** 22\
**Last updated:** [December 29, 2021, 6:04pm UTC](https://forum.elixirforum.com/t/taking-a-look-at-what-esbuild-would-look-like-in-a-phoenix-app/40966 "2021-12-29T18:04:40Z")

</div>

I’m really liking the way this example app does assent building and watching https://github.com/wittyprogramming/tailwindcss-alpinejs-starter/blob/master/package.json At the surface, you will notice that it does not de…

---

## [Setup phoenix to use svelte](https://forum.elixirforum.com/t/setup-phoenix-to-use-svelte/25718)

<div class="topic-metadata">

**Author:** [@dkuku](https://forum.elixirforum.com/u/dkuku)\
**Replies:** 11\
**Last updated:** [November 30, 2021, 12:28pm UTC](https://forum.elixirforum.com/t/setup-phoenix-to-use-svelte/25718 "2021-11-30T12:28:16Z")

</div>

I Created a blog post about setting up svelte with phoenix. I found it a bit tricky and the only blog post I found was written using some strange alphabet on medium. with this setup you can add svelte components to tem…

---

## [Importing js libs in files outside of main app.js](https://forum.elixirforum.com/t/importing-js-libs-in-files-outside-of-main-app-js/22809)

<div class="topic-metadata">

**Author:** [@phoebe](https://forum.elixirforum.com/u/phoebe)\
**Replies:** 3\
**Last updated:** [November 15, 2021, 7:40pm UTC](https://forum.elixirforum.com/t/importing-js-libs-in-files-outside-of-main-app-js/22809 "2021-11-15T19:40:18Z")

</div>

Hi, Apologies in advance that this might be a JS or webpack question, and not Phoenix related, but I just can’t get my head around the default/basic settings of webpack provided by Phoenix. My problem is trying to impo…

---

## [How to include FontAwesome in Phoenix app?](https://forum.elixirforum.com/t/how-to-include-fontawesome-in-phoenix-app/21749)

<div class="topic-metadata">

**Author:** [@hq1](https://forum.elixirforum.com/u/hq1)\
**Replies:** 16\
**Last updated:** [November 14, 2021, 1:25pm UTC](https://forum.elixirforum.com/t/how-to-include-fontawesome-in-phoenix-app/21749 "2021-11-14T13:25:18Z")

</div>

Hi, I am completely clueless when it comes to the whole static assets building pipeline. That’s probably the most overwhelming programming experience in my career thus far :joy: Seriously though, can anyone please shar…

---

## [Phoenix LiveView without webpack](https://forum.elixirforum.com/t/phoenix-liveview-without-webpack/32086)

<div class="topic-metadata">

**Author:** [@lkuty](https://forum.elixirforum.com/u/lkuty)\
**Replies:** 11\
**Last updated:** [September 3, 2021, 3:30pm UTC](https://forum.elixirforum.com/t/phoenix-liveview-without-webpack/32086 "2021-09-03T15:30:29Z")

</div>

Dear Phoenix community, Phoenix 1.5.3. LiveView 0.13.2. Is there a way to use LiveView without webpack or is it considered a bad idea ? I do not like webpack for different reasons (opacity, too much JS, JS doing too mu…

---

## [Upgraded to Webpack 5 and now it outputs to dist/main.js, which isn't a thing. Anyone know how to handle this?](https://forum.elixirforum.com/t/upgraded-to-webpack-5-and-now-it-outputs-to-dist-main-js-which-isnt-a-thing-anyone-know-how-to-handle-this/41724)

<div class="topic-metadata">

**Author:** [@woohaaha](https://forum.elixirforum.com/u/woohaaha)\
**Replies:** 3\
**Last updated:** [August 24, 2021, 2:36pm UTC](https://forum.elixirforum.com/t/upgraded-to-webpack-5-and-now-it-outputs-to-dist-main-js-which-isnt-a-thing-anyone-know-how-to-handle-this/41724 "2021-08-24T14:36:05Z")

</div>

Hi all, Been on this for hours now and Webpack isn’t behaving as I would assume. Has anyone had Webpack create a dist/main.js because it thinks it doesn’t have enough information (like entry) and so it still builds corr…

---

## [Tailwind CSS and Webpack 5 HOWTO](https://forum.elixirforum.com/t/tailwind-css-and-webpack-5-howto/40666)

<div class="topic-metadata">

**Author:** [@eclark](https://forum.elixirforum.com/u/eclark)\
**Replies:** 2\
**Last updated:** [August 5, 2021, 6:11pm UTC](https://forum.elixirforum.com/t/tailwind-css-and-webpack-5-howto/40666 "2021-08-05T18:11:22Z")

</div>

I’ve been working on a phoenix project lately and I wanted to use the latest versions of everything. Webpack 5 had some breaking changes and upgrading it was interesting. That lead me to write up a post on it. https://ww…

---

## [Live View - generate webpack js and css assets](https://forum.elixirforum.com/t/live-view-generate-webpack-js-and-css-assets/41127)

<div class="topic-metadata">

**Author:** [@brent](https://forum.elixirforum.com/u/brent)\
**Replies:** 1\
**Last updated:** [July 19, 2021, 5:54pm UTC](https://forum.elixirforum.com/t/live-view-generate-webpack-js-and-css-assets/41127 "2021-07-19T17:54:23Z")

</div>

When I run my Phoenix Live View server locally with mix phx.server I believe it automatically triggers the required command to generate the js and css assets Live View requires. However; in our test environments; we onl…

---

## [Serve live view assets from a custom path](https://forum.elixirforum.com/t/serve-live-view-assets-from-a-custom-path/41115)

<div class="topic-metadata">

**Author:** [@brent](https://forum.elixirforum.com/u/brent)\
**Replies:** 1\
**Last updated:** [July 19, 2021, 8:29am UTC](https://forum.elixirforum.com/t/serve-live-view-assets-from-a-custom-path/41115 "2021-07-19T08:29:36Z")

</div>

I am currently serving live view assets from the below paths: /css/app.css /js/app.js I would like to update the paths to the below; for easier routing /liveview/css/app.css /liveview/js/app.js Is this only a matter …

---

## [Error adding Tailwind CSS to Phoenix 1.5 LiveView application](https://forum.elixirforum.com/t/error-adding-tailwind-css-to-phoenix-1-5-liveview-application/34418)

<div class="topic-metadata">

**Author:** [@marcdel](https://forum.elixirforum.com/u/marcdel)\
**Replies:** 8\
**Last updated:** [July 15, 2021, 1:35am UTC](https://forum.elixirforum.com/t/error-adding-tailwind-css-to-phoenix-1-5-liveview-application/34418 "2021-07-15T01:35:57Z")

</div>

I’m trying to add Tailwind CSS to a Phoenix application and getting some errors. I’m following this guide. I’ve tried these same steps on: The actual Phoenix app I’m working on A brand new Phoenix 1.5 LiveView app mix…

---

## [React components not reloading in Phoenix 1.5 with webpack](https://forum.elixirforum.com/t/react-components-not-reloading-in-phoenix-1-5-with-webpack/39669)

<div class="topic-metadata">

**Author:** [@johnnyicon](https://forum.elixirforum.com/u/johnnyicon)\
**Replies:** 1\
**Last updated:** [May 17, 2021, 9:15pm UTC](https://forum.elixirforum.com/t/react-components-not-reloading-in-phoenix-1-5-with-webpack/39669 "2021-05-17T21:15:17Z")

</div>

Hi all, It seems that hot reloading of React components is not working in Phoenix 1.5 with webpack. I created this sample app to illustrate the problem I’m experiencing: GitHub - johnnyicon/phx15-react-babel-tailwindcss…

---

## [How to load old-fashioned JS (no imports) into my webpack bundle?](https://forum.elixirforum.com/t/how-to-load-old-fashioned-js-no-imports-into-my-webpack-bundle/31732)

<div class="topic-metadata">

**Author:** [@dimitarvp](https://forum.elixirforum.com/u/dimitarvp)\
**Replies:** 13\
**Last updated:** [May 2, 2021, 8:13pm UTC](https://forum.elixirforum.com/t/how-to-load-old-fashioned-js-no-imports-into-my-webpack-bundle/31732 "2021-05-02T20:13:01Z")

</div>

Hey guys, How do I include a plain old JS file without any exports or modern shebangs inside my resulting app.js? The file is just a collection of JS functions. Just started a Phoenix 1.5.1 project, tried putting the f…

---

## [Phoenix, webpack with lodash issues. Cannot load lodash](https://forum.elixirforum.com/t/phoenix-webpack-with-lodash-issues-cannot-load-lodash/38402)

<div class="topic-metadata">

**Author:** [@chemist](https://forum.elixirforum.com/u/chemist)\
**Replies:** 7\
**Last updated:** [March 23, 2021, 3:31pm UTC](https://forum.elixirforum.com/t/phoenix-webpack-with-lodash-issues-cannot-load-lodash/38402 "2021-03-23T15:31:58Z")

</div>

Hi, am a noob at webpack so please bear with me. I am doing the best I can. What i am trying to do is to cherrypick a subset of lodash, specifically debounce to load in my application via app.js The debounce function i…

---

## [Phoenix doesn't open liveSocket as it's undefined](https://forum.elixirforum.com/t/phoenix-doesnt-open-livesocket-as-its-undefined/38072)

<div class="topic-metadata">

**Author:** [@zoedsoupe](https://forum.elixirforum.com/u/zoedsoupe)\
**Replies:** 4\
**Last updated:** [March 12, 2021, 4:06pm UTC](https://forum.elixirforum.com/t/phoenix-doesnt-open-livesocket-as-its-undefined/38072 "2021-03-12T16:06:13Z")

</div>

My Phoenix app does not open a a connection with liveSocket. Only modifications I made was to add AlpineJS and TailwindCSS and added PWA configs, adding manifest.json and servicerWorker.js n /priv/static I followed thi…

---

## [Adding multiple scss files in Phoenix app](https://forum.elixirforum.com/t/adding-multiple-scss-files-in-phoenix-app/37944)

<div class="topic-metadata">

**Author:** [@anil28](https://forum.elixirforum.com/u/anil28)\
**Replies:** 1\
**Last updated:** [March 4, 2021, 10:30am UTC](https://forum.elixirforum.com/t/adding-multiple-scss-files-in-phoenix-app/37944 "2021-03-04T10:30:49Z")

</div>

Can I add multiple .scss files in the phoenix project assets css folder along with app.scss. How to config webpack for compiling this? Thanks

---

## [Getting ValidationError for mix phx.server](https://forum.elixirforum.com/t/getting-validationerror-for-mix-phx-server/37719)

<div class="topic-metadata">

**Author:** [@raashi\_me](https://forum.elixirforum.com/u/raashi_me)\
**Replies:** 3\
**Last updated:** [February 22, 2021, 9:01am UTC](https://forum.elixirforum.com/t/getting-validationerror-for-mix-phx-server/37719 "2021-02-22T09:01:25Z")

</div>

When I try to run mix phx.server I am getting this error.. \[webpack-cli\] ValidationError: Invalid options object. Copy Plugin has been initialized using an options object that does not match the API schema. - options\[0…

---

## [Webpack-cli issues when integrating Tailwind in Phoenx/LV](https://forum.elixirforum.com/t/webpack-cli-issues-when-integrating-tailwind-in-phoenx-lv/37248)

<div class="topic-metadata">

**Author:** [@onkara](https://forum.elixirforum.com/u/onkara)\
**Replies:** 3\
**Last updated:** [February 2, 2021, 3:54am UTC](https://forum.elixirforum.com/t/webpack-cli-issues-when-integrating-tailwind-in-phoenx-lv/37248 "2021-02-02T03:54:00Z")

</div>

Hi guys I am running into issues integrating tailwind css into my Phoenix/LV project the error seems related to webpack-cli specially around asset watchers. I know its not directly related to Phoenix/LV issue, but could…

---

## [Use my own javascript files in phoenix with webpack](https://forum.elixirforum.com/t/use-my-own-javascript-files-in-phoenix-with-webpack/37177)

<div class="topic-metadata">

**Author:** [@ntd23](https://forum.elixirforum.com/u/ntd23)\
**Replies:** 6\
**Last updated:** [January 30, 2021, 8:52am UTC](https://forum.elixirforum.com/t/use-my-own-javascript-files-in-phoenix-with-webpack/37177 "2021-01-30T08:52:27Z")

</div>

I create a new project with phoenix and create a simple file test.js in assets/js/ //test.js export const hello = hello(){ console.log("Ola") } Also in default index page I put a tag \<script\> hello() \</script\> on b…

---

## [Upgrade to webpack 5](https://forum.elixirforum.com/t/upgrade-to-webpack-5/35010)

<div class="topic-metadata">

**Author:** [@montogeek](https://forum.elixirforum.com/u/montogeek)\
**Replies:** 12\
**Last updated:** [November 2, 2020, 9:57am UTC](https://forum.elixirforum.com/t/upgrade-to-webpack-5/35010 "2020-11-02T09:57:18Z")

</div>

Hi! I was going to post this in GitHub but I think it is better here. Would you accept a PR to upgrade to webpack 5? Cheers!

---

## [Phoenix 1.4.11 how to use webpack with sass?](https://forum.elixirforum.com/t/phoenix-1-4-11-how-to-use-webpack-with-sass/27306)

<div class="topic-metadata">

**Author:** [@wolfiton](https://forum.elixirforum.com/u/wolfiton)\
**Replies:** 18\
**Last updated:** [September 11, 2020, 5:58pm UTC](https://forum.elixirforum.com/t/phoenix-1-4-11-how-to-use-webpack-with-sass/27306 "2020-09-11T17:58:12Z")

</div>

Hi everyone, I need a simple configuration to add to the already webpack plugins added by phoenix by default to manage my sass. Here is the default config const path = require('path'); const glob = require('glob'); c…

---

## [No static assets found on production using Docker Containers](https://forum.elixirforum.com/t/no-static-assets-found-on-production-using-docker-containers/34044)

<div class="topic-metadata">

**Author:** [@nesimtunc](https://forum.elixirforum.com/u/nesimtunc)\
**Replies:** 7\
**Last updated:** [August 29, 2020, 6:20am UTC](https://forum.elixirforum.com/t/no-static-assets-found-on-production-using-docker-containers/34044 "2020-08-29T06:20:39Z")

</div>

Hi, elixir -v Erlang/OTP 23 \[erts-11.0.2\] \[source\] \[64-bit\] \[smp:8:8\] \[ds:8:8:10\] \[async-threads:1\] \[hipe\] \[dtrace\] Elixir 1.10.3 (compiled with Erlang/OTP 22) And my deps. mix deps.get Resolving Hex dep…

---

## [Anyone have experience setting up StencilJS with a Phoenix App using webpack?](https://forum.elixirforum.com/t/anyone-have-experience-setting-up-stenciljs-with-a-phoenix-app-using-webpack/33851)

<div class="topic-metadata">

**Author:** [@asnyder002](https://forum.elixirforum.com/u/asnyder002)\
**Replies:** 0\
**Last updated:** [August 19, 2020, 8:48pm UTC](https://forum.elixirforum.com/t/anyone-have-experience-setting-up-stenciljs-with-a-phoenix-app-using-webpack/33851 "2020-08-19T20:48:18Z")

</div>

I’ve installed both packages: Stencil/Core Stencil/Webpack Then, set webpack.config.js: const stencil = require('@stencil/webpack'); ... plugins: \[ new stencil.StencilPlugin() \] Finally I’ve created a src/…

---

## [Configuring PurgeCSS when using TailwindCSS](https://forum.elixirforum.com/t/configuring-purgecss-when-using-tailwindcss/33355)

<div class="topic-metadata">

**Author:** [@axelclark](https://forum.elixirforum.com/u/axelclark)\
**Replies:** 1\
**Last updated:** [July 26, 2020, 5:01am UTC](https://forum.elixirforum.com/t/configuring-purgecss-when-using-tailwindcss/33355 "2020-07-26T05:01:11Z")

</div>

I’ve added TailwindCSS to my Phoenix project. I’m running into a problem configuring PurgeCSS to remove unused CSS. I followed the instructions at https://tailwindcss.com/docs/controlling-file-size to add my template f…

[Next page](https://forum.elixirforum.com/tag/webpack/362.md?match_all_tags=true&page=1&tags%5B%5D=webpack)