# Elm files are not compiled by Webpack in Phoenix framework

**URL:** <https://discourse.elm-lang.org/t/elm-files-are-not-compiled-by-webpack-in-phoenix-framework/7407>\
**Category:** Learn\
**Created:** [May 31, 2021, 7:41pm UTC](https://discourse.elm-lang.org/t/elm-files-are-not-compiled-by-webpack-in-phoenix-framework/7407 "2021-05-31T19:41:03Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![bdrp](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/bdrp/32/3637_2.png) [@bdrp](https://discourse.elm-lang.org/u/bdrp)\
**Post date:** [May 31, 2021, 7:41pm UTC](https://discourse.elm-lang.org/t/elm-files-are-not-compiled-by-webpack-in-phoenix-framework/7407/1 "2021-05-31T19:41:03Z")

</div>

I have a problem using Elm with Phoenix framework. I have described the problem in more detail on Stackoverflow: [https://stackoverflow.com/questions/67779387/elm-files-are-not-compiled-by-webpack-in-phoenix-framework](https://stackoverflow.com/questions/67779387/elm-files-are-not-compiled-by-webpack-in-phoenix-framework)

---

<div class="post-metadata">

**Author:** ![encetamasb](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/encetamasb/32/3360_2.png) [@encetamasb](https://discourse.elm-lang.org/u/encetamasb)\
**Post date:** [May 31, 2021, 8:53pm UTC](https://discourse.elm-lang.org/t/elm-files-are-not-compiled-by-webpack-in-phoenix-framework/7407/2 "2021-05-31T20:53:03Z")

</div>

I’m just guessing: try with HardSourceWebpackPlugin disabled.

---

<div class="post-metadata">

**Author:** ![bdrp](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/bdrp/32/3637_2.png) [@bdrp](https://discourse.elm-lang.org/u/bdrp)\
**Post date:** [June 1, 2021, 6:26am UTC](https://discourse.elm-lang.org/t/elm-files-are-not-compiled-by-webpack-in-phoenix-framework/7407/3 "2021-06-01T06:26:42Z")

</div>

That did make it better. Now it compiles, but I still have to restart the server for it to recompile.

---

<div class="post-metadata">

**Author:** ![razze](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/razze/32/1650_2.png) [@razze](https://discourse.elm-lang.org/u/razze)\
**Post date:** [June 1, 2021, 3:34pm UTC](https://discourse.elm-lang.org/t/elm-files-are-not-compiled-by-webpack-in-phoenix-framework/7407/4 "2021-06-01T15:34:39Z")

</div>

what’s your npm run watch definition in package.json like?

Here’s mine:  
`"watch": "webpack watch --mode development --watch-options-stdin",`

---

<div class="post-metadata">

**Author:** ![bdrp](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/bdrp/32/3637_2.png) [@bdrp](https://discourse.elm-lang.org/u/bdrp)\
**Post date:** [June 2, 2021, 6:22am UTC](https://discourse.elm-lang.org/t/elm-files-are-not-compiled-by-webpack-in-phoenix-framework/7407/5 "2021-06-02T06:22:34Z")

</div>

I have these lines:

```auto
"scripts": {
  "deploy": "webpack --mode production",
  "watch": "webpack --mode development --watch"
},

```

I tried your line, but didn’t seem to change anything. I still need to restart for file changes to take effect.

---

<div class="post-metadata">

**Author:** ![encetamasb](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/encetamasb/32/3360_2.png) [@encetamasb](https://discourse.elm-lang.org/u/encetamasb)\
**Post date:** [June 2, 2021, 11:15am UTC](https://discourse.elm-lang.org/t/elm-files-are-not-compiled-by-webpack-in-phoenix-framework/7407/6 "2021-06-02T11:15:11Z")

</div>

I’m not a webpack guru, but I cannot see HMR configured in your config, like:

(1) devServer.hot = true  
(2) HotModuleReplacementPlugin ([HotModuleReplacementPlugin | webpack](https://webpack.js.org/plugins/hot-module-replacement-plugin/))  
(3) elm-hot-webpack-loader ([GitHub - klazuka/elm-hot-webpack-loader: Webpack loader providing hot code swapping for Elm](https://github.com/klazuka/elm-hot-webpack-loader#readme))

---

<div class="post-metadata">

**Author:** ![paulh](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/paulh/32/5022_2.png) [@paulh](https://discourse.elm-lang.org/u/paulh)\
**Post date:** [June 2, 2021, 12:43pm UTC](https://discourse.elm-lang.org/t/elm-files-are-not-compiled-by-webpack-in-phoenix-framework/7407/7 "2021-06-02T12:43:48Z")

</div>

Here’s my webpack config:

```auto
const path = require('path');
const glob = require('glob');
const TerserPlugin = require('terser-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = (env, options) => {
  const devMode = options.mode !== 'production';

  return {
    optimization: {
      minimizer: [
        new TerserPlugin({
          terserOptions: {
            ecma: 5,
            compress: {
              pure_funcs: [
                "F2",
                "F3",
                "F4",
                "F5",
                "F6",
                "F7",
                "F8",
                "F9",
                "A2",
                "A3",
                "A4",
                "A5",
                "A6",
                "A7",
                "A8",
                "A9"
              ],
              pure_getters: true,
              keep_fargs: false,
              unsafe_comps: true,
              unsafe: true,
              passes: 2
            },
            mangle: true
          }
        }),
      ]
    },
    entry: {
      'app': glob.sync('./vendor/**/*.js').concat(['./js/app.js'])
    },
    output: {
      filename: '[name].js',
      path: path.resolve(__dirname, '../priv/static/js'),
      publicPath: '/js/'
    },
    devtool: devMode ? 'eval-cheap-module-source-map' : undefined,
    module: {
      rules: [
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
            loader: 'babel-loader'
          }
        },
        {
          test: /\.elm$/,
          exclude: [/elm-stuff/, /node_modules/],
          use: {
            loader: 'elm-webpack-loader',
            options: {
              cwd: __dirname + '/elm/',
              debug: false, //options.mode === "development",
              optimize: options.mode === "production"
            }
          }
        }
      ]
    },
    plugins: [
      new CopyWebpackPlugin([{ from: 'static/', to: '../' }])
    ]
  }
};

```

If you change some `HTML` in `app_web/templates/layout/app.html.eex` do you see the changes without having to manually reload the page?

Also, are you digesting your assets? I found that digesting in dev mode prevented changes to assets being picked up.

---

<div class="post-metadata">

**Author:** ![bdrp](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/bdrp/32/3637_2.png) [@bdrp](https://discourse.elm-lang.org/u/bdrp)\
**Post date:** [June 2, 2021, 1:32pm UTC](https://discourse.elm-lang.org/t/elm-files-are-not-compiled-by-webpack-in-phoenix-framework/7407/8 "2021-06-02T13:32:07Z")

</div>

> [@paulh](#):
>
> Also, are you digesting your assets? I found that digesting in dev mode prevented changes to assets being picked up.

I don’t know what this means.

---

<div class="post-metadata">

**Author:** ![bdrp](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/bdrp/32/3637_2.png) [@bdrp](https://discourse.elm-lang.org/u/bdrp)\
**Post date:** [June 2, 2021, 1:36pm UTC](https://discourse.elm-lang.org/t/elm-files-are-not-compiled-by-webpack-in-phoenix-framework/7407/9 "2021-06-02T13:36:24Z")

</div>

> [@paulh](#):
>
> If you change some `HTML` in `app_web/templates/layout/app.html.eex` do you see the changes without having to manually reload the page?

Yes. Although it’s immediately overwritten by Elm.

---

<div class="post-metadata">

**Author:** ![paulh](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/paulh/32/5022_2.png) [@paulh](https://discourse.elm-lang.org/u/paulh)\
**Post date:** [June 2, 2021, 3:02pm UTC](https://discourse.elm-lang.org/t/elm-files-are-not-compiled-by-webpack-in-phoenix-framework/7407/10 "2021-06-02T15:02:05Z")

</div>

> [@bdrp](#):
>
> > [@paulh](#):
> >
> > Also, are you digesting your assets? I found that digesting in dev mode prevented changes to assets being picked up.
> 
> I don’t know what this means.

In `endpoint.ex` there is a block of code starting `plug Plug.Static,`, there should be some comments above it about running `phx.digest`. Check this block of code for `gzip`, and try setting it to `false` if it’s not already.

---

<div class="post-metadata">

**Author:** ![bdrp](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/bdrp/32/3637_2.png) [@bdrp](https://discourse.elm-lang.org/u/bdrp)\
**Post date:** [June 2, 2021, 6:39pm UTC](https://discourse.elm-lang.org/t/elm-files-are-not-compiled-by-webpack-in-phoenix-framework/7407/11 "2021-06-02T18:39:18Z")

</div>

> [@paulh](#):
>
> In `endpoint.ex` there is a block of code starting `plug Plug.Static,` , there should be some comments above it about running `phx.digest` . Check this block of code for `gzip` , and try setting it to `false` if it’s not already.

OK. It’s already set to false.

---

<div class="post-metadata">

**Author:** ![IloSophiep](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/ilosophiep/32/3489_2.png) [@IloSophiep](https://discourse.elm-lang.org/u/IloSophiep)\
**Post date:** [June 3, 2021, 7:57am UTC](https://discourse.elm-lang.org/t/elm-files-are-not-compiled-by-webpack-in-phoenix-framework/7407/12 "2021-06-03T07:57:08Z")

</div>

I’m not an expert, so i hope i’m not getting things mixed up, but i also encountered this problem and in my case it’s apparently already an issue on github as [Version 7.01 doesn’t observe source code changes anymore](https://github.com/elm-community/elm-webpack-loader/issues/193).

Coud you be affected by this?

---

<div class="post-metadata">

**Author:** ![bdrp](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/bdrp/32/3637_2.png) [@bdrp](https://discourse.elm-lang.org/u/bdrp)\
**Post date:** [June 8, 2021, 6:01am UTC](https://discourse.elm-lang.org/t/elm-files-are-not-compiled-by-webpack-in-phoenix-framework/7407/13 "2021-06-08T06:01:48Z")

</div>

Some more questions:

Do you do something in particular in app.js or do you just include the Main.elm file?

What versions of Webpack and Webpack-cli are you running?

---

<div class="post-metadata">

**Author:** ![paulh](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.elm-lang.org/paulh/32/5022_2.png) [@paulh](https://discourse.elm-lang.org/u/paulh)\
**Post date:** [June 12, 2021, 7:25am UTC](https://discourse.elm-lang.org/t/elm-files-are-not-compiled-by-webpack-in-phoenix-framework/7407/14 "2021-06-12T07:25:18Z")

</div>

> [@bdrp](#):
>
> What versions of Webpack and Webpack-cli are you running?

Webpack: v4.41.5  
Webpack-cli: v3.3.12

> [@bdrp](#):
>
> Do you do something in particular in app.js or do you just include the Main.elm file?

Nope, just include Main.elm.

`import { Elm } from "../elm/Main.elm";`

You could have a look [here](https://github.com/phollyer/elm-phoenix-websocket-example) and compare, its an example app for [elm-phoenix-websocket](https://package.elm-lang.org/packages/phollyer/elm-phoenix-websocket/latest/).

---

<div class="post-metadata">

**Author:** ![system](https://canada1.discourse-cdn.com/flex035/uploads/elm_lang/original/1X/50a05e53677a2c3b47776d7abd0f113eb50193a1.png) [@system](https://discourse.elm-lang.org/u/system)\
**Post date:** [June 22, 2021, 7:26am UTC](https://discourse.elm-lang.org/t/elm-files-are-not-compiled-by-webpack-in-phoenix-framework/7407/15 "2021-06-22T07:26:11Z")

</div>

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.